JAVAScript：前端模塊化開發

時間 2019-11-09

標籤 javascript 前端模塊化開發欄目 JavaScript 简体版

原文原文鏈接

目錄javascript

　　　　一：前端模塊化概要css

2、CommonJS

3、AMD

3.四、簡單示例

2.三、Babel

2.四、模塊(Modules)

2.五、模塊加載器(Module Loaders)

6、NodeJS包管理器

早期的javascript版本沒有塊級做用域、沒有類、沒有包、也沒有模塊，這樣會帶來一些問題，如複用、依賴、衝突、代碼組織混亂等，隨着前端的膨脹，模塊化顯得很是迫切。html

1、前端模塊化概要

1.一、模塊概要

JavaScript在早期的設計中就沒有模塊、包、類的概念，開發者須要模擬出相似的功能，來隔離、組織複雜的JavaScript代碼，咱們稱爲模塊化。前端

模塊就是一個實現特定功能的文件，有了模塊咱們就能夠更方便的使用別人的代碼，要用什麼功能就加載什麼模塊。vue

模塊化開發的四點好處：java

　　（1）、避免變量污染，命名衝突node

　　（2）、提升代碼複用率react

　　（3）、提升了可維護性jquery

　　（4）、方便依賴關係管理webpack

爲了不缺乏模塊帶來的問題，咱們能夠看看程序員應對的歷程：

1.二、函數封裝

咱們在講函數的時候提到，函數一個功能就是實現特定邏輯的一組語句打包，並且JavaScript的做用域就是基於函數的，因此把函數做爲模塊化的第一步是很天然的事情，在一個文件裏面編寫幾個相關函數就是最開始的模塊了

//函數1
function fn1(){
  //statement
}
//函數2
function fn2(){
  //statement
}

這樣在須要的之後夾在函數所在文件，調用函數就能夠了

缺點：

污染了全局變量，沒法保證不與其餘模塊發生變量名衝突，並且模塊成員之間沒什麼關係

1.三、對象封裝

爲了解決上面問題，對象的寫法應運而生，能夠把全部的模塊成員封裝在一個對象中

var myModule = {
var1: 1,

var2: 2,

fn1: function(){

},

fn2: function(){

}
}

這樣咱們在但願調用模塊的時候引用對應文件，而後

myModule.fn2();

這樣避免了變量污染，只要保證模塊名惟一便可，同時同一模塊內的成員也有了關係

缺陷：外部能夠隨意修改內部成員，這樣就會產生意外的安全問題

myModel.var1 = 100;

1.四、當即執行函數表達式（IIFE）

能夠經過當即執行函數表達式（IIFE），來達到隱藏細節的目的

var myModule = (function(){
var var1 = 1;
var var2 = 2;

function fn1(){

}

function fn2(){

}

return {
fn1: fn1,
fn2: fn2
};
})();

這樣在模塊外部沒法修改咱們沒有暴露出來的變量、函數

缺點：功能相對較弱，封裝過程增長了工做量、仍會致使命名空間污染可能、閉包是有成本的。

JavaScript最初的做用僅僅是驗證表單，後來會添加一些動畫，可是這些js代碼不少在一個文件中就能夠完成了，因此，咱們只須要在html文件中添加一個script標籤。

後來，隨着前端複雜度提升，爲了可以提升項目代碼的可讀性、可擴展性等，咱們的js文件逐漸多了起來，再也不是一個js文件就能夠解決的了，而是把每個js文件當作一個模塊。那麼，這時的js引入方式是怎樣的呢？大概是下面這樣：

　　<script src="jquery.js"></script>
　　<script src="jquery.artDialog.js"></script>
　　<script src="main.js"></script>
　　<script src="app1.js"></script>
　　<script src="app2.js"></script>
　　<script src="app3.js"></script>

即簡單的將全部的js文件通通放在一塊兒。可是這些文件的順序還不能出錯，好比jquery須要先引入，才能引入jquery插件，才能在其餘的文件中使用jquery。

優勢：

相比於使用一個js文件，這種多個js文件實現最簡單的模塊化的思想是進步的。　

缺點：

污染全局做用域。由於每個模塊都是暴露在全局的，簡單的使用，會致使全局變量命名衝突，固然，咱們也可使用命名空間的方式來解決。

對於大型項目，各類js不少，開發人員必須手動解決模塊和代碼庫的依賴關係，後期維護成本較高。

依賴關係不明顯，不利於維護。好比main.js須要使用jquery，可是，從上面的文件中，咱們是看不出來的，若是jquery忘記了，那麼就會報錯。

1.五、模塊化規範

常見的的JavaScript模塊規範有：CommonJS、AMD、CMD、UMD、原生模塊化

1.5.一、CommonJS

CommonJs 是服務器端模塊的規範，Node.js採用了這個規範。

根據CommonJS規範，一個單獨的文件就是一個模塊。加載模塊使用require方法，該方法讀取一個文件並執行，最後返回文件內部的exports對象。

例如：

// foobar.js

//私有變量
var test = 123;

//公有方法
function foobar () {

this.foo = function () {
// do someing ...
}
this.bar = function () {
//do someing ...
}
}

//exports對象上的方法和變量是公有的
var foobar = new foobar();
exports.foobar = foobar;
//require方法默認讀取js文件，因此能夠省略js後綴
var test = require('./foobar').foobar;

test.bar();

CommonJS 加載模塊是同步的，因此只有加載完成才能執行後面的操做。像Node.js主要用於服務器的編程，加載的模塊文件通常都已經存在本地硬盤，因此加載起來比較快，不用考慮異步加載的方式，因此CommonJS規範比較適用。但若是是瀏覽器環境，要從服務器加載模塊，這是就必須採用異步模式。因此就有了 AMD CMD 解決方案。

1.5.二、AMD((Asynchromous Module Definition) 異步模塊定義

AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出

AMD異步加載模塊。它的模塊支持對象函數構造器字符串 JSON等各類類型的模塊。

適用AMD規範適用define方法定義模塊。

//經過數組引入依賴 ，回調函數經過形參傳入依賴
define(['someModule1', ‘someModule2’], function (someModule1, someModule2) {

function foo () {
/// someing
someModule1.test();
}

return {foo: foo}
});

AMD規範容許輸出模塊兼容CommonJS規範，這時define方法以下：

define(function (require, exports, module) {

var reqModule = require("./someModule");
requModule.test();

exports.asplode = function () {
//someing
}
});

1.5.三、CMD（Common Module Definition）通用模塊定義

CMD是SeaJS 在推廣過程當中對模塊定義的規範化產出

CMD和AMD的區別有如下幾點：

1.對於依賴的模塊AMD是提早執行，CMD是延遲執行。不過RequireJS從2.0開始，也改爲能夠延遲執行（根據寫法不一樣，處理方式不經過）。

2.CMD推崇依賴就近，AMD推崇依賴前置。

//AMD
define(['./a','./b'], function (a, b) {

//依賴一開始就寫好
a.test();
b.test();
});

//CMD
define(function (requie, exports, module) {

//依賴能夠就近書寫
var a = require('./a');
a.test();

...
//軟依賴
if (status) {

var b = requie('./b');
b.test();
}
});

雖然 AMD也支持CMD寫法，但依賴前置是官方文檔的默認模塊定義寫法。

3.AMD的api默認是一個當多個用，CMD嚴格的區分推崇職責單一。例如：AMD裏require分全局的和局部的。CMD裏面沒有全局的 require,提供 seajs.use()來實現模塊系統的加載啓動。CMD裏每一個API都簡單純粹。

SeaJS 和 RequireJS的主要區別在此有解釋

1.5.四、UMD

UMD是AMD和CommonJS的綜合產物。

AMD 瀏覽器第一的原則發展異步加載模塊。

CommonJS 模塊以服務器第一原則發展，選擇同步加載，它的模塊無需包裝(unwrapped modules)。

這迫令人們又想出另外一個更通用的模式UMD （Universal Module Definition）。但願解決跨平臺的解決方案。

UMD先判斷是否支持Node.js的模塊（exports）是否存在，存在則使用Node.js模塊模式。

在判斷是否支持AMD（define是否存在），存在則使用AMD方式加載模塊。

(function (window, factory) {
if (typeof exports === 'object') {

module.exports = factory();
} else if (typeof define === 'function' && define.amd) {

define(factory);
} else {

window.eventUtil = factory();
}
})(this, function () {
//module ...
});

1.5.五、原生JS模塊化（Native JS）

上述的模塊都不是原生 JavaScript 模塊。它們只不過是咱們用模塊模式（module pattern）、CommonJS 或 AMD 模仿的模塊系統。

JavaScript標準制定者在 TC39（該標準定義了 ECMAScript 的語法與語義）已經爲 ECMAScript 6（ES6）引入內置的模塊系統了。

ES6 爲導入（importing）導出（exporting）模塊帶來了不少可能性。下面是很好的資源：

http://jsmodules.io/

http://exploringjs.com/

相對於 CommonJS 或 AMD，ES6 模塊如何設法提供一箭雙鵰的實現方案：簡潔緊湊的聲明式語法和異步加載，另外能更好地支持循環依賴。

1.5.六、小結

AMD（異步模塊定義）是 RequireJS 在推廣過程當中對模塊定義的規範化產出，CMD（通用模塊定義）是SeaJS 在推廣過程當中被普遍認知。RequireJs出自dojo加載器的做者James Burke，SeaJs出自國內前端大師玉伯。

二者的區別以下：

RequireJS 和 SeaJS 都是很不錯的模塊加載器，二者區別以下：

1. 二者定位有差別。RequireJS 想成爲瀏覽器端的模塊加載器，同時也想成爲 Rhino / Node 等環境的模塊加載器。SeaJS 則專一於 Web 瀏覽器端，同時經過 Node 擴展的方式能夠很方便跑在 Node 服務器端

2. 二者遵循的標準有差別。RequireJS 遵循的是 AMD（異步模塊定義）規範，SeaJS 遵循的是 CMD （通用模塊定義）規範。規範的不一樣，致使了二者 API 的不一樣。SeaJS 更簡潔優雅，更貼近 CommonJS Modules/1.1 和 Node Modules 規範。

3. 二者社區理念有差別。RequireJS 在嘗試讓第三方類庫修改自身來支持 RequireJS，目前只有少數社區採納。SeaJS 不強推，而採用自主封裝的方式來「海納百川」，目前已有較成熟的封裝策略。

4. 二者代碼質量有差別。RequireJS 是沒有明顯的 bug，SeaJS 是明顯沒有 bug。

5. 二者對調試等的支持有差別。SeaJS 經過插件，能夠實現 Fiddler 中自動映射的功能，還能夠實現自動 combo 等功能，很是方便便捷。RequireJS 無這方面的支持。

6. 二者的插件機制有差別。RequireJS 採起的是在源碼中預留接口的形式，源碼中留有爲插件而寫的代碼。SeaJS 採起的插件機制則與 Node 的方式一致：開放自身，讓插件開發者可直接訪問或修改，從而很是靈活，能夠實現各類類型的插件。

2、CommonJS

CommonJS就是一個JavaScript模塊化的規範，該規範最初是用在服務器端NodeJS中，前端的webpack也是對CommonJS原生支持的。

根據這個規範，每個文件就是一個模塊，其內部定義的變量是屬於這個模塊的，不會對外暴露，也就是說不會污染全局變量。

CommonJS的核心思想就是經過 require 方法來同步加載所要依賴的其餘模塊，而後經過 exports 或者 module.exports 來導出須要暴露的接口。

CommonJS API編寫應用程序，而後這些應用能夠運行在不一樣的JavaScript解釋器和不一樣的主機環境中。

2009年，美國程序員Ryan Dahl創造了node.js項目，將javascript語言用於服務器端編程。這標誌"Javascript模塊化編程"正式誕生。由於老實說，在瀏覽器環境下，之前沒有模塊也不是特別大的問題，畢竟網頁程序的複雜性有限；可是在服務器端，必定要有模塊，與操做系統和其餘應用程序互動，不然根本無法編程。NodeJS是CommonJS規範的實現，webpack 也是以CommonJS的形式來書寫。

CommonJS定義的模塊分爲:{模塊引用(require)} {模塊定義(exports)} {模塊標識(module)}
//require()用來引入外部模塊；
//exports對象用於導出當前模塊的方法或變量，惟一的導出口；
//module對象就表明模塊自己。

Nodejs的模塊是基於CommonJS規範實現的，經過轉換也能夠運行在瀏覽器端。

特色：

一、全部代碼都運行在模塊做用域，不會污染全局做用域。

二、模塊能夠屢次加載，可是隻會在第一次加載時運行一次，而後運行結果就被緩存了，之後再加載，就直接讀取緩存結果。要想讓模塊再次運行，必須清除緩存。

三、模塊加載的順序，按照其在代碼中出現的順序。

2.一、NodeJS中使用CommonJS模塊管理

一、模塊定義

根據commonJS規範，一個單獨的文件是一個模塊，每個模塊都是一個單獨的做用域，也就是說，在該模塊內部定義的變量，沒法被其餘模塊讀取，除非爲global對象的屬性。

模塊只有一個出口，module.exports對象，咱們須要把模塊但願輸出的內容放入該對象。

mathLib.js模塊定義

var message="Hello CommonJS!";

module.exports.message=message;
module.exports.add=(m,n)=>console.log(m+n);

二、模塊依賴

加載模塊用require方法，該方法讀取一個文件而且執行，返回文件內部的module.exports對象。

myApp.js 模塊依賴

var math=require('./mathLib');
console.log(math.message);
math.add(333,888);

三、測試運行

安裝好node.JS

打開控制檯，可使用cmd命令，也能夠直接在開發工具中訪問

運行

2.二、在瀏覽器中使用CommonJS 模塊管理

因爲瀏覽器不支持 CommonJS 格式。要想讓瀏覽器用上這些模塊，必須轉換格式。瀏覽器不兼容CommonJS的根本緣由，在於缺乏四個Node.js環境的變量（module、exports、require、global）。只要可以提供這四個變量，瀏覽器就能加載 CommonJS 模塊。

var math = require('math');
math.add(2, 3);

第二行math.add(2, 3)，在第一行require('math')以後運行，所以必須等math.js加載完成。也就是說，若是加載時間很長，整個應用就會停在那裏等。這對服務器端不是一個問題，由於全部的模塊都存放在本地硬盤，能夠同步加載完成，等待時間就是硬盤的讀取時間。可是，對於瀏覽器，這倒是一個大問題，由於模塊都放在服務器端，等待時間取決於網速的快慢，可能要等很長時間，瀏覽器處於"假死"狀態

而browserify這樣的一個工具，能夠把nodejs的模塊編譯成瀏覽器可用的模塊，解決上面提到的問題。本文將詳細介紹Browserify實現Browserify是目前最經常使用的CommonJS格式轉換的工具

請看一個例子，b.js模塊加載a.js模塊

// a.js
var a = 100;
module.exports.a = a;

// b.js
var result = require('./a');
console.log(result.a);

index.html直接引用b.js會報錯，提示require沒有被定義

//index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="myApp_01.js"></script>
</body>
</html>

這時，就要使用Browserify了

【安裝】

使用下列命令安裝browserify

npm install -g browserify

【轉換】

使用下面的命令，就能將b.js轉爲瀏覽器可用的格式bb.js

$ browserify myApp.js > myApp_01.js

轉換結果：

查看myapp_01.js，browserify將mathLib.js和myApp.js這兩個文件打包爲MyApp01.js，使其在瀏覽器端能夠運行

(function () {
    function r(e, n, t) {
        function o(i, f) {
            if (!n[i]) {
                if (!e[i]) {
                    var c = "function" == typeof require && require;
                    if (!f && c) return c(i, !0);
                    if (u) return u(i, !0);
                    var a = new Error("Cannot find module '" + i + "'");
                    throw a.code = "MODULE_NOT_FOUND", a
                }
                var p = n[i] = {exports: {}};
                e[i][0].call(p.exports, function (r) {
                    var n = e[i][1][r];
                    return o(n || r)
                }, p, p.exports, r, e, n, t)
            }
            return n[i].exports
        }

        for (var u = "function" == typeof require && require, i = 0; i < t.length; i++) o(t[i]);
        return o
    }

    return r
})()({
    1: [function (require, module, exports) {
        var message = "Hello CommonJS!";

        module.exports.message = message;
        module.exports.add = (m, n) => console.log(m + n);


    }, {}], 2: [function (require, module, exports) {
        var math = require('./mathLib');
        console.log(math.message);
        math.add(333, 888);
    }, {"./mathLib": 1}]
}, {}, [2]);

index.html引用bb.js，控制檯顯示100

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="bb.js"></script> 
</body>
</html>

運行結果：

雖然 Browserify 很強大，但不能在瀏覽器裏操做，有時就很不方便。

純瀏覽器的 CommonJS 模塊加載器 require1k ( https://github.com/Stuk/require1k)。徹底不須要命令行，直接放進瀏覽器便可。

優勢：

CommonJS規範在服務器端率先完成了JavaScript的模塊化，解決了依賴、全局變量污染的問題，這也是js運行在服務器端的必要條件。

缺點：

此文主要是瀏覽器端js的模塊化，因爲 CommonJS 是同步加載模塊的，在服務器端，文件都是保存在硬盤上，因此同步加載沒有問題，可是對於瀏覽器端，須要將文件從服務器端請求過來，那麼同步加載就不適用了，因此，CommonJS是不太適用於瀏覽器端。

3、AMD

3.一、概要

CommonJS規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操做。AMD規範則是非同步加載模塊，容許指定回調函數。因爲Node.js主要用於服務器編程，模塊文件通常都已經存在於本地硬盤，因此加載起來比較快，不用考慮非同步加載的方式，因此CommonJS規範比較適用。可是，若是是瀏覽器環境，要從服務器端加載模塊，這時就必須採用非同步模式，所以瀏覽器端通常採用AMD規範。而AMD規範的實現，就是大名鼎鼎的require.js了。

3.一、require.js

Asynchronous Module Definition，中文名是異步模塊定義。它是一個在瀏覽器端模塊化開發的規範，因爲不是js原生支持，使用AMD規範進行頁面開發須要用到對應的函數庫，也就是大名鼎鼎的RequireJS，實際上AMD是RequireJS在推廣過程當中對模塊定義的規範化的產出。Asynchronous Module Definition，中文名是異步模塊。它是一個在瀏覽器端模塊化開發的規範，因爲不是js原生支持，使用AMD規範進行頁面開發須要用到對應的函數庫，也就是大名鼎鼎的RequireJS，實際上AMD是RequireJS在推廣過程當中對模塊定義的規範化的產出。

官網：http://www.requirejs.cn

requireJS主要解決兩個問題：

1 多個js文件可能有依賴關係，被依賴的文件須要早於依賴它的文件加載到瀏覽器。

2 js加載的時候瀏覽器會中止頁面渲染，加載文件愈多，頁面失去響應的時間愈長。

//定義模塊
define(['dependency'],function(){

    var name = 'foo';
    function printName(){
        console.log(name);
    }

    return {
        printName:printName
    }

})

//加載模塊

require(['myModule'],function(my){
    my.printName();
})

語法：

AMD標準中，定義了下面兩個API：

1.require([module], callback)

2. define(id, [depends], callback)

即經過define來定義一個模塊，而後使用require來加載一個模塊。而且，require還支持CommonJS的模塊導出方式。

requireJS定義了一個函數define，它是全局變量，用來定義模塊。

define(id,dependencies,factory)

——id 可選參數，用來定義模塊的標識，若是沒有提供該參數，腳本文件名（去掉拓展名）

——dependencies 是一個當前模塊用來的模塊名稱數組

——factory 工廠方法，模塊初始化要執行的函數或對象，若是爲函數，它應該只被執行一次，若是是對象，此對象應該爲模塊的輸出值。

在頁面上使用require函數加載模塊；

require([dependencies], function(){});

require()函數接受兩個參數：

——第一個參數是一個數組，表示所依賴的模塊；

——第二個參數是一個回調函數，當前面指定的模塊都加載成功後，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可使用這些模塊

定義alert模塊：

define(function () {
var alertName = function (str) {
alert("I am " + str);
}
var alertAge = function (num) {
alert("I am " + num + " years old");
}
return {
alertName: alertName,
alertAge: alertAge
};
});

引入模塊：

require(['alert'], function (alert) {
alert.alertName('zhangsan');
alert.alertAge(21);
});

可是，在使用require.js的時候，咱們必需要提早加載全部的依賴，而後纔可使用，而不是須要使用時再加載。

優勢：

適合在瀏覽器環境中異步加載模塊。能夠並行加載多個模塊。

缺點：

提升了開發成本，而且不能按需加載，而是必須提早加載全部的依賴。

3.三、使用技巧

請記住使用requirejs的口訣：兩函數一配置一屬性

3.3.一、data-main屬性

requirejs須要一個根來做爲搜索依賴的開始，data-main用來指定這個根。

<script src="scripts/require.js" data-main="scripts/app.js"></script>

這裏就指定了根是app.js,只有直接或者間接與app.js有依賴關係的模塊纔會被插入到html中。

3.3.二、require.config() 配置

經過這個函數能夠對requirejs進行靈活的配置，其參數爲一個配置對象，配置項及含義以下：

baseUrl——用於加載模塊的根路徑。

paths——用於映射不存在根路徑下面的模塊路徑。

shims——配置在腳本/模塊外面並無使用RequireJS的函數依賴而且初始化函數。假設underscore並無使用 RequireJS定義，可是你仍是想經過RequireJS來使用它，那麼你就須要在配置中把它定義爲一個shim。

deps——加載依賴關係數組

require.config({
//默認狀況下從這個文件開始拉去取資源
    baseUrl:'scripts/app',
//若是你的依賴模塊以pb頭，會從scripts/pb加載模塊。
    paths:{
        pb:'../pb'
    },
// load backbone as a shim，所謂就是將沒有采用requirejs方式定義
//模塊的東西轉變爲requirejs模塊
    shim:{
        'backbone':{
            deps:['underscore'],
            exports:'Backbone'
        }
    }
});

3.3.三、define()函數

該函數用於定義模塊。形式以下。

//logger.js
define(["a"], function(a) {
    'use strict';
    function info() {
        console.log("我是私有函數");
    }
    return {
        name:"一個屬性",
        test:function(a){
            console.log(a+"你好！");
            a.f();
            info();
        }
    }
});

define函數就受兩個參數。

* 第一個是一個字符串數組，表示你定義的模塊依賴的模塊，這裏依賴模塊a;

* 第二個參數是一個函數，參數是注入前面依賴的模塊，順序同第一參數順序。在函數中可作邏輯處理，經過return一個對象暴露模塊的屬性和方法，不在return中的能夠認爲是私有方法和私有屬性。

3.3.四、require()函數

該函數用於調用定義好的模塊，能夠是用define函數定義的，也能夠是一個shim。形式以下：

//app.js
require(['logger'], function (logger) {
    logger.test("tom");
    console.log(logger.name);
});
//輸出結果：
//tom你好！
//不肯定（取決於a模塊的f方法）
//我是私有函數
//一個屬性

示例：

View Code

3.四、簡單示例

目錄結構：

模塊定義：

mathModule.js

define(function () {
   return{
       message:"Hello AMD!",
       add:function (n1,n2) {
           return n1+n2;
       }
   }
});

模塊依賴：

app.js

require(['mathModule'],function (mathModule) {
    console.log(mathModule.message);
    console.log(mathModule.add(100,200));
});

測試運行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../js/require2.1.11.js" data-main="app.js"></script>
</body>
</html>

結果：

4、CMD

CMD規範是阿里的玉伯提出來的，實現js庫爲sea.js。它和requirejs很是相似，即一個js文件就是一個模塊，可是CMD的加載方式更加優秀，是經過按需加載的方式，而不是必須在模塊開始就加載全部的依賴。以下：

define(function(require, exports, module) {
    var $ = require('jquery');
    var Spinning = require('./spinning');
    exports.doSomething = ...
    module.exports = ...
})

優勢：

一樣實現了瀏覽器端的模塊化加載。

能夠按需加載，依賴就近。

缺點：

依賴SPM打包，模塊的加載邏輯偏重。

其實，這時咱們就能夠看出AMD和CMD的區別了，前者是對於依賴的模塊提早執行，然後者是延遲執行。前者推崇依賴前置，然後者推崇依賴就近，即只在須要用到某個模塊的時候再require。以下：

// AMD
define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好 
    a.doSomething()
// 此處略去 100 行 
    b.doSomething()
...
});
// CMD
define(function(require, exports, module) {
    var a = require('./a')
    a.doSomething()
// 此處略去 100 行 
    var b = require('./b')
// 依賴能夠就近書寫 
    b.doSomething()
// ... 
});

模塊定義語法

define(id, deps, factory)

由於CMD推崇一個文件一個模塊，因此常常就用文件名做爲模塊id；
CMD推崇依賴就近，因此通常不在define的參數中寫依賴，而是在factory中寫。

factory有三個參數：
function(require, exports, module){}

一，require
require 是 factory 函數的第一個參數，require 是一個方法，接受模塊標識做爲惟一參數，用來獲取其餘模塊提供的接口；

二，exports
exports 是一個對象，用來向外提供模塊接口；

三，module
module 是一個對象，上面存儲了與當前模塊相關聯的一些屬性和方法。

// 定義模塊 myModule.js
define(function(require, exports, module) {
　　var $ = require('jquery.js')
　　$('div').addClass('active');
});

// 加載模塊
seajs.use(['myModule.js'], function(my){

});

什麼是Seajs
Seajs是一個加載器
遵循 CMD 規範模塊化開發，依賴的自動加載、配置的簡潔清晰。
兼容性
Chrome 3+
Firefox 2+
Safari 3.2+
Opera 10+
IE 5.5+
基本應用
導入Seajs庫
去官網下載最新的seajs文件，http://seajs.org/docs/#downloads
在頁尾引入seajs：
<script src="/site/script/sea.js"></script>
而後在它下面寫模塊的配置和入口。

// seajs 的簡單配置
seajs.config({
base: "../sea-modules/",
alias: {
"jquery": "jquery/jquery/1.10.1/jquery.js"
}
});

// 加載入口模塊
seajs.use("../static/hello/src/main");
配置和入口
這裏解釋下配置和入口的意思。

配置
一般在配置上修改seajs的路徑和別名。

seajs的路徑是相對於前面引入的seajs文件的。假如是這樣的目錄結構：

既然這麼方便那在什麼狀況須要配置呢？通常狀況是用不到的。可是假如你的路徑特別深或者要作路徑映射的時候它的做用就來了。下面介紹下經常使用的幾個配置。

seajs.config({
// Sea.js 的基礎路徑（修改這個就不是路徑就不是相對於seajs文件了）
base: 'http://example.com/path/to/base/',
// 別名配置（用變量表示文件，解決路徑層級過深和實現路徑映射）
alias: {
'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
'json': 'gallery/json/1.0.2/json',
'jquery': 'jquery/jquery/1.10.1/jquery'
},
// 路徑配置（用變量表示路徑，解決路徑層級過深的問題）
paths: {
'gallery': 'https://a.alipayobjects.com/gallery'
}
});
查看更多

入口
入口即加載，須要加載什麼文件（模塊加載器）就在這裏引入。sea.js 在下載完成後，會自動加載入口模塊。

seajs.use("abc/main"); //導入seajs.js同級的abc文件夾下的main.js模塊的（後綴名可略去不寫）
seajs.use()還有另一種用法。
有時候咱們寫一個簡單的單頁並不想爲它單獨寫一個js文件，選擇在直接把js代碼寫在頁面上，seajs經過seajs.use()實現了這個。接收兩個參數第一個是文件依賴(單個用字符串數組均可以，多個需用數組表示)，第二個是回調函數。

加載單個依賴

//加載模塊 main，並在加載完成時，執行指定回調
seajs.use('./main', function(main) {
main.init();
});
加載多個依賴

//併發加載模塊 a 和模塊 b，並在都加載完成時，執行指定回調
seajs.use(['./a', './b'], function(a, b) {
a.init();
b.init();
});
這裏回掉函數中的a和b參數是與前面的模塊暴露出來的接口一一對應的。有時候也許只須要使用b的接口，可是也要把a參數寫上。什麼是暴露接口下面會解釋。

經過seajs.use()只能在第一個參數中引入模塊，不能在回調函數中使用require()載入模塊。 ——141023補充

模塊開發
這裏纔是重點，其實也很簡單就是一個書寫規範（CMD）而已。

// 全部模塊都經過 define 來定義
define(function(require, exports, module) {

// 經過 require 引入依賴
var $ = require('jquery');
var Spinning = require('./spinning');

// 經過 exports 對外提供接口
exports.doSomething = ...

// 或者經過 module.exports 提供整個接口
module.exports = ...

});
模塊是經過define()方法包裝的，而後內部痛過require()方法引入須要的依賴文件(模塊)。（也能夠引入.css文件哦~）
模塊最好是面向對象開發的，這樣最後能夠方便的經過exports.doSomething或module.exports把模塊的接口給暴露出來。若是你是寫的是jq插件的話就不須要這個功能了，由於你的接口是寫在jquery的對象裏的。若是你不須要提供接口的話也能夠不使用這兩個屬性哦！

事實上define方法還有另外幾個參數，通常狀況咱們用不到。具體看官方API。

小結
其實Seajs的基本使用就這麼簡單，平常使用足夠了，以前看官網的5分鐘教程楞是沒看懂，等會的時候回頭想一想真的是5分鐘學會啊,悟性過低- -||

注意事項
模塊內的函數依賴必須交代清楚，防止模塊在函數依賴加載前先加載出來。並且還加強了模塊的獨立性。
引入seajs的時候最好給<script>標籤加個id，能夠快速訪問到這個標籤（我是在模塊合併時用到它的）
還有前面提到的使用seajs.use()在.html頁面上寫js時若是有多個模塊依賴，須要使用暴露出來的接口就要讓參數與它一一對應。

5、ECMAScript模塊化（原生模塊化）

ES6以前使用RequireJS或者seaJS實現模塊化， requireJS是基於AMD規範的模塊化庫，而像seaJS是基於CMD規範的模塊化庫，二者都是爲了爲了推廣前端模塊化的工具。

如今ES6自帶了模塊化，也是JS第一次支持module，在好久之後，咱們能夠直接做用import和export在瀏覽器中導入和導出各個模塊了，一個js文件表明一個js模塊；

現代瀏覽器對模塊(module)支持程度不一樣，目前都是使用babelJS，或者Traceur把ES6代碼轉化爲兼容ES5版本的js代碼;

以前的幾種模塊化方案都是前端社區本身實現的，只是獲得了你們的承認和普遍使用，而ES6的模塊化方案是真正的規範。在ES6中，咱們可使用 import 關鍵字引入模塊，經過 export 關鍵字導出模塊，功能較之於前幾個方案更爲強大，也是咱們所推崇的，可是因爲ES6目前沒法在瀏覽器中執行，因此，咱們只能經過babel將不被支持的import編譯爲當前受到普遍支持的 require。

雖然目前import和require的區別不大，可是仍是推薦使用使用es6，由於將來es6一定是主流，對於代碼的遷移成本仍是很是容易的。如：

import store from '../store/index'
import {mapState, mapMutations, mapActions} from 'vuex'
import axios from '../assets/js/request'
import util from '../utils/js/util.js'

export default {
    created () {
        this.getClassify();

        this.RESET_VALUE();
        console.log('created' ,new Date().getTime());

    }

2.一、ES6模塊化特色

一、每個模塊只加載一次，每個JS只執行一次，若是下次再去加載同目錄下同文件，直接從內存中讀取。一個模塊就是一個單例，或者說就是一個對象；

二、每個模塊內聲明的變量都是局部變量，不會污染全局做用域；

三、模塊內部的變量或者函數能夠經過export導出；

四、一個模塊能夠導入別的模塊

2.一、在Chrome瀏覽器使用Module

Chrome 61就提供了對ES2015 import語句的支持，實現模塊加載

查看版本的辦法是：在chrome瀏覽器中輸入chrome://version/

谷歌瀏覽器(Canary 60) – 須要在chrome:flags裏開啓」實驗性網絡平臺功能(Experimental Web Platform)」

示例：lib.js

/**
 *定義模塊
 */
//導出
export let msg="求和：";
export function sum(n){
    let total=0;
    for(var i=1;i<=n;i++){
        total+=i;
    }
    return total;
}

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Module模塊</title>
    </head>
    <body>
        <script type="module">
            //導入
            import {sum,msg} from './lib.js';
            let result=sum(100);
            console.log(msg+""+result);
        </script>
    </body>
</html>

結果：

2.二、在Node.js中使用Module

2.2.一、方法一：experimental-modules

在 Node.js 模塊系統中，每一個文件都被視爲獨立的模塊。

例子，假設有一個名爲 foo.js 的文件：

const circle = require('./circle.js');
console.log(`半徑爲 4 的圓的面積是 ${circle.area(4)}`);

在第一行中，foo.js 加載了同一目錄下的 circle.js 模塊。

circle.js 文件的內容爲：

const { PI } = Math;

exports.area = (r) => PI * r ** 2;

exports.circumference = (r) => 2 * PI * r;

circle.js 模塊導出了 area() 和 circumference() 兩個函數。經過在特殊的 exports 對象上指定額外的屬性，函數和對象能夠被添加到模塊的根部。

模塊內的本地變量是私有的，由於模塊被 Node.js 包裝在一個函數中（詳見模塊包裝器）。在這個例子中，變量 PI 是 circle.js 私有的。

module.exports屬性能夠被賦予一個新的值（例如函數或對象）。

以下，bar.js 會用到 square 模塊，square 模塊導出了 Square 類：

const Square = require('./square.js');
const mySquare = new Square(2);
console.log(`mySquare 的面積是 ${mySquare.area()}`);

square 模塊定義在 square.js 中：

// 賦值給 `exports` 不會修改模塊，必須使用 `module.exports`
module.exports = class Square {
constructor(width) {
this.width = width;
}

area() {
return this.width ** 2;
}
};

模塊系統在 `require('module')` 模塊中實現。

訪問主模塊

當 Node.js 直接運行一個文件時，require.main 會被設爲它的 module。這意味着能夠經過 require.main === module 來判斷一個文件是否被直接運行：

對於 foo.js 文件，若是經過 node foo.js 運行則爲 true，但若是經過 require('./foo') 運行則爲 false。

由於 module 提供了一個 filename 屬性（一般等同於 __filename），因此能夠經過檢查 require.main.filename 來獲取當前應用程序的入口點。

參考API：http://nodejs.cn/api/modules.html

2.2.二、方法二：experimental-modules

升級node 8.5 使用 experimental-modules參數，且要求全部文件名後綴都要修改成mjs
node --experimental-modules index.mjs
定義模塊lib.mjs:

/**
 *定義模塊
 */
//導出
export let msg="求和：";
export function sum(n){
    let total=0;
    for(var i=1;i<=n;i++){
        total+=i;
    }
    return total;
}

定義main.mjs文件

/**
 * 使用模塊
 */
//導入
import { sum, msg } from './lib.mjs';
let result = sum(100);
console.log(msg + "" + result);

在命令行下轉換到當前目錄，使用node加參數experimental-modules執行，結果以下：

2.三、Babel

Babel是一個普遍使用的轉碼器，能夠將ES6代碼轉爲ES5代碼，從而在現有環境執行。

2.3.一、配置環境

安裝babel命令行工具：

npm install --global babel-cli

安裝成功後可使用babel -V查看版本，可使用babel -help 查看幫助

建立項目，在當前項目中依賴babel-core

假定當前項目的目錄爲：E:\Desktop-temp\xww\FastResponse\Mobile\Hybird\vue2_01\vue07_03_babel

使用npm init能夠初始化當前項目爲node項目

npm install babel-core --save

依賴插件babel-preset-es2015

若是想使用es6語法，必須安裝一個插件

npm install babel-preset-es2015

而後在文件夾下面建立一個叫.babelrc的文件，並寫入以下代碼：

{
"presets": ["es2015"]
}

windows不支持直接命令爲.babelrc，能夠在DOS下使用@echo結合>實現：

.babelrc文件以rc結尾的文件一般表明運行時自動加載的文件，配置等等的，相似bashrc,zshrc。一樣babelrc在這裏也是有一樣的做用的，並且在babel6中，這個文件必不可少。
在babel6中，預設了6種，分別是：es201五、stage-0、stage-一、stage-二、stage-三、react

2.3.二、轉換ES6爲ES5

當環境準備好了，就能夠編寫一個es6風格的文件如：es6.js，內容以下：

let add=(x,y)=>x+y;
const n1=100,n2=200;
var result=add(n1,n2);
console.log(result);

在當前目錄執行命令：

babel es6.js -o es5.js

轉換後的結果es5.js：

"use strict";

var add = function add(x, y) {
  return x + y;
};
var n1 = 100,
    n2 = 200;
var result = add(n1, n2);
console.log(result);

從轉換後的結果能夠看出es6已變成es5了，箭頭函數不見了。

2.3.三、使用babel-node運行ES6模塊化代碼

babel-cli工具自帶一個babel-node命令，提供一個支持ES6的REPL環境。它支持Node的REPL（交互式解釋器環境）環境的全部功能，並且能夠直接運行ES6代碼。

在當前目錄下建立lib.js文件：

/**
 *定義模塊
 */
//導出
export let msg="求和：";
export function sum(n){
    let total=0;
    for(var i=1;i<=n;i++){
        total+=i;
    }
    return total;
}

建立main.js文件調用定義好的模塊：

/**
 * 使用模塊
 */
//導入
import { sum, msg } from './lib.js';
let result = sum(100);
console.log(msg + "" + result);

在命令行執行：babel-node main.js 結果以下：

到這裏共講解了3種能夠運行ES6模塊化的環境，任選一種能夠用於學習。

2.四、模塊(Modules)

ES6從語言層面對模塊進行了支持。編寫方式借鑑了流行的JavaScript模塊加載器（AMD, CommonJS）。由宿主環境的默認加載器定義模塊運行時的行爲，採起隱式異步模式——在模塊能夠被獲取和加載前不會有代碼執行。

定義模塊：

// lib/math.js

export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;

導入模塊：

//所有導入  
import people from './example'  
  
//有一種特殊狀況，即容許你將整個模塊看成單一對象進行導入  
//該模塊的全部導出都會做爲對象的屬性存在  
import * as example from "./example.js"  
console.log(example.name)  
console.log(example.age)  
console.log(example.getName())  
  
//導入部分  
import {name, age} from './example'  
  
//導出默認, 有且只有一個默認  
export default App  
  
// 部分導出  
export class App extend Component {};

*表示全部，as取別名

// app.js

import * as math from "lib/math";
console.log("2π = " + math.sum(math.pi, math.pi));

// otherApp.js

導入部份內容

import {sum, pi} from "lib/math";
console.log("2π = " + sum(pi, pi));

還有的功能包括：export default and export *:

// lib/mathplusplus.js

export * from "lib/math";
export var e = 2.71828182846;
export default function(x) {
return Math.exp(x);
}

// app.js

import exp, {pi, e} from "lib/mathplusplus";
console.log("e^π = " + exp(pi));

導入的時候有沒有大括號的區別：

1.當用export default people導出時，就用 import people 導入（不帶大括號）
2.一個文件裏，有且只能有一個export default。但能夠有多個export。
3.當用export name 時，就用import { name }導入（記得帶上大括號）
4.當一個文件裏，既有一個export default people, 又有多個export name 或者 export age時，導入就用 import people, { name, age }
5.當一個文件裏出現n多個 export 導出不少模塊，導入時除了一個一個導入，也能夠用import * as example

模塊的格式：

Babel能夠將ES2015的模塊轉換爲一下幾種格式：Common.js，AMD，System，以及UMD。你甚至能夠建立你本身的方式。

2.4.一、導出方式一

使用 export{接口} 導出接口，大括號中的接口名字爲上面定義的變量， import和export是對應的；

//lib.js 文件
let bar = "stringBar";
let foo = "stringFoo";
let fn0 = function() {
    console.log("fn0");
};
let fn1 = function() {
    console.log("fn1");
};
export{ bar , foo, fn0, fn1}

//main.js文件
import {bar,foo, fn0, fn1} from "./lib";
console.log(bar+"_"+foo);
fn0();
fn1();

示例：

先配置babel的運行環境，建立util.js文件：

let PI=3.14;
function getArea(r){
    return PI*r*r;
}

//集中導出對象
export {PI,getArea}

導入模塊main.js：

import {PI,getArea} from './util'

console.log("R=5時面積爲："+getArea(5));

結果：

2.4.二、導出方式二

在export接口的時候，咱們可使用 XX as YY，把導出的接口名字改了，好比： closureFn as sayingFn，把這些接口名字改爲不看文檔就知道幹什麼的

//lib.js文件
let fn0 = function() {
    console.log("fn0");
};
let obj0 = {}
export { fn0 as foo, obj0 as bar};

//main.js文件
import {foo, bar} from "./lib";
foo();
console.log(bar);

2.4.三、導出方式三

這種方式是直接在export的地方定義導出的函數，或者變量：

//lib.js文件
export let foo = ()=> {console.log("fnFoo") ;return "foo"},bar = "stringBar";

//main.js文件
import {foo, bar} from "./lib";
console.log(foo());
console.log(bar);

2.4.四、導出方式四

這種導出的方式不須要知道變量的名字，至關因而匿名的，直接把開發的接口給export；
若是一個js模塊文件就只有一個功能，那麼就可使用export default導出；

//lib.js
export default "string";

//main.js
import defaultString from "./lib";
console.log(defaultString);

2.4.五、導出方式五

export也能默認導出函數，在import的時候，名字隨便寫，由於每個模塊的默認接口就一個

//lib.js
let fn = () => "string";
export {fn as default};

//main.js
import defaultFn from "./lib";
console.log(defaultFn());

2.4.六、導出方式六

使用通配符* ,從新導出其餘模塊的接口

//lib.js
export * from "./other";
//若是隻想導出部分接口， 只要把接口名字列出來
//export {foo,fnFoo} from "./other";

//other.js
export let foo = "stringFoo", fnFoo = function() {console.log("fnFoo")};

//main.js
import {foo, fnFoo} from "./lib";
console.log(foo);
console.log(fnFoo());

在import的時候可使用通配符*導入外部的模塊：

import * as obj from "./lib";
console.log(obj);

2.五、模塊加載器(Module Loaders)

這並非ES2015的一部分：這部分ECMAScript 2015規範是由實現定義（implementation-defined）的。最終的標準將在WHATWG的Loader 規範中肯定，目前這項工做正在進行中，下面的內容來自於以前的ES2015草稿。

模塊加載器支持如下功能：

動態加載（Dynamic loading）
狀態一致性（State isolation）
全局空間一致性（Global namespace isolation）
編譯鉤子（Compilation hooks）
嵌套虛擬化（Nested virtualization）

你能夠對默認的加載器進行配置，構建出新的加載器，能夠被加載於獨立或受限的執行環境。

// 動態加載 – ‘System’ 是默認的加載器
System.import("lib/math").then(function(m) {
alert("2π = " + m.sum(m.pi, m.pi));
});

// 建立執行沙箱 – new Loaders
var loader = new Loader({
global: fixup(window) // replace ‘console.log’
});
loader.eval("console.log(\"hello world!\");");

// 直接操做模塊的緩存
System.get("jquery");
System.set("jquery", Module({$: $})); // WARNING: not yet finalized

須要額外的polyfill
因爲Babel默認使用common.js的模塊，你須要一個polyfill來使用加載器API。

使用模塊加載器
爲了使用此功能，你須要告訴Babel使用system模塊格式化工具。

6、NodeJS包管理器

npm 爲你和你的團隊打開了鏈接整個 JavaScript 天才世界的一扇大門。它是世界上最大的軟件註冊表，每星期大約有 30 億次的下載量，包含超過 600000 個 包（package） （即，代碼模塊）。來自各大洲的開源軟件開發者使用 npm 互相分享和借鑑。包的結構使您可以輕鬆跟蹤依賴項和版本。

倉庫：https://www.npmjs.com/

6.一、npm概要

npm全稱爲Node Package Manager，是一個基於Node.js的包管理器，也是整個Node.js社區最流行、支持的第三方模塊最多的包管理器。

npm的初衷：JavaScript開發人員更容易分享和重用代碼。

npm的使用場景：

容許用戶獲取第三方包並使用。
容許用戶將本身編寫的包或命令行程序進行發佈分享。

npm版本查詢：npm -v

npm安裝：

　　一、安裝nodejs

　　　　因爲新版的nodejs已經集成了npm，因此可直接經過輸入npm -v來測試是否成功安裝。

　　二、使用npm命令來升級npm: npm install npm -g

6.二、包（package）

包是描述一個文件或一個目錄。一個包的配置一般由如下構成：

一個文件夾包含一個package.json配置文件。
包含（含有package.json文件的文件夾）的Gzip壓縮文件。
解析gzip的url
爲註冊表添加<name>@<version>的url 信息

注意的是即便你歷來沒有在註冊中心發佈你的公共包,你可能仍然能夠獲得不少全部這些package

6.三、模塊（module）

模板是經過配置文件中的一個dom節點進行包含一個或多個包。一般通常由包和配置文件以及相關模塊程序構成完成一個或多個業務功能操做。

一個模塊能夠在node . js 程序中裝滿任何的require()任何。如下是全部事物加載模塊的例子 :

一個文件夾package.json文件包含一個main字段。

一個文件夾index.js文件。

一個JavaScript文件。

6.四、包和模塊的關係

通常來講在js程序中使用require加載它們的模塊在節點中進行配置npm包，一個模塊不必定是一個包。

例如,一些cli包, js程序節點中只包含一個可執行的命令行界面,不提供main字段。那麼這些包不是模塊。

幾乎全部npm包(至少,那些節點計劃)包含許多模塊在他們(由於每一個文件加載require()是一個模塊)。

幾乎全部的npm包都關聯着多個模塊，由於每一個文件都使用require()加載一個模塊。

從module加載文件中的上下文node節點。如：var req = require('request')。咱們可能會說,「request模塊賦值給req這個變量」。

6.5.npm的生態系統

package.json文件定義的是包。

node_modules文件夾是存儲模塊的地方。便於js查找模塊。

例如：
若是建立一個node_modules/foo.js文件，經過var f=require('foo.js')進行加載模塊。由於它沒有package.json文件因此foo.js不是一個包。
若是沒有建立index.js包或者package.json文件"main"字段,即便是在安裝node_modules,由於它沒有require()因此它不是一個模塊。

經常使用命令：

npm install [-g] 本地或全局安裝模塊
npm uninstall [-g] 本地或全局卸載模塊
npm update 更新模塊
npm ls 查看安裝的模塊
npm list 列出已安裝模塊
npm show  顯示模塊詳情
npm info 查看模塊的詳細信息
npm search 搜索模塊
npm publish 發佈模塊
npm unpublish 刪除已發佈的模塊
npm -v 或 npm version顯示版本信息
npm view npm versions 列出npm 的全部有效版本
npm install -g npm@2.14.14 /npm update -g npm@2.14.14  安裝指定的npm版本
npm init 引導建立一個package.json文件，包括名稱、版本、做者這些信息等
npm outdated  #檢查模塊是否已通過時
npm root  [-g] 查看包的安裝路徑，輸出 node_modules的路徑，
npm help 查看某條命令的詳細幫助 例如輸入npm help install
npm config 管理npm的配置路徑