模組化概念：複雜的程式按照規則封裝幾個塊再組合在一起，塊內部資料實現是私有的只是向外部暴露一些介面來與外部通訊

模組化程序

1. 全域性function：不同的功能封裝成不同的函式------缺點命名衝突

2. 物件封裝：減少全域性變數解決命名衝突------缺點：資料不安全（外部可以直接修改模組內部資料）會暴露所有成員

3. 閉包：私有變數，通過方法-----缺點：相互依賴

4. 引入依賴

模組化優點

1. 避免命名衝突

2. 按需載入

3. 複用性

4. 可維護

模組化之後引入過多的問題

1. 請求變多

2. 依賴關係模糊 不知道誰依賴誰

模組化規範

1. CommonJS 特點：同步載入，適用於服務端，載入一次快取結果。瀏覽器端需要編譯後執行。

   • 暴露模組：module.exports = value或exports.value = value

   • 引入模組：require(xxx)

2. AMD: 特點：非同步載入，允許指定回撥函式，適用於瀏覽器端。

   • 定義：define(['module1','module2'], function(m1, m2){return 模組})

   • 使用：require(['module1', 'module2'], function(m1, m2){使用m1, m2})

   • 藉助工具：RequireJS

3. CMD 特點：用於瀏覽器端，模組載入是非同步的，模組使用時才會載入執行。結合了CommonJS和AMD規範的特點。

   • 定義暴露模組：define(function(require, exports, module){

   • //引入依賴模組(同步) var module2 = require('./module2')

   • //引入依賴模組(非同步) require.async('./module3', function (m3) {})

   • //暴露模組 exports.xxx = value})

   • 引入模組： define(function (require) { var m1 = require('./module1') var m4 = require('./module4') m1.show() m4.show() })

   • 藉助工具：sea.js

4. ES6模組化：
   

   使用：基本匯出（具名匯出）和預設匯出

   可以將整個模組的匯出想象成一個物件，基本匯出匯出的是該物件的某個屬性，預設匯出匯出的是該物件的特殊屬性default

   //匯出結果：想象成一個物件
   {
     a: xxx, //基本匯出
     b: xxx, //基本匯出
     default: xxx, //預設匯出
     c: xxx //基本匯出
   }
   ​
   export var a = 1 //基本匯出 a = 1
   export var b = function(){} //基本匯出 b = function(){}
   export function method(){} //基本匯出 method = function(){}
   var c = 3;
   export {c} //基本匯出 c = 3
   export { c as temp } //基本匯出 temp = 3
   ​
   export default 3 //預設匯出 default = 3
   export default function(){} //預設匯出 default = function(){}
   export { c as default } //預設匯出 default = 3
   ​
   export {a, b, c as default} //基本匯出 a=1, b=function(){}, 預設匯出 default = 3

   1. 匯入

      import {a,b} from "模組路徑"  //匯入屬性 a、b，放到變數a、b中
      import {a as temp1, b as temp2} from "模組路徑" //匯入屬性a、b，放到變數temp1、temp2 中
      import {default as a} from "模組路徑" //匯入屬性default，放入變數a中，default是關鍵字，不能作為變數名，必須定義別名
      import {default as a, b} from "模組路徑" //匯入屬性default、b，放入變數a、b中
      import c from "模組路徑" //相當於 import {default as c} from "模組路徑"
      import c, {a,b} from "模組路徑" //相當於 import {default as c, a, b} from "模組路徑"
      import * as obj from "模組路徑" //將模組物件放入到變數obj中
      import "模組路徑" //不匯入任何內容，僅執行一次模組

   2. ES6 module 採用依賴預載入模式，所有模組匯入程式碼均會提升到程式碼頂部

      不能將匯入程式碼放置到判斷、迴圈中

      匯入的內容放置到常量中，不可更改

      ES6 module 使用了快取，保證每個模組僅載入一次匯入