前端模塊化規範

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

爲何須要模塊化

在早期咱們寫js代碼一般是這樣子：

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

這樣子會形成命名衝突和全局污染。
同時當咱們在同一個頁面請求過多的js文件時會形成頁面阻塞和http請求過多。

模塊化規範

因爲上面的種種缺點，這時候模塊化顯得很是重要，前期的模塊化經過閉包來達到變量私有化和模塊化。

var module=(function(){
    var a = 1;
    var b = function(){
        
    }
    return {
        b:b
    }
})()

可是這樣子仍是不能解決加載問題。 這時js模塊加載器誕生了，並逐漸造成幾種模塊化規範。

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;

上面代碼經過module.exports輸出變量a和函數b。

require方法引入

var main = require('./main')
main.a
main.b

其實這些代碼在咱們使用webpack配置的時候常常用到，webpack是運行在node環境中的，他使用的是CommonJS規範。

CommonJS規範特色

• 全部模塊都是運行在模塊做用域，不會污染全局
• 模塊屢次運行，只執行一次，而後緩存起來，要讓模塊從新執行只能清緩存
• 他是按照引入的順序執行的，也是就是同步執行

ADM

ADM簡介

上面說了CommonJS的執行是同步進行的，並且瀏覽器環境中沒有CommonJS模塊中的必要的字段，因此他不適合瀏覽器環境，這時候requirejs應勢而生，它的誕生逐漸造成了ADM規範。

ADM規範中規定全部模塊和依懶項異步加載，這樣子js文件就不是一次性引入了。

ADM模塊代碼書寫

咱們說ADM規範主要使用requirejs。

//a.js
define([jquery.js],function($){
    var aa = 1
    return{
        a:aa
    }
})
//b.js
define([jquery.js],function($){
    var bb = 2;
    return {
        b:bb
    }
})

上面文件a.js和b.js經過define方法定義各自的模塊。

經過require方法引入:

require([a.js,b.js],function(a,b){
    console.log(a.aa) //1
    console.log(b.bb)//2
})

ADM規範模塊特色

• 按需加載，也就是說你引入模塊才加載，不會在頁面上一次性加載
• 異步加載，全部加載都是異步，不會阻塞頁面

CDM

CDM介紹

在seajs出現後又造成了CDM規範，CDM規範和ADM相似，都是爲了適應瀏覽器，可是CDM推崇就近依賴，ADM推崇依賴前置。

CDM模塊代碼書寫

define(function(require,exports,module){
    var $ = require(jquery.js)
    exports.sayHello = function() {
    $('#hello').toggle('slow');
  };
})

CDM規範中模塊代碼書寫和CommonJS類似，其實ADM規範中也能夠這樣子引用模塊。具體能夠看seajs使用文檔和requirejs使用文檔

CDM和ADM規範

CDM規範和ADM規範是相似的，都是異步按需引入。
可是他們執行的時機不一樣。

CDM是加載模塊後馬上執行，也就是提早執行，

而ADM是加載模塊後遇到require方法才執行模塊，也就是延遲執行，能夠參考這篇文章中的幾個列子。

ES6模塊化規範

在前面幾個模塊化規範發展中，逐漸造成了ES6規範，也是咱們在項目中用的最多的了，也是咱們最熟悉的模塊化規範了，這裏就不展開說了。

參考：
https://blog.csdn.net/weixin_40969472/article/details/78646003

http://www.360doc.com/content/19/0519/15/13328254_836725029.shtml

http://www.ruanyifeng.com/blog/2015/05/commonjs-in-browser.html

http://huangxuan.me/js-module-7day/#/15

https://github.com/seajs/seajs/issues/547