切圖崽的自我修養(yǎng)－使用模塊化JS

littleGrow 發(fā)布于2019-08-19 18:43 / 769人閱讀

摘要：之前的閉包也好，自執(zhí)行函數(shù)也好，都是模塊化的一些嘗試，直到規(guī)范推出之后，模塊化才真正迅猛發(fā)展起來。因?yàn)橛辛四K化的概念，才有了按需加載的概念。

前言

我們來玩樂高積木吧

模塊化Js已經(jīng)成為了老生常談，不過在JavaScript設(shè)計(jì)之初，由于定位的問題并沒有提供類的功能，開發(fā)者需要模擬出類似的功能，來隔離、組織復(fù)雜的JavaScript代碼。之前的閉包也好，自執(zhí)行函數(shù)也好，都是模塊化的一些嘗試，直到CommonJs規(guī)范推出之后，模塊化Js才真正迅猛發(fā)展起來。

從時(shí)間點(diǎn)上來說：

Node遵循CommonJs模塊化規(guī)范，NPM包管理系統(tǒng)發(fā)展如此迅猛就是CommonJs模塊化規(guī)范的最佳實(shí)踐

后來在CommonJs的基礎(chǔ)上衍生出了AMD／CMD規(guī)范，其各自的實(shí)踐分別是RequireJS和SeaJs

CommonJs同步加載規(guī)范

CommonJs規(guī)范遵循的是同步加載模塊規(guī)范，即：

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

即只有a.js加載完以后，才能接著向下執(zhí)行A.funA();才能接著向下加載b.js，等b.js加載完之后，才能向下執(zhí)行B.funB();。但這種同步串行的加載方式確對(duì)效率并沒有多大影響，因?yàn)?b>CommonJs是在Node上運(yùn)行，處于服務(wù)器環(huán)境，服務(wù)器環(huán)境對(duì)模塊的加載等同于硬盤的讀寫速度，是非常非常快的。

AMD/CMD異步加載規(guī)范

AMD/CMD 遵循的是異步加載模塊規(guī)范，拿CMD規(guī)范的SeaJs舉例：

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

其中，alert(1) 和alert(2)的執(zhí)行順序是不固定的，因?yàn)槭遣捎卯惒郊虞d模塊的方式，a模塊和b模塊是并行加載的，誰先加載完畢，誰先掉用回調(diào). 因?yàn)榫W(wǎng)絡(luò)和文件大小的原因，當(dāng)然有可能是b模塊先加載完畢，所以可能是alert(2)先執(zhí)行.

因?yàn)?b>requireJs(AMD)和SeaJs(CMD) 都是運(yùn)行在客戶端瀏覽器上的. 模塊的加載速度和網(wǎng)絡(luò)狀況有關(guān)系，加載情況是非常不穩(wěn)定，如果采用同步串行加載的方式，會(huì)出現(xiàn)因?yàn)榍懊娴哪K加載耗時(shí)太長而阻塞了它之后的模塊的加載. 所以AMD/CMD才有了異步的解決方案

(當(dāng)然，AMD/CMD也支持同步加載)

按需加載

按需加載是模塊化Js引伸出來的概念.我們可以讓特定的頁面加載特定的JS，就像搭積木剛好把房子搭起來一樣，用Js模塊組合的方式可以項(xiàng)目搭建起來，保證不缺少任何一個(gè)必要的模塊，也保證不會(huì)有任何一個(gè)多余的模塊.

如果index.html只需要彈窗功能和滑動(dòng)功能，就只加載pop.js和slip.js

說起來倒是挺簡單，但實(shí)際上呢？

實(shí)際上也非常簡單，拿seaJS舉例來說，頁面index.html引用了Sea.js后，就可以以index.js為加載入口，對(duì)頁面所需的七七八八的JS模塊進(jìn)行加載：

index.html:

其中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");          
     ...
});

不管這個(gè)依賴關(guān)系有多復(fù)雜，層級(jí)有多深，seaJS的模塊加載器會(huì)遞歸找到所有頁面index.html依賴的Js，就拿例子來說，和index.html有關(guān)的依賴有入口文件index.js和它依賴的a.js, b.js ，并且還有a.js依賴的 c.js 所以最后index.html實(shí)際上會(huì)加載index.js, a.js, b.js , c.js

這樣就實(shí)現(xiàn)了頁面需要什么模塊，就加載什么模塊(和這些模塊依賴的模塊)，從而實(shí)現(xiàn)了按需加載。

但有同學(xué)估計(jì)又想到了，這個(gè)地方有個(gè)小缺陷，雖然模塊化Js使得加載邏輯更清晰了，但是如此碎片化的Js會(huì)增加頁面http的請求數(shù)，從而影響頁面的加載速度。

沒錯(cuò)，所以我們通常在上線前會(huì)利用自動(dòng)化工具對(duì)當(dāng)前頁面依賴的所有Js做一個(gè)合并處理，即合并壓縮成一個(gè)Js文件，這樣能最大程度上的利用瀏覽器緩存，減少Http請求數(shù)。

(注：Js模塊書寫的時(shí)候請盡量避免循環(huán)引用的問題，即a.js引用了c.js，反過來c.js又引用了a.js. 這肯定是模塊書寫不規(guī)范造成的，請檢查這兩個(gè)模塊的邏輯是否有重疊. 當(dāng)然，除此之外循環(huán)引用還是有別的辦法解決的，這里就不提了)

結(jié)語

總而言之，模塊化Js目前有兩大規(guī)范（當(dāng)然要說成三種規(guī)范也可以，不過在作者本人看來AMD/CMD并沒有本質(zhì)上的區(qū)別）

CommonJS同步加載模塊規(guī)范，運(yùn)行在服務(wù)端

AMD/CMD 異步加載模塊規(guī)范，運(yùn)行在客戶端

因?yàn)镃ommonJs規(guī)范在服務(wù)器端的同步串行加載Js模塊的方式并不適用于客戶端瀏覽器，所以才有了AMD/CMD規(guī)范延伸出異步并行加載Js模塊的方式。

因?yàn)橛辛薐s模塊化的概念，才有了Js按需加載的概念。