ES6 系列之模塊加載方案

pinecone 發(fā)布于2019-08-23 13:08 / 1811人閱讀

摘要：感謝感謝和在推動模塊化發(fā)展方面做出的貢獻。與引用阮一峰老師的標(biāo)準(zhǔn)參考教程規(guī)范加載模塊是同步的，也就是說，只有加載完成，才能執(zhí)行后面的操作。規(guī)定了新的模塊加載方案。與引用阮一峰老師的入門它們有兩個重大差異。

前言

本篇我們重點介紹以下四種模塊加載規(guī)范：

AMD

CMD

CommonJS

ES6 模塊

最后再延伸講下 Babel 的編譯和 webpack 的打包原理。

require.js

在了解 AMD 規(guī)范之前，我們先來看看 require.js 的使用方式。

項目目錄為：

* project/
    * index.html
    * vender/
        * main.js
        * require.js
        * add.js
        * square.js
        * multiply.js

index.html 的內(nèi)容如下：



    
        require.js
    
    
        Content

data-main="vender/main" 表示主模塊是 vender 下的 main.js。

main.js 的配置如下：

// main.js
require(["./add", "./square"], function(addModule, squareModule) {
    console.log(addModule.add(1, 1))
    console.log(squareModule.square(3))
});

require 的第一個參數(shù)表示依賴的模塊的路徑，第二個參數(shù)表示此模塊的內(nèi)容。

由此可以看出，主模塊依賴 add 模塊和 square 模塊。

我們看下 add 模塊即 add.js 的內(nèi)容：

// add.js
define(function() {
    console.log("加載了 add 模塊");
    var add = function(x, y) {　
        return x + y;
    };

    return {　　　　　　
        add: add
    };
});

requirejs 為全局添加了 define 函數(shù)，你只要按照這種約定的方式書寫這個模塊即可。

那如果依賴的模塊又依賴了其他模塊呢？

我們來看看主模塊依賴的 square 模塊， square 模塊的作用是求出一個數(shù)字的平方，比如輸入 3 就返回 9，該模塊依賴一個乘法模塊，該乘法模塊即 multiply.js 的代碼如下：

// multiply.js
define(function() {
    console.log("加載了 multiply 模塊")
    var multiply = function(x, y) {　
        return x * y;
    };

    return {　　　　　　
        multiply: multiply
    };
});

而 square 模塊就要用到 multiply 模塊，其實寫法跟 main.js 添加依賴模塊一樣：

// square.js
define(["./multiply"], function(multiplyModule) {
    console.log("加載了 square 模塊")
    return {　　　　　　
        square: function(num) {
            return multiplyModule.multiply(num, num)
        }
    };
});

require.js 會自動分析依賴關(guān)系，將需要加載的模塊正確加載。

requirejs 項目 Demo 地址：https://github.com/mqyqingfeng/Blog/tree/master/demos/ES6/module/requirejs

而如果我們在瀏覽器中打開 index.html，打印的順序為：

加載了 add 模塊
加載了 multiply 模塊
加載了 square 模塊
2
9

AMD

在上節(jié)，我們說了這樣一句話：

requirejs 為全局添加了 define 函數(shù)，你只要按照這種約定的方式書寫這個模塊即可。

那這個約定的書寫方式是指什么呢？

指的便是 The Asynchronous Module Definition (AMD) 規(guī)范。

所以其實 AMD 是 RequireJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。

你去看 AMD 規(guī)范) 的內(nèi)容，其主要內(nèi)容就是定義了 define 函數(shù)該如何書寫，只要你按照這個規(guī)范書寫模塊和依賴，require.js 就能正確的進行解析。

sea.js

在國內(nèi)，經(jīng)常與 AMD 被一起提起的還有 CMD，CMD 又是什么呢？我們從 sea.js 的使用開始說起。

文件目錄與 requirejs 項目目錄相同:

* project/
    * index.html
    * vender/
        * main.js
        * require.js
        * add.js
        * square.js
        * multiply.js

index.html 的內(nèi)容如下：




    sea.js


    Content

main.js 的內(nèi)容如下：

// main.js
define(function(require, exports, module) {
    var addModule = require("./add");
    console.log(addModule.add(1, 1))

    var squareModule = require("./square");
    console.log(squareModule.square(3))
});

add.js 的內(nèi)容如下：

// add.js
define(function(require, exports, module) {
    console.log("加載了 add 模塊")
    var add = function(x, y) {　
        return x + y;
    };
    module.exports = {　　　　　　
        add: add
    };
});

square.js 的內(nèi)容如下：

define(function(require, exports, module) {
    console.log("加載了 square 模塊")
    var multiplyModule = require("./multiply");
    module.exports = {　　　　　　
        square: function(num) {
            return multiplyModule.multiply(num, num)
        }
    };

});

multiply.js 的內(nèi)容如下：

define(function(require, exports, module) {
    console.log("加載了 multiply 模塊")
    var multiply = function(x, y) {　
        return x * y;
    };
    module.exports = {　　　　　　
        multiply: multiply
    };
});

跟第一個例子是同樣的依賴結(jié)構(gòu)，即 main 依賴 add 和 square，square 又依賴 multiply。

seajs 項目 Demo 地址：https://github.com/mqyqingfeng/Blog/tree/master/demos/ES6/module/seajs

而如果我們在瀏覽器中打開 index.html，打印的順序為：

加載了 add 模塊
2
加載了 square 模塊
加載了 multiply 模塊
9

CMD

與 AMD 一樣，CMD 其實就是 SeaJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。

你去看 CMD 規(guī)范的內(nèi)容，主要內(nèi)容就是描述該如何定義模塊，如何引入模塊，如何導(dǎo)出模塊，只要你按照這個規(guī)范書寫代碼，sea.js 就能正確的進行解析。

AMD 與 CMD 的區(qū)別

從 sea.js 和 require.js 的例子可以看出：

1.CMD 推崇依賴就近，AMD 推崇依賴前置。看兩個項目中的 main.js：

// require.js 例子中的 main.js
// 依賴必須一開始就寫好
require(["./add", "./square"], function(addModule, squareModule) {
    console.log(addModule.add(1, 1))
    console.log(squareModule.square(3))
});

// sea.js 例子中的 main.js
define(function(require, exports, module) {
    var addModule = require("./add");
    console.log(addModule.add(1, 1))

    // 依賴可以就近書寫
    var squareModule = require("./square");
    console.log(squareModule.square(3))
});

2.對于依賴的模塊，AMD 是提前執(zhí)行，CMD 是延遲執(zhí)行。看兩個項目中的打印順序：

// require.js
加載了 add 模塊
加載了 multiply 模塊
加載了 square 模塊
2
9

// sea.js
加載了 add 模塊
2
加載了 square 模塊
加載了 multiply 模塊
9

AMD 是將需要使用的模塊先加載完再執(zhí)行代碼，而 CMD 是在 require 的時候才去加載模塊文件，加載完再接著執(zhí)行。

感謝

感謝 require.js 和 sea.js 在推動 JavaScript 模塊化發(fā)展方面做出的貢獻。

CommonJS

AMD 和 CMD 都是用于瀏覽器端的模塊規(guī)范，而在服務(wù)器端比如 node，采用的則是 CommonJS 規(guī)范。

導(dǎo)出模塊的方式：

var add = function(x, y) {　
    return x + y;
};

module.exports.add = add;

引入模塊的方式：

var add = require("./add.js");
console.log(add.add(1, 1));

我們將之前的例子改成 CommonJS 規(guī)范：

// main.js
var add = require("./add.js");
console.log(add.add(1, 1))

var square = require("./square.js");
console.log(square.square(3));

// add.js
console.log("加載了 add 模塊")

var add = function(x, y) {　
    return x + y;
};

module.exports.add = add;

// multiply.js
console.log("加載了 multiply 模塊")

var multiply = function(x, y) {　
    return x * y;
};

module.exports.multiply = multiply;

// square.js
console.log("加載了 square 模塊")

var multiply = require("./multiply.js");

var square = function(num) {　
    return multiply.multiply(num, num);
};

module.exports.square = square;

CommonJS 項目 Demo 地址：https://github.com/mqyqingfeng/Blog/tree/master/demos/ES6/module/commonJS

如果我們執(zhí)行 node main.js，打印的順序為：

加載了 add 模塊
2
加載了 square 模塊
加載了 multiply 模塊
9

跟 sea.js 的執(zhí)行結(jié)果一致，也是在 require 的時候才去加載模塊文件，加載完再接著執(zhí)行。

CommonJS 與 AMD

引用阮一峰老師的《JavaScript 標(biāo)準(zhǔn)參考教程（alpha）》:

CommonJS 規(guī)范加載模塊是同步的，也就是說，只有加載完成，才能執(zhí)行后面的操作。AMD規(guī)范則是非同步加載模塊，允許指定回調(diào)函數(shù)。
由于 Node.js 主要用于服務(wù)器編程，模塊文件一般都已經(jīng)存在于本地硬盤，所以加載起來比較快，不用考慮非同步加載的方式，所以 CommonJS 規(guī)范比較適用。
但是，如果是瀏覽器環(huán)境，要從服務(wù)器端加載模塊，這時就必須采用非同步模式，因此瀏覽器端一般采用 AMD 規(guī)范。

ES6

ECMAScript2015 規(guī)定了新的模塊加載方案。

導(dǎo)出模塊的方式：

var firstName = "Michael";
var lastName = "Jackson";
var year = 1958;

export {firstName, lastName, year};

引入模塊的方式：

import {firstName, lastName, year} from "./profile";

我們再將上面的例子改成 ES6 規(guī)范：

目錄結(jié)構(gòu)與 requirejs 和 seajs 目錄結(jié)構(gòu)一致。



    
        ES6
    
    
        Content

注意！瀏覽器加載 ES6 模塊，也使用

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

ES6 系列之模塊加載方案

Content

Content

Content