切图崽的自我教养－运用模块化JS

2024年5月3日 177次阅读 来源: 大切图崽

媒介

我们来玩乐高积木吧

模块化Js已经成为了陈词滥调，不过在JavaScript设想之初，由于定位的题目并没有供应类的功用，开发者须要模拟出相似的功用，来断绝、构造庞杂的JavaScript代码。之前的闭包也好，自实行函数也好，都是模块化的一些尝试，直到CommonJs范例推出今后，模块化Js才真正迅猛生长起来。

从时刻点上来讲：

  1. Node遵照CommonJs模块化范例，NPM包治理体系生长云云迅猛就是CommonJs模块化范例的最好实践

  2. 厥后在CommonJs的基础上衍生出了AMD／CMD范例，其各自的实践分别是RequireJS和SeaJs

CommonJs同步加载范例

CommonJs范例遵照的是同步加载模块范例，即：

var A = require(./module/a);
A.funA();
var B = require(./module/b);
B.funB();

即只要a.js加载完今后，才接着向下实行A.funA();才接着向下加载b.js， 等b.js加载完今后，才向下实行B.funB();。但这类同步串行的加载体式格局确对效力并没有多大影响，由于CommonJs是在Node上运转，处于服务器环境，服务器环境对模块的加载等同于硬盘的读写速率，是异常异常快的。

AMD/CMD异步加载范例

AMD/CMD 遵照的是异步加载模块范例，拿CMD范例的SeaJs举例：

 define(function(require,exports,module){
    require.async('./module/a', function(){alert(1)}
    require.async('./module/b', function(){alert(2)}
  });

个中，alert(1) 和alert(2)的实行递次是不牢固的，由于是采纳异步加载模块的体式格局，a模块和b模块是并行加载的 ，谁先加载终了，谁先掉用回调. 由于收集和文件大小的缘由， 固然有多是b模块先加载终了，所以多是alert(2)先实行.

由于requireJs(AMD)和SeaJs(CMD) 都是运转在客户端浏览器上的. 模块的加载速率和收集状态有关联，加载状况是异常不稳定，假如采纳同步串行加载的体式格局，会出现由于前面的模块加载耗时太长而壅塞了它今后的模块的加载. 所以AMD/CMD才有了异步的处理方案

(固然，AMD/CMD也支撑同步加载)

按需加载

按需加载是模块化Js引申出来的观点.我们能够让特定的页面加载特定的JS，就像搭积木刚好把屋子搭起来一样，用Js模块组合的体式格局能够项目搭建起来，保证不缺乏任何一个必要的模块，也保证不会有任何一个过剩的模块.

假如index.html只须要弹窗功用和滑动功用，就只加载pop.js和slip.js

说起来却是挺简朴，但现实上呢？

现实上也异常简朴，拿seaJS举例来讲，页面index.html援用了Sea.js后，就能够以index.js为加载进口，对页面所需的七七八八的JS模块举行加载：

index.html:

<script src="static/js/lib/sea.js" id="seaJSnode"></script>
<script>
    seaJS.use("./index.js");      
</script>

个中index.js:

define(function(require,exports,module){
     //引入模块a
     var A = require('./module/a'); 
     //引入模块b
     var B = require('./module/b')     
     
     ...
});

个中a.js又依靠了其他的模块:

define(function(require,exports,module){
     //引入模块c
     var C = require('./module/c');          
     ...
});

不论这个依靠关联有多庞杂，层级有多深，seaJS的模块加载器会递归找到一切页面index.html依靠的Js，就拿例子来讲，和index.html有关的依靠有 进口文件index.js和它依靠的a.js, b.js ，而且另有a.js依靠的 c.js 所以末了index.html现实上会加载index.js, a.js, b.js , c.js

如许就完成了页面须要什么模块，就加载什么模块(和这些模块依靠的模块)，从而完成了按需加载。

但有同砚预计又想到了，这个处所有个小缺点，虽然模块化Js使得加载逻辑更清楚了，然则云云碎片化的Js会增添页面http的请求数，从而影响页面的加载速率。

没错，所以我们通常在上线前会应用自动化东西对当前页面依靠的一切Js做一个兼并处置惩罚，即兼并压缩成一个Js文件， 如许能最大程度上的应用浏览器缓存，削减Http请求数。

(注：Js模块誊写的时刻请只管防止轮回援用的题目，即a.js援用了c.js，反过来c.js又援用了a.js. 这肯定是模块誊写不范例形成的，请搜检这两个模块的逻辑是不是有堆叠. 固然，除此之外轮回援用照样有别的方法处理的，这里就不提了)

结语

总而言之，模块化Js现在有两大范例（固然要说成三种范例也能够，不过在作者本人看来AMD/CMD并没有本质上的区分）

  • CommonJS同步加载模块范例，运转在服务端

  • AMD/CMD 异步加载模块范例，运转在客户端

由于CommonJs范例在服务器端的同步串行加载Js模块的体式格局并不适用于客户端浏览器，所以才有了AMD/CMD范例延伸出异步并行加载Js模块的体式格局。

由于有了Js模块化的观点，才有了Js按需加载的观点。

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