JS模塊規范：AMD、UMD、CMD、commonJS、ES6 module

_ang 發布于2019-08-22 11:17 / 1736人閱讀

摘要：要想讓模塊再次運行，必須清除緩存。模塊加載會阻塞接下來代碼的執行，需要等到模塊加載完成才能繼續執行同步加載。環境服務器環境應用的模塊規范是參照實現的。這等同在每個模塊頭部，有一行這樣的命令。

commonJS

特點：

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

環境：服務器環境

應用：nodejs的模塊規范是參照commonJS實現的。

語法：

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

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

demo

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

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

AMD

特點：

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

環境：瀏覽器環境

應用：requireJS是參照AMD規范實現的

語法：

1、導入：require(["模塊名稱"], function ("模塊變量引用"){// 代碼});
3、導出：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

特點

1、CMD是在AMD基礎上改進的一種規范，和AMD不同在于對依賴模塊的執行時機處理不同，CMD是就近依賴，而AMD是前置依賴。

環境：瀏覽器環境

應用：seajs是參照UMD規范實現的，requireJS的最新的幾個版本也是部分參照了UMD規范的實現

語法：

1、導入：define(function(require, exports, module) {});
2、導出：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

特點：

1、兼容AMD和commonJS規范的同時，還兼容全局引用的方式

環境：瀏覽器或服務器環境

應用：無

語法：

1、無導入導出規范，只有如下的一個常規寫法：

常規寫法：

(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

特點：

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

環境：瀏覽器或服務器環境（以后可能支持）

應用：ES6的最新語法支持規范

語法：

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

注意：export只支持對象形式導出，不支持值的導出，export default命令用于指定模塊的默認輸出，只支持值導出，但是只能指定一個，本質上它就是輸出一個叫做default的變量或方法。

規范：

/*錯誤的寫法*/
// 寫法一
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]) => {
   ···
});

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92106.html

JS常見模塊化規范(CommonJS/AMD/CMD/UMD/ES6 Module)

摘要：常見模塊化方案是由社區提出的模塊化方案中的一種，遵循了這套方案。是模塊化規范中的一種，遵循了這套規范。中的模塊化能力由兩個命令構成和，命令用于規定模塊的對外接口，命令用于輸入其他模塊提供的功能。為什么需要模塊化在ES6出現之前，JS語言本身并沒有提供模塊化能力，這為開發帶來了一些問題，其中最重要的兩個問題應當是全局污染和依賴管理混亂。 // file a.js var name =...

walterrwu 2019-08-23 12:32 評論0 收藏0
js中的模塊化——commonjs,AMD,CMD,UMD,ES6

摘要：若不存在則模塊標識應該默認定義為在加載器中被請求腳本的標識。這也是目前很多插件頭部的寫法，就是用來兼容各種不同模塊化的寫法。語句輸出的值是動態綁定的，綁定其所在的模塊。前言歷史上，js沒有模塊化的概念，不能把一個大工程分解成很多小模塊。這對于多人開發大型，復雜的項目形成了巨大的障礙，明顯降低了開發效率，java，Python有import，甚至連css都有@import,但是令人費...

qpal 2019-08-23 13:49 評論0 收藏0
JS模塊化——CommonJS AMD CMD UMD ES6 Module 比較

摘要：即盡早地執行依賴模塊。阮一峰輸出值的引用模塊是動態關聯模塊中的值，輸出的是值得引用。的加載實現阮一峰運行時加載靜態編譯模塊是運行時加載，模塊是編譯時輸出接口。模塊化開發優點模塊化開發中，通常一個文件就是一個模塊，有自己的作用域，只向外暴露特定的變量和函數，并且可以按需加載。依賴自動加載，按需加載。提高代碼復用率，方便進行代碼的管理，使得代碼管理更加清晰、規范。減少了命名沖...

shadowbook 2019-08-26 13:40 評論0 收藏0
【JS基礎】一文看懂前端模塊化規范

摘要：參考資料前端模塊化詳解完整版入門近一萬字的語法知識點補充徹底搞清楚中的和和詳解前言前端的模塊化之路經歷了漫長的過程，想詳細了解的小伙伴可以看浪里行舟大神寫的前端模塊化詳解(完整版)，這里根據幾位大佬們寫的文章，將模塊化規范部分做了匯總和整理，希望讀完的小伙伴能有些收獲，也希望覺得有用的小伙伴可以點個贊，筆芯。什么是模塊將一個復雜的程序依據一定的規則(規范)封裝成幾個塊(文件)...

HelKyle 2019-08-23 17:09 評論0 收藏0
JS模塊化編程

摘要：也就是說，外部模塊輸出值變了，當前模塊的導入值不會發生變化。三規范的出現，使得模塊化在環境中得到了施展機會。模塊化這種加載稱為編譯時加載或者靜態加載。總結的模塊化規范經過了模塊模式的演進，利用現在常用的打包工具，非常方便我們編寫模塊化代碼。前言什么是模塊化？模塊就是實現特定功能的一組方法,而模塊化是將模塊的代碼創造自己的作用域，只向外部暴露公開的方法和變量，而這些方法之間高度解耦...

騫諱護 2019-08-26 13:34 評論0 收藏0