JS模塊規(guī)范：AMD、UMD、CMD、commonJS、ES6 module

_ang 發(fā)布于2019-08-22 11:17 / 1728人閱讀

摘要：要想讓模塊再次運(yùn)行，必須清除緩存。模塊加載會(huì)阻塞接下來代碼的執(zhí)行，需要等到模塊加載完成才能繼續(xù)執(zhí)行同步加載。環(huán)境服務(wù)器環(huán)境應(yīng)用的模塊規(guī)范是參照實(shí)現(xiàn)的。這等同在每個(gè)模塊頭部，有一行這樣的命令。

commonJS

特點(diǎn)：

1、模塊可以多次加載，但是只會(huì)在第一次加載時(shí)運(yùn)行一次，然后運(yùn)行結(jié)果就被緩存了，以后再加載，就直接讀取緩存結(jié)果。要想讓模塊再次運(yùn)行，必須清除緩存。
2、模塊加載會(huì)阻塞接下來代碼的執(zhí)行，需要等到模塊加載完成才能繼續(xù)執(zhí)行——同步加載。

環(huán)境：服務(wù)器環(huán)境

應(yīng)用：nodejs的模塊規(guī)范是參照commonJS實(shí)現(xiàn)的。

語法：

1、導(dǎo)入：require("路徑")
2、導(dǎo)出：module.exports和exports

注意：module.exports和exports的的區(qū)別是exports只是對(duì)module.exports的一個(gè)引用，相當(dāng)于Node為每個(gè)模塊提供一個(gè)exports變量，指向module.exports。這等同在每個(gè)模塊頭部，有一行var exports = module.exports;這樣的命令。

demo

// a.js
// 相當(dāng)于這里還有一行：var exports = module.exports;代碼
exports.a = "Hello world";  // 相當(dāng)于：module.exports.a = "Hello world";

// b.js
var moduleA = require("./a.js");
console.log(moduleA.a);     // 打印出hello world

AMD

特點(diǎn)：

1、異步加載
2、管理模塊之間的依賴性，便于代碼的編寫和維護(hù)。

環(huán)境：瀏覽器環(huán)境

應(yīng)用：requireJS是參照AMD規(guī)范實(shí)現(xiàn)的

語法：

1、導(dǎo)入：require(["模塊名稱"], function ("模塊變量引用"){// 代碼});
3、導(dǎo)出：define(function (){return "值");

demo

// a.js
define(function (){
　　return {
　　　a:"hello world"
　　}
});
// b.js
require(["./a.js"], function (moduleA){
    console.log(moduleA.a); // 打印出：hello world
});

CMD

特點(diǎn)

1、CMD是在AMD基礎(chǔ)上改進(jìn)的一種規(guī)范，和AMD不同在于對(duì)依賴模塊的執(zhí)行時(shí)機(jī)處理不同，CMD是就近依賴，而AMD是前置依賴。

環(huán)境：瀏覽器環(huán)境

應(yīng)用：seajs是參照UMD規(guī)范實(shí)現(xiàn)的，requireJS的最新的幾個(gè)版本也是部分參照了UMD規(guī)范的實(shí)現(xiàn)

語法：

1、導(dǎo)入：define(function(require, exports, module) {});
2、導(dǎo)出：define(function (){return "值");

demo

// a.js
define(function (require, exports, module){
　　exports.a = "hello world";
});
// b.js
define(function (require, exports, module){
    var moduleA = require("./a.js");
    console.log(moduleA.a); // 打印出：hello world
});

UMD

特點(diǎn)：

1、兼容AMD和commonJS規(guī)范的同時(shí)，還兼容全局引用的方式

環(huán)境：瀏覽器或服務(wù)器環(huán)境

應(yīng)用：無

語法：

1、無導(dǎo)入導(dǎo)出規(guī)范，只有如下的一個(gè)常規(guī)寫法：

常規(guī)寫法：

(function (root, factory) {
    if (typeof define === "function" && define.amd) {
        //AMD
        define(["jquery"], factory);
    } else if (typeof exports === "object") {
        //Node, CommonJS之類的
        module.exports = factory(require("jquery"));
    } else {
        //瀏覽器全局變量(root 即 window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //方法
    function myFunc(){};
    //暴露公共方法
    return myFunc;
}));

ES6 module

特點(diǎn)：

1、按需加載（編譯時(shí)加載）
2、import和export命令只能在模塊的頂層，不能在代碼塊之中（如：if語句中）,import()語句可以在代碼塊中實(shí)現(xiàn)異步動(dòng)態(tài)按需動(dòng)態(tài)加載

環(huán)境：瀏覽器或服務(wù)器環(huán)境（以后可能支持）

應(yīng)用：ES6的最新語法支持規(guī)范

語法：

1、導(dǎo)入：import {模塊名A，模塊名B...} from "模塊路徑"
2、導(dǎo)出：export和export default
3、import("模塊路徑").then()方法

注意：export只支持對(duì)象形式導(dǎo)出，不支持值的導(dǎo)出，export default命令用于指定模塊的默認(rèn)輸出，只支持值導(dǎo)出，但是只能指定一個(gè)，本質(zhì)上它就是輸出一個(gè)叫做default的變量或方法。

規(guī)范：

/*錯(cuò)誤的寫法*/
// 寫法一
export 1;

// 寫法二
var m = 1;
export m;

// 寫法三
if (x === 2) {
  import MyModual from "./myModual";
}

/*正確的三種寫法*/
// 寫法一
export var m = 1;

// 寫法二
var m = 1;
export {m};

// 寫法三
var n = 1;
export {n as m};

// 寫法四
var n = 1;
export default n;

// 寫法五
if (true) {
    import("./myModule.js")
    .then(({export1, export2}) => {
      // ...·
    });
}

// 寫法六
Promise.all([
  import("./module1.js"),
  import("./module2.js"),
  import("./module3.js"),
])
.then(([module1, module2, module3]) => {
   ···
});