1.模塊模式

把邏輯分塊，各自封裝，相互獨立，每個塊自行決定對外暴露什么，同時自行決定引入執行哪些外部代碼，

這就是模塊模式的思想

2.es6前的模塊加載器

2.1.commonJS規范

注意了,這不是某個包或者某個方法,而是某種規范

CommonJS 規范概述了同步宣告依賴的模塊定義，

//moduleA.js
module.exports = 'foo'


//moduleB.js
var moduleA = require('./moduleA');
console.log(moduleA);

CommonJS 依賴幾個全域屬性如 require 和 module.exports，

如果想在瀏覽器中使用 CommonJS 模塊，就需要與其非原生的模塊語法之間構筑“橋梁”，

模塊級代碼與瀏覽器運行時之間也需要某種“屏障”，因為沒有封裝的 CommonJS 代碼在瀏覽器中執行會創建全域變數，

全域變數出現了,那么就違背了模塊模式的"各自封裝，相互獨立"

2.2.AMD異步模塊定義

CommonJS 以服務器端為目標環境，能夠一次性把所有模塊都加載到記憶體，

而異步模塊定義的模塊定義系統則以瀏覽器為目標執行環境，這需要考慮網路延遲的問題，

AMD 的一般策略是讓模塊宣告自己的依賴，而運行在瀏覽器中的模塊系統會按需獲取依賴，并在依賴加載完成后立即執行依賴它們的模塊，

AMD 模塊實作的核心是用函式包裝模塊定義，這樣可以防止宣告全域變數，并允許加載器庫控制何時加載模塊，

// ID 為'moduleA'的模塊定義，moduleA 依賴 moduleB，
// moduleB 會異步加載
define('moduleA', ['moduleB'], function(moduleB) { 
 return { 
 stuff: moduleB.doStuff(); 
 }; 
});

CommonJS模塊和AMD模塊之間的沖突主要是在模塊加載方面，

CommonJS模塊是同步加載的，而AMD模塊是異步加載的，這使得CommonJS模塊和AMD模塊無法很好地運行在一起，

此外，CommonJS模塊和AMD模塊的模塊定義語法也不同，這也會對它們之間的沖突產生影響，

3.ES6模塊

ES6 模塊系統是集 AMD 和 CommonJS 之大成者，

3.1.外部檔案引入

tips:擴展名為 .mjs 的檔案是 JavaScript 源代碼檔案，在 Node.js 應用程式中用作 ECMA 模塊（ECMAScript 模塊），

Node.js 的 natvie 模塊系統是 CommonJS，用于將代碼拆分到不同的檔案中，以保持 JS 代碼的組織性，

MJS 是 Node.js 用來識別模塊是 CommonJS 還是 ES6 的唯一方法，

外部檔案引入示例:

//moduleA.mjs
const foo = "foo";
export {foo};


//moduleB.mjs
import { foo } from "./moduleA.mjs"
console.log(foo);

3.2.網頁嵌入

<script type="module" src=https://www.cnblogs.com/FatTiger4399/p/"moduleA.js"></script>

4.課后習題

與commonJS規范和AMD規范相比,ES6模塊有什么優點?

答: 1.更安全，因為ES6模塊有自己獨立的作用域，避免了變數污染，

　　2.更容易維護，因為模塊可以明確的規定輸入和輸出，便于模塊的重用和維護，

　　3.更簡潔，ES6模塊的語法更加簡潔易懂，模塊的加載更加高效，

2.與ES6模塊相比,commonJS規范和AMD規范有什么缺點?

答: CommonJS規范的缺點是它只能在服務器端運行，而不能在瀏覽器端運行，

　　AMD規范的缺點是它增加了很多的書寫作業，而且不能很好的處理回圈依賴,代碼復雜

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/546739.html

標籤：JavaScript

上一篇：博客園美化教程

下一篇：前端設計模式——職責鏈模式

第129篇:JS模塊化開發