JavaScript學習總結(六)——前端模塊化開發

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

前端模塊化規範以下：

1、前端模塊化概要

1.一、模塊概要

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

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

模塊化開發的四點好處：

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

　　（2）、提升代碼複用率

　　（3）、提升了可維護性

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

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

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方法）
//我是私有函數
//一個屬性

示例：

//index.html
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <script src="js/require.js" data-main="app.js"></script>
    </body>
    </html>

<script>
//app.js
require.config({
//By default load any module IDs from js/
    baseUrl: 'js',
//except, if the module ID starts with "pb"
    paths: {
        pb: '../pb'
    },
    shim: {
        'world': {
            deps:['animalWorld'],
            // use the global 'Backbone' as the module name.
            exports: 'world'
        }
    }
});
require(['cat','dog','world'], function (cat,dog,world) {
    world.world();
    cat.say();
    dog.say();
});

//animal.js
define([], function() {
    'use strict';
    function _showName(name){
        console.log(name);
    }
    return {
        say(words){
            console.log(words);
        },
        showName(name){ //練習私有方法
            _showName(name);
        }
    }
});

//cat.js
define([
    'pb/animal'
], function(animal) {
    'use strict';
    return {
        say(){
            animal.say("喵喵");
            animal.showName("貓");
        }
    }
});

//dog.js
define([
    'pb/animal'
], function(animal) {
    'use strict';
    return {
        say(){
            animal.say("汪汪");
            animal.showName("狗");
        }
    }
});

//animalWorld.js
window.animal = function() {
    console.log("這裏是動物世界！");
}
world.js

define([], function() {
    'use strict';
    return {
        world(){
            animal();
        }
    }
});
</script>

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>

結果：

3.五、加載 JavaScript 文件

RequireJS的目標是鼓勵代碼的模塊化，它使用了不一樣於傳統<script>標籤的腳本加載步驟。能夠用它來加速、優化代碼，但其主要目的仍是爲了代碼的模塊化。它鼓勵在使用腳本時以module ID替代URL地址。

RequireJS以一個相對於baseUrl的地址來加載全部的代碼。 頁面頂層<script>標籤含有一個特殊的屬性data-main，require.js使用它來啓動腳本加載過程，而baseUrl通常設置到與該屬性相一致的目錄。下列示例中展現了baseUrl的設置：

<!--This sets the baseUrl to the "scripts" directory, and
loads a script that will have a module ID of 'main'-->
<script data-main="scripts/main.js" src="scripts/require.js"></script>

baseUrl亦可經過RequireJS config手動設置。若是沒有顯式指定config及data-main，則默認的baseUrl爲包含RequireJS的那個HTML頁面的所屬目錄。

RequireJS默認假定全部的依賴資源都是js腳本，所以無需在module ID上再加".js"後綴，RequireJS在進行module ID到path的解析時會自動補上後綴。你能夠經過paths config設置一組腳本，這些有助於咱們在使用腳本時碼更少的字。

有時候你想避開"baseUrl + paths"的解析過程，而是直接指定加載某一個目錄下的腳本。此時能夠這樣作：若是一個module ID符合下述規則之一，其ID解析會避開常規的"baseUrl + paths"配置，而是直接將其加載爲一個相對於當前HTML文檔的腳本：

以 ".js" 結束.
以 "/" 開始.
包含 URL 協議, 如 "http:" or "https:".

通常來講，最好仍是使用baseUrl及"paths" config去設置module ID。它會給你帶來額外的靈活性，如便於腳本的重命名、重定位等。 同時，爲了不凌亂的配置，最好不要使用多級嵌套的目錄層次來組織代碼，而是要麼將全部的腳本都放置到baseUrl中，要麼分置爲項目庫/第三方庫的一個扁平結構，以下：

www/
index.html
js/
app/
sub.js
lib/
jquery.js
canvas.js
app.js

index.html:

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

app.js:

requirejs.config({
//By default load any module IDs from js/lib
    baseUrl: 'js/lib',
//except, if the module ID starts with "app",
//load it from the js/app directory. paths
//config is relative to the baseUrl, and
//never includes a ".js" extension since
//the paths config could be for a directory.
    paths: {
        app: '../app'
    }
});

// Start the main app logic.
requirejs(['jquery', 'canvas', 'app/sub'],
    function ($, canvas, sub) {
//jQuery, canvas and the app/sub module are all
//loaded and can be used here now.
    });

注意在示例中，三方庫如jQuery沒有將版本號包含在他們的文件名中。咱們建議將版本信息放置在單獨的文件中來進行跟蹤。使用諸如volo這類的工具，能夠將package.json打上版本信息，並在磁盤上保持文件名爲"jquery.js"。這有助於你保持配置的最小化，避免爲每一個庫版本設置一條path。例如，將"jquery"配置爲"jquery-1.7.2"。

理想情況下，每一個加載的腳本都是經過define()來定義的一個模塊；但有些"瀏覽器全局變量注入"型的傳統/遺留庫並無使用define()來定義它們的依賴關係，你必須爲此使用shim config來指明它們的依賴關係。 若是你沒有指明依賴關係，加載可能報錯。這是由於基於速度的緣由，RequireJS會異步地以無序的形式加載這些庫。

3.5.一、路徑處理

假定當前路徑以下：

moduleA：

define(function () {
    return {
        show: m => console.info(m)
    }
});

moduleB:

define(['moduleA'], function (a) {
    return {
        add: (m, n) => a.show(m + n)
    }
});

app.js：

require(['module/moduleB'], function (b) {
    b.add(100, 500);
});

index.html:

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

直接運行時，報錯：

解決方法一：

能夠看出運行時報錯，緣由是baseUrl的值與app.js所在位置有關，當前應該是:baseUrl='js/'，那麼全部模塊在依賴時都默認以js/開始，因此moduleB依賴ModuleA時也以js/開始，能夠經過指定當前目錄解決該問題，修改moduleB以下：

define(['./moduleA'], function (a) {
    return {
        add: (m, n) => a.show(m + n)
    }
});

./表示當前目錄，../上一級，/表示從域名開始不含虛擬目錄

運行結果：

解決方法二：

手動配置baseUrl，修改後以下：

app.js

//配置
requirejs.config({
    //模塊依賴的基礎路徑，默認模塊的加載位置
    baseUrl:'js/module/'
});

//模塊引用
require(['moduleB'], function (b) {
    b.add(100, 500);
});

moduleB.js

define(['moduleA'], function (a) {
    return {
        add: (m, n) => a.show(m + n)
    }
});

運行結果：

3.5.二、依賴第三方的庫（AMD依賴jQuery）

jQuery 1.7 開始支持將 jQuery 註冊爲一個AMD異步模塊。有不少兼容的腳本加載器（包括 RequireJS 和 curl）均可以用一個異步模塊格式來加載模塊，這也就表示不須要太多 hack 就能讓一切運行起來。能夠看看jQuery 1.7 中的源碼：

if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
　　define( "jquery", [], function () { return jQuery; } );
}

其工做的原理是，所使用的腳本加載器經過指定一個屬性，即 define.amd.jQuery 爲 true，來標明本身能夠支持多個 jQuery 版本。若是有興趣瞭解特定的實現細節的話，咱們能夠將 jQuery 註冊爲一個具名模塊，由於可能會有這樣的風險，即它可能被與其它使用了 AMD 的 define() 方法的文件拼合在一塊兒，而沒有使用一個合適的、理解匿名 AMD 模塊定義的拼合腳本。

高版本的jQuery （1.11.1） 去掉了define.amd.jQuery判斷：

if ( typeof define === "function" && define.amd ) {
    define( "jquery", [], function() {
        return jQuery;
    });
}

示例代碼：

//配置
requirejs.config({
    //模塊依賴的基礎路徑，默認模塊的加載位置
    baseUrl:'js/',
    //路徑
    paths:{
        //若是在路徑前寫上m/，則表示爲：js/module/
        m:"module/",
        jquery:'common/jquery/jquery-1.12.4'
    }
});

//模塊引用
require(['m/moduleB','m/moduleC','jquery'], function (b,c,$) {
    let m=500,n=100;
    b.add(m, n);
    c.sub(m,n);
    $("body").css({"background":"yellow"});
});

運行結果：

3.六、data-main 入口點

require.js 在加載的時候會檢察data-main 屬性:

<!--when require.js loads it will inject another script tag
(with async attribute) for scripts/main.js-->
<script data-main="scripts/main" src="scripts/require.js"></script>

你能夠在data-main指向的腳本中設置模板加載 選項，而後加載第一個應用模塊。.注意：你在main.js中所設置的腳本是異步加載的。因此若是你在頁面中配置了其它JS加載，則不能保證它們所依賴的JS已經加載成功。

例如：

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

 main.js

// contents of main.js:
require.config({
    paths: {
        foo: 'libs/foo-1.1.3'
    }
});
// contents of other.js:

// This code might be called before the require.config() in main.js
// has executed. When that happens, require.js will attempt to
// load 'scripts/foo.js' instead of 'scripts/libs/foo-1.1.3.js'
require( ['foo'], function( foo ) {

});

3.七、定義模塊

模塊不一樣於傳統的腳本文件，它良好地定義了一個做用域來避免全局名稱空間污染。它能夠顯式地列出其依賴關係，並以函數(定義此模塊的那個函數)參數的形式將這些依賴進行注入，而無需引用全局變量。RequireJS的模塊是模塊模式的一個擴展，其好處是無需全局地引用其餘模塊。

RequireJS的模塊語法容許它儘快地加載多個模塊，雖然加載的順序不定，但依賴的順序最終是正確的。同時由於無需建立全局變量，甚至能夠作到在同一個頁面上同時加載同一模塊的不一樣版本。

(若是你熟悉ConmmonJS，可參看CommonJS的註釋信息以瞭解RequireJS模塊到CommonJS模塊的映射關係)。

一個磁盤文件應該只定義 1 個模塊。多個模塊可使用內置優化工具將其組織打包。

3.7.一、簡單的值對

若是一個模塊僅含值對，沒有任何依賴，則在define()中定義這些值對就行了：

//Inside file my/shirt.js:
define({
    color: "black",
    size: "unisize"
});

3.7.二、函數式定義

若是一個模塊沒有任何依賴，但須要一個作setup工做的函數，則在define()中定義該函數，並將其傳給define()：

//my/shirt.js now does setup work
//before returning its module definition.
define(function () {
//Do setup work here

    return {
        color: "black",
        size: "unisize"
    }
});

3.7.三、存在依賴的函數式定義

若是模塊存在依賴：則第一個參數是依賴的名稱數組；第二個參數是函數，在模塊的全部依賴加載完畢後，該函數會被調用來定義該模塊，所以該模塊應該返回一個定義了本模塊的object。依賴關係會以參數的形式注入到該函數上，參數列表與依賴名稱列表一一對應。

//my/shirt.js now has some dependencies, a cart and inventory
//module in the same directory as shirt.js
define(["./cart", "./inventory"], function(cart, inventory) {
//return an object to define the "my/shirt" module.
        return {
            color: "blue",
            size: "large",
            addToCart: function() {
                inventory.decrement(this);
                cart.add(this);
            }
        }
    }
);

本示例建立了一個my/shirt模塊，它依賴於my/cart及my/inventory。磁盤上各文件分佈以下：

my/cart.js
my/inventory.js
my/shirt.js

模塊函數以參數"cart"及"inventory"使用這兩個以"./cart"及"./inventory"名稱指定的模塊。在這兩個模塊加載完畢以前，模塊函數不會被調用。

嚴重不鼓勵模塊定義全局變量。遵循此處的定義模式，可使得同一模塊的不一樣版本並存於同一個頁面上(參見 高級用法 )。另外，函參的順序應與依賴順序保存一致。

返回的object定義了"my/shirt"模塊。這種定義模式下，"my/shirt"不做爲一個全局變量而存在。

3.7.四、將模塊定義爲一個函數

對模塊的返回值類型並無強制爲必定是個object，任何函數的返回值都是容許的。此處是一個返回了函數的模塊定義：

//A module definition inside foo/title.js. It uses
//my/cart and my/inventory modules from before,
//but since foo/title.js is in a different directory than
//the "my" modules, it uses the "my" in the module dependency
//name to find them. The "my" part of the name can be mapped
//to any directory, but by default, it is assumed to be a
//sibling to the "foo" directory.
define(["my/cart", "my/inventory"],
    function(cart, inventory) {
//return a function to define "foo/title".
//It gets or sets the window title.
        return function(title) {
            return title ? (window.title = title) :
                inventory.storeName + ' ' + cart.name;
        }
    }
);

3.7.五、簡單包裝CommonJS來定義模塊

若是你現有一些以CommonJS模塊格式編寫的代碼，而這些代碼難於使用上述依賴名稱數組參數的形式來重構，你能夠考慮直接將這些依賴對應到一些本地變量中進行使用。你可使用一個CommonJS的簡單包裝來實現：

define(function(require, exports, module) {
        var a = require('a'),
            b = require('b');

//Return the module value
        return function () {};
    }
);

該包裝方法依靠Function.prototype.toString()將函數內容賦予一個有意義的字串值，但在一些設備如PS3及一些老的Opera手機瀏覽器中不起做用。考慮在這些設備上使用優化器將依賴導出爲數組形式。

更多的信息可參看CommonJS Notes頁面，以及"Why AMD"頁面的"Sugar"段落。

3.7.六、定義一個命名模塊

你可能會看到一些define()中包含了一個模塊名稱做爲首個參數：

//Explicitly defines the "foo/title" module:
define("foo/title",
    ["my/cart", "my/inventory"],
    function(cart, inventory) {
//Define foo/title object in here.
    }
);

這些常由優化工具生成。你也能夠本身顯式指定模塊名稱，但這使模塊更不具有移植性——就是說若你將文件移動到其餘目錄下，你就得重命名。通常最好避免對模塊硬編碼，而是交給優化工具去生成。優化工具須要生成模塊名以將多個模塊打成一個包，加快到瀏覽器的載人速度。

示例：

moduleD.js：

define("md",[],function(){
        return {hi: () => console.info("Hello ModuleD!")};
});

app.js：

//配置
requirejs.config({
    //模塊依賴的基礎路徑，默認模塊的加載位置
    baseUrl:'js/',
    //路徑
    paths:{
        //若是在路徑前寫上m/，則表示爲：js/module/
        m:"module/",
        jquery:'common/jquery/jquery-1.12.4',
        md:'module/moduleD'
    }
});

//模塊引用
require(['m/moduleB','m/moduleC','jquery','md'], function (b,c,$,d) {
    let m=500,n=100;
    b.add(m, n);
    c.sub(m,n);
    d.hi();
    $("body").css({"background":"yellow"});
});

使用命名模塊時須要爲命名模塊指定路徑，名稱需惟一。

運行結果：

3.7.七、依賴非AMD模塊

配置中shim參數爲那些沒有使用define()來聲明依賴關係、設置模塊的"瀏覽器全局變量注入"型腳本作依賴和導出配置。

添加一個非amd模塊moduleE.js：

var moduleE = {
    hello: () => {
        console.info("Hello ModuleE!");
    }
};

引用ModuleE：

//配置
requirejs.config({
    //模塊依賴的基礎路徑，默認模塊的加載位置
    baseUrl:'js/',
    //路徑
    paths:{
        //若是在路徑前寫上m/，則表示爲：js/module/
        m:"module/",
        jquery:'common/jquery/jquery-1.12.4',
        md:'module/moduleD',
        moduleE:'module/moduleE'
    },
    //處理非標準的amd模塊
    shim:{
        //這個鍵名爲要載入的目標文件的文件名，不能隨便命名不然拿不到改文件對外提供的接口的
        'moduleE':{
            exports:'moduleE'
        }
    }
});

//模塊引用
require(['m/moduleB','m/moduleC','jquery','md','moduleE'], function (b,c,$,d,e) {
    let m=500,n=100;
    b.add(m, n);
    c.sub(m,n);
    d.hi();
    $("body").css({"background":"yellow"});
    e.hello();
});

運行結果：

3.7.八、注意事項

一個文件一個模塊: 每一個Javascript文件應該只定義一個模塊，這是模塊名-至-文件名查找機制的天然要求。多個模塊會被優化工具組織優化，但你在使用優化工具時應將多個模塊放置到一個文件中。

define()中的相對模塊名: 爲了能夠在define()內部使用諸如require("./relative/name")的調用以正確解析相對名稱，記得將"require"自己做爲一個依賴注入到模塊中：

define(["require", "./relative/name"], function(require) {
    var mod = require("./relative/name");
});

或者更好地，使用下述爲轉換CommonJS模塊所設的更短的語法：

define(function(require) {
    var mod = require("./relative/name");
});

相對路徑在一些場景下格外有用，例如：爲了以便於將代碼共享給其餘人或項目，你在某個目錄下建立了一些模塊。你能夠訪問模塊的相鄰模塊，無需知道該目錄的名稱。

生成相對於模塊的URL地址: 你可能須要生成一個相對於模塊的URL地址。你能夠將"require"做爲一個依賴注入進來，而後調用require.toUrl()以生成該URL:

define(["require"], function(require) {
    var cssUrl = require.toUrl("./style.css");
});

控制檯調試:若是你須要處理一個已經過require(["module/name"], function(){})調用加載了的模塊，可使用模塊名做爲字符串參數的require()調用來獲取它:

require("module/name").callSomeFunction()

注意這種形式僅在"module/name"已經由其異步形式的require(["module/name"])加載了後纔有效。只能在define內部使用形如"./module/name"的相對路徑。

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){}

1、require

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

2、exports

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

3、module

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

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

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

});

4.一、Seajs

Seajs是一個加載器、遵循 CMD 規範模塊化開發，依賴的自動加載、配置的簡潔清晰。

SeaJS是一個遵循CMD規範的JavaScript模塊加載框架，能夠實現JavaScript的模塊化開發及加載機制。

與jQuery等JavaScript框架不一樣，SeaJS不會擴展封裝語言特性，而只是實現JavaScript的模塊化及按模塊加載。SeaJS的主要目的是令JavaScript開發模塊化並能夠輕鬆愉悅進行加載，將前端工程師從繁重的JavaScript文件及對象依賴處理中解放出來，能夠專一於代碼自己的邏輯。SeaJS能夠與jQuery這類框架完美集成。使用SeaJS能夠提升JavaScript代碼的可讀性和清晰度，解決目前JavaScript編程中廣泛存在的依賴關係混亂和代碼糾纏等問題，方便代碼的編寫和維護。

github:https://github.com/seajs/seajs

官網：http://www6.seajs.org

特色：

Sea.js 追求簡單、天然的代碼書寫和組織方式，具備如下核心特性：

（一）、簡單友好的模塊定義規範：Sea.js 遵循 CMD 規範，能夠像 Node.js 通常書寫模塊代碼。

（二）、天然直觀的代碼組織方式：依賴的自動加載、配置的簡潔清晰，可讓咱們更多地享受編碼的樂趣。

Sea.js 還提供經常使用插件，很是有助於開發調試和性能優化，並具備豐富的可擴展接口。

兼容：

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.use("../static/hello/src/main");

配置和入口

這裏解釋下配置和入口的意思。

配置

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

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

examples/
|-- index.html
|
`--about
| |-- news.html
|
`-- script
|-- seajs.js
|-- jquery.js
`-- main.js

咱們平時若是咱們在index.html上引用main.js路徑應該是這樣寫的script/main.js，從news.html引用main.js就要這樣寫，../script/main.js。

而在seajs是相對於seajs文件的，一概直接使用main.js就OK了，是否是很方便呢？

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

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()載入模塊。 

模塊開發

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

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

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

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

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

});

模塊是經過define()方法包裝的，而後內部痛過require()方法引入須要的依賴文件(模塊)。

模塊最好是面向對象開發的，這樣最後能夠方便的經過exports.doSomething或module.exports把模塊的接口給暴露出來。若是你是寫的是jq插件的話就不須要這個功能了，由於你的接口是寫在jquery的對象裏的。若是你不須要提供接口的話也能夠不使用這兩個屬性哦！

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

注意事項

模塊內的函數依賴必須交代清楚，防止模塊在函數依賴加載前先加載出來。並且還加強了模塊的獨立性。

引入seajs的時候最好給<script>標籤加個id，能夠快速訪問到這個標籤（我是在模塊合併時用到它的）

還有前面提到的使用seajs.use()在.html頁面上寫js時若是有多個模塊依賴，須要使用暴露出來的接口就要讓參數與它一一對應。

4.二、seajs示例

目錄結構以下：

moduleH.js

define(function (require,exports,module) {
    var obj={
        msg:"Hello SeaJS!",
        show:()=>console.info(obj.msg)
    };
    exports.moduleH=obj;
});

main.js

seajs.config({
    //Sea.js 的基礎路徑（修改這個就不是路徑就不是相對於seajs文件了）
    base: './js/',
    //別名配置（用變量表示文件，解決路徑層級過深和實現路徑映射）
    alias: {
        'jquery': 'common/jquery/jquery-1.12.4'
    },
    //路徑配置（用變量表示路徑，解決路徑層級過深的問題）
    paths: {
        'm': 'module/'
    }
});

seajs.use(["m/moduleH.js",'jquery'], function (mh,$) {
    mh.moduleH.show();
    $("body").append("<h2>Hello CMD!</h2>");
})

main.html

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

運行結果：

4.三、官方文檔

若是您要更加深刻學習CMD與seajs能夠參考下面的文檔、https://seajs.github.io/seajs/docs/

4.3.一、入門

• 前端模塊化開發的價值
• 5 分鐘上手 Sea.js
• 官方示例
• API 快速參考

4.3.二、基礎

• 模塊系統
• CMD 模塊定義規範
• 模塊標識
• require 書寫約定
• 模塊的加載啓動
• 配置
• 構建工具

4.3.三、插件

• seajs-css
• seajs-preload
• seajs-text
• seajs-style
• seajs-combo
• seajs-flush
• seajs-debug
• seajs-log
• seajs-health

4.3.四、進階

• Sea.js 的調試接口
• 爲何要有約定和構建工具
• ID 和路徑匹配原則
• 如何改造現有文件爲 CMD 模塊
• 如何參與開發
• 插件開發指南
• 包管理工具

4.3.五、探討

• 前端模塊化開發那點歷史
• 從 CommonJS 到 Sea.js
• 與 Node.js 兼容
• 與 RequireJS 的異同
• 與 OzJS 的探討

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());

    }

5.一、ES6模塊化特色

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

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

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

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

5.二、在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>

結果：

5.三、在Node.js中使用Module

5.3.一、方法一

在 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

5.3.二、方法二：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執行，結果以下：

5.四、Babel

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

5.4.一、配置環境

安裝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

5.4.二、轉換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了，箭頭函數不見了。 

5.4.三、使用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模塊化的環境，任選一種能夠用於學習。

5.五、模塊(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。你甚至能夠建立你本身的方式。

5.5.一、導出方式一

使用 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));

結果：

5.5.二、導出方式二

在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);

5.5.三、導出方式三

這種方式是直接在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);

5.5.四、導出方式四

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

//lib.js
export default "string";

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

5.5.五、導出方式五

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

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

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

5.5.六、導出方式六

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

//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);

5.六、模塊加載器(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、UMD（通用的模塊定義）

UMD（Universal Module Definition）通用的模塊定義、UMD等於CommonJS加上AMD。UMD的工做其實就是作了一個判斷：

• - 先判斷當前環境對NodeJs支持的模塊是否存在，存在就用Node.js模塊模式（exports）。
• - 若是不支持，就判斷是否支持AMD（define），存在就使用AMD方式加載。

CommonJs和AMD風格同樣流行，彷佛缺乏一個統一的規範。因此人們產生了這樣的需求，但願有支持兩種風格的「通用」模式，因而通用模塊規範（UMD）誕生了。

不得不認可，這個模式略難看，可是它兼容了AMD和CommonJS，同時還支持老式的「全局」變量規範，同時兼容先後端，模塊定義寫法以下：

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
        define(['b'], factory);
    } else if (typeof module === 'object' && module.exports) {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
        module.exports = factory(require('b'));
    } else {
// Browser globals (root is window)
        root.returnExports = factory(root.b);
    }
}(this, function (b) {
//use b in some fashion.

// Just return a value to define the module export.
// This example returns an object, but the module
// can return a function as the exported value.
    return {};
}));

寫法2：

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
// AMD
        define(['jquery', 'underscore'], factory);
    } else if (typeof exports === 'object') {
// Node, CommonJS之類的
        module.exports = factory(require('jquery'), require('underscore'));
    } else {
// 瀏覽器全局變量(root 即 window)
        root.returnExports = factory(root.jQuery, root._);
    }
}(this, function ($, _) {
// 方法
    function a() {
    }; // 私有方法，由於它沒被返回 (見下面)

    function b() {
    }; // 公共方法，由於被返回了
    function c() {
    };
//公共方法，由於被返回了
// 暴露公共方法
    return {
        b: b,
        c: c
    }
}));

寫法3(Vue)：

/*!
 * Vue.js v2.5.17
 * (c) 2014-2018 Evan You
 * Released under the MIT License.
 */
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global.Vue = factory());
}(this, (function () {
  
return {};

})));

6.一、UMD示例

6.1.一、定義模塊Utils.js

(function (global, factory) {
    if (typeof define === 'function' && (define.amd || define.cmd)) {
        // AMD規範. 註冊一個匿名模塊，兼容AMD與CMD
        define([], factory);
    } else if (typeof module === 'object' && module.exports) {
        //CommonJS規範，NodeJS運行環境
        module.exports = factory();
    } else {
        //瀏覽器全局對象註冊
        global.UMD = factory();
    }
}(this, function () {
    var msg = "UMD!";
    //返回要導出的對象
    return {
        show: function () {
            console.log("Hello " + msg);
        }
    };
}));

6.1.二、在CommonJS規範下運行

useUtils.js

var utils=require('./Utils.js');
utils.show();

運行結果：

6.1.三、在AMD規範下運行

app.js

//配置
requirejs.config({
    //模塊依賴的基礎路徑，默認模塊的加載位置
    baseUrl:'js/',
    //路徑
    paths:{
        //若是在路徑前寫上m/，則表示爲：js/module/
        m:"module/",
        jquery:'common/jquery/jquery-1.12.4',
        md:'module/moduleD',
        moduleE:'module/moduleE',
        mf:'module/moduleF',
        moduleG:'module/moduleG'
    },
    //處理非標準的amd模塊
    shim:{
        //這個鍵名爲要載入的目標文件的文件名，不能隨便命名不然拿不到改文件對外提供的接口的
        'moduleE':{
            exports:'moduleE'
        },
        'moduleG':{
            exports:'moduleG'
        }
    }
});

//模塊引用
require(['m/moduleB','m/moduleC','jquery','md','moduleE','mf','moduleG','m/Tools','m/Utils'], function (b,c,$,d,e,f,g,umd,mu) {
    mu.show();
});

index.html

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

運行結果：

6.1.四、在CMD規範下運行

app.js

seajs.config({
    // Sea.js 的基礎路徑（修改這個就不是路徑就不是相對於seajs文件了）
    base: './javascript/module/',
    //別名配置（用變量表示文件，解決路徑層級過深和實現路徑映射）
    alias:{
        'jquery':'common/jquery/jquery-1.12.4'
    },
    // 路徑配置（用變量表示路徑，解決路徑層級過深的問題）
    paths: {
        'xy': 'xDirectory/yDirectory/'
    }
});

//引用模塊，依賴模塊
seajs.use(['moduleA','jquery','xy/moduleC','xy/moduleD','Utils'],function (ma,$,mc,md,mu) {
    mu.show();
});

main.html

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

運行結果：

6.1.五、原生瀏覽器環境運行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UMD</title>
</head>
<body>
<script src="javascript/module/Utils.js"></script>
<script>
    UMD.show();
</script>
</body>
</html>

運行結果：

從上面的示例運行結果能夠看出採用UMD定義的模塊能夠兼容CommonJS、AMD、CMD與瀏覽器原生環境，同時兼容先後臺。寫法並不是固定能夠根據須要變化。

7、NodeJS包管理器

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

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

7.一、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

7.二、包（package）

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

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

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

7.三、模塊（module）

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

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

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

一個文件夾index.js文件。

一個JavaScript文件。

7.四、包和模塊的關係

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

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

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

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

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

7.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的配置路徑

更多介紹：

npm中文網：https://www.npmjs.com.cn/

點擊查看《Node.js開發Web後臺服務》

8、視頻

 https://www.bilibili.com/video/av37008594/

9、示例

https://git.dev.tencent.com/zhangguo5/ModuleDemo.git

https://git.dev.tencent.com/zhangguo5/Module01.git

10、做業

一、請定義一個模塊（UMD），該模塊實現計算斐波拉契數列功能，要求在以下面種環境下都測試經過：

　　1.一、CommonJS，NodeJS

　　1.二、AMD

　　1.三、CMD

　　1.四、瀏覽器 (MyUmd.feb(6),輸出：8）

//斐波那契數列（Fibonacci sequence），又稱黃金分割數列、因數學家列昂納多·斐波那契（Leonardoda Fibonacci）以兔子繁殖爲例子而引入，故又稱爲「兔子數列」，指的是這樣一個數列：一、一、二、三、五、八、1三、2一、3四、……在數學上，斐波納契數列以以下被以遞推的方法定義：F(1)=1，F(2)=1, F(3)=2,F(n)=F(n-1)+F(n-2)（n>=4，n∈N*）在現代物理、準晶體結構、化學等領域，斐波納契數列都有直接的應用，爲此，美國數學會從1963年起出版了以《斐波納契數列季刊》爲名的一份數學雜誌，用於專門刊載這方面的研究成果。

View Code

 

二、將javascript自定義插件的大做業實現UMD功能