好家伙，本篇為《JS高級程式設計》第二十六章“模塊”學習筆記 JS開發會遇到代碼量大和廣泛使用第三方庫的問題。 解決這個問題的方案通 常需要把代碼拆分成很多部分，然後再通過某種方式將它們連接起來。 若代碼量較大,我們使用模塊化開發的模式,也能夠使代碼容易維護 我們需要模塊 1.模塊模式 把邏輯分塊， ...
好家伙，本篇為《JS高級程式設計》第二十六章“模塊”學習筆記
JS開發會遇到代碼量大和廣泛使用第三方庫的問題。
解決這個問題的方案通 常需要把代碼拆分成很多部分，然後再通過某種方式將它們連接起來。
若代碼量較大,我們使用模塊化開發的模式,也能夠使代碼容易維護
我們需要模塊
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="moduleA.js"></script>
4.課後習題
與commonJS規範和AMD規範相比,ES6模塊有什麼優點?
答: 1.更安全，因為ES6模塊有自己獨立的作用域，避免了變數污染。
2.更容易維護，因為模塊可以明確的規定輸入和輸出，便於模塊的重用和維護。
3.更簡潔，ES6模塊的語法更加簡潔易懂，模塊的載入更加高效。
2.與ES6模塊相比,commonJS規範和AMD規範有什麼缺點?
答: CommonJS規範的缺點是它只能在伺服器端運行，而不能在瀏覽器端運行。
AMD規範的缺點是它增加了很多的書寫工作，而且不能很好的處理迴圈依賴,代碼複雜
