前端模組化規範

在前端開發中，在使用webpack等構建工具開發中我們經常使用import *** from **或者是require來引入我們需要的模組，那麼下面來聊聊前端模組化幾種規範。

在早期我們寫js**通常是這樣子：

var a=1;

var b=1;
function a()
function b()

同時當我們在同乙個頁面請求過多的js檔案時會造成頁面阻塞和http請求過多。

由於上面的種種缺點，這時候模組化顯得非常重要，前期的模組化通過閉包來達到變數私有化和模組化。

var module=(function()

return 
})()

commonjs規範

commonjs簡介

commonjs規範是在node的模組系統基礎上提出來的，也就是commonjs在伺服器中使用，不能在瀏覽器環境中使用。

commonjs規範規定，每個模組內部，module變數代表當前模組（乙個js檔案就是乙個模組）。這個變數是乙個物件，它的exports屬性（即module.exports）是對外的介面。載入某個模組，其實是載入該模組的module.exports屬性。

commonjs**書寫

var a = 1;

var b = function ()
module.exports.a = a;
module.exports.b = b;

require方法引入

var main = require('./main')

main.a
main.b

commonjs規範特點

admadm簡介

上面說了commonjs的執行是同步進行的，而且瀏覽器環境中沒有commonjs模組中的必要的字段，所以他不適合瀏覽器環境，這時候requirejs應勢而生，它的誕生逐漸形成了adm規範。

adm規範中規定所有模組和依懶項非同步載入，這樣子js檔案就不是一次性引入了。

adm模組**書寫

我們說adm規範主要使用requirejs。

define([jquery.js],function($)
})define([jquery.js],function($)
})

通過require方法引入:

require([a.js,b.js],function(a,b))

cdmcdm介紹

在seajs出現後又形成了cdm規範，cdm規範和adm類似，都是為了適應瀏覽器，但是cdm推崇就近依賴，adm推崇依賴前置。

cdm模組**書寫

define(function(require,exports,module);

})

cdm和adm規範

cdm規範和adm規範是類似的，都是非同步按需引入。

但是他們執行的時機不同。

cdm是載入模組後立刻執行，也就是提前執行，

而adm是載入模組後遇到require方法才執行模組，也就是延遲執行，可以參考這篇文章中的幾個列子。

es6模組化規範

在前面幾個模組化規範發展中，逐漸形成了es6規範，也是我們在專案中用的最多的了，也是我們最熟悉的模組化規範了，這裡就不展開說了。

參考：

JS前端模組化規範

於是有了菜鳥解惑的搜嘍過程。匯入 require module 匯出 exports.getstoreinfo function module.exports somevalue 參照commonjs模組代表node.js的模組系統 定義 define module dep1 dep2 functi...

模組化規範

1 commons.js規範 適應於服務端模組化，同步載入模組。node.js按照該規範。require 載入 module.export匯出 2 amd規範 非同步模組定義，適應於瀏覽器模組化，非同步載入模組。requirejs按照該規範。模組定義 define 依賴的模組 function 模組...

前端模組化兩種規範

前端模組化，是指js編寫的的模組化規範。本文參考 大神偶像阮一峰老師的文章 為什麼要模組化？1.乙個檔案需要很多js檔案做依賴的時候，這些js檔案之間的關係很容易讓人眩暈，模組化後可以現用現引 2.模組後可以防止模組內的變數和模組外的變數相互汙染 模組化發展經歷了哪些階段？鏈結 模組化分類 js是前...