切图崽的自我教养－SeaJs主要观点理会

2024年2月6日 149次阅读 来源: 大切图崽

媒介

高能预警，火线山路十八弯

在上一篇文章里简朴的议论了一下模块化Js, 先来回忆一下如今模块化的两大范例:

  • CommonJs 同步加载模块范例

  • AMD/CMD 异步加载模块范例

个中CMD范例的产出是国内如今异常火爆的SeaJs, 这篇文章主假如诠释几个应用SeaJs会遇到的主要观点

  • 签字模块

  • 匿名模块

  • 途径即ID准绳

匿名模块

SeaJs定义匿名模块平常采纳以下的体式格局:

define(function(require,exports,module){xx})

签字模块

SeaJs定义除了定义匿名模块，还可以定义签字模块

//define(BlockID,[Deps],function(require,exports,module){})
 define(‘A’,[],function(require,exports,module){xx})

个中可以

  • 第一个参数 定义该模块的名字(即ID),用来唯一标识该模块

  • 第二个参数 把该模块依靠的模块从函数体里提到参数中，用来标识该模块还依靠了哪些模块

  • 第三个参数 模块主体

为何须要签字模块?

固然，我们可以把一切模块都以匿名的情势誊写。但如许有个很大的瑕玷，就是模块化会致使Js文件迥殊多，如许无形中会加大了http要求的数
我们在晓得，在文件比较小的时刻, 文件的大小并不明显影响http的下载速率, 然则假如把这个文件拆成两个文件下载，增添的一次http开支确是很大的
所以，许多情况下我们须要把细碎的Js模块举行兼并成一个文件。然则这么多模块兼并在一个文件里，满是匿名的话，体系怎样区分哪一个是哪一个模块呢？ 因而，我们须要对这些模块给差别的ID举行标识。 因而这些带了ID的模块，就叫做签字模块

途径即ID

上面诠释了什么是签字模块，为何须要用签字模块，我们如今就来给签字模块定名

SeaJs遵照的是途径即ID定名划定规矩，意义就是签字模块的ID名是途径的一部分. 而沿着终究拼接出来的途径，一定可以找获得这个签字模块

听起来很绕，但这个划定规矩异常异常异常主要.作者也是在明白SeaJs途径的历程当中踩坑无数，这里就来重点讲一下
起首来看SeaJs的途径的誊写品种，总的来讲，可以分为3种.

  1. 相对途径(以相对途径符开首，比方../js/), 途径以本页面为出发点

  2. 直接途径(以直接目次开首，比方js/), 途径以baseUrl为出发点

  3. 根途径(以根途径开首， 比方/app/js/) 途径以项目根目次为出发点

这里拿进口文件index.html举例:


<!--例1-->
<script>
    seajs.config({
    base: "../js/",      
    alias:{"JQ":"lib/jquery"}        
    })
    
    seajs.use("src/index.js")  
</script>

  • base参数是以当前页面(index.html)为参照，设定基础相对途径baseUrl.
    在本例中base设定采纳相对途径的情势， 那末baseUrl ＝ (index.html的位置) ＋ (../js/)

  • alias可以给签字模块(例子中该匿名模块ID为lib/jquery)取别号(JQ)，取别号的优点在于可以把签字模块自身异常冗杂的途径定名变得很短很小清爽，平常是针对页面须要援用的库文件.
    在本例中JQ 后的途径是采纳直接途径的情势， 那末JQ的途径＝ (baseUrl) + (lib/jquery) = (index.html的位置)+ (../js/) + (lib/jquery/)

  • sea.use用来指定SeaJS加载器的进口， 经由历程在进口js再加载七七八八页面所需的JS模块到达按需加载的目标
    在本例中，sea.use的途径是采纳直接途径的情势， 那末进口文件index.js的途径 ＝ (baseUrl) + (src/index.js) = (index的位置) + (../js/) + (src/index.js)

假如换一种情势写:

<!--例2-->
<script>
    seajs.config({
    base: "../js/",      
    alias:{"JQ":"../js/lib/jquery"}        
    })
    
    seajs.use("../js/src/index.js")  
</script>

  • base设定采纳相对途径的情势， 那末baseUrl = (index.html的位置) ＋ (../js/)

  • alias JQ 后的途径是采纳相对途径的情势， 那末JQ的途径= (index.html的位置) ＋ (../js/lib/jquery)

  • sea.use的途径是采纳相对途径的情势， 那末进口文件index.js的途径= (index.html的位置) + (../js/src/index.js)

如今拿例1来讲:

<!--例1-->
<script>
    seajs.config({
    base: "../js/",      
    alias:{"JQ":"lib/jquery"}        
    })
    
    seajs.use("src/index.js")  
</script>

既然alias中签字模块叫lib/jquery, 那末你的jquery经由历程define定义的模块ID一定是lib/jquery

define(‘lib/jquery’,[],function(require,exports,module){xx})

又因为alias中签字模块(lib/jquery)的采纳了直接途径的体式格局, 依据途径即ID的准绳，你应当可以顺着 (baseUrl) + (lib/jquery) 找到该签字模块的位置,假如找不到，一定会报错

如今拿例2来讲:

<!--例2-->
<script>
    seajs.config({
    base: "../js/",      
    alias:{"JQ":"../js/lib/jquery"}        
    })
    
    seajs.use("../js/src/index.js")  
</script>

既然alias中签字模块叫../js/lib/jquery, 那末你的jquery经由历程define定义的模块ID一定是../js/lib/jquery

define(‘../js/lib/jquery’,[],function(require,exports,module){xx})

又因为alias中签字模块(../js/lib/jquery)的采纳了相对途径的体式格局, 依据途径即ID的准绳，你应当可以顺着 index.html当前位置 + (../js/lib/jquery) 找到该签字模块的位置,假如找不到，一定会报错

现实应用

但现实的应用上，我们基础不会去写签字模块， 而是悉数写匿名模块
然后经由历程自动化构建东西(比方grunt,gulp,fis3)的插件去自动处理匿名模块签字化的题目，比方grunt就供应了相干插件:

  • grunt-cmd-transport 将匿名模块转换成签字模块

  • grunt-cmd-concat 将签字模块兼并紧缩到一个Js文件里

结语

SeaJs大法好，Grunt大法好 但在应用这些东西的之时，并非简朴抄一两个demo就完事. 许多情况下你要依据本身工程的特征来调解目次构造，而模块地点的途径，和模块的ID, 和末了JS兼并紧缩的历程息息相干. 所以必需明白它们的划定规矩，应用起来才越发随心所欲

    原文作者：大切图崽
    原文地址: https://segmentfault.com/a/1190000005900452
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞