一個頁面需要引入多個js文件問題:

• 請求過多
• 依賴模糊
• 難以維護
  這些問題可以通過現(xiàn)代模塊化編碼和項目構(gòu)建來解決

JS模塊化進化史

1.函數(shù)堆積，全局污染
2.將數(shù)據(jù)/行為封裝到對象中（命名空間），解決了命名沖突，不安全，變量可修改
3.閉包
4.IIFE增強模式

• IIFE : 立即調(diào)用函數(shù)表達式--->匿名函數(shù)自調(diào)用
• 編碼: 將數(shù)據(jù)和行為封裝到一個函數(shù)內(nèi)部, 通過給window添加屬性來向外暴露接口
• 引入依賴: 通過函數(shù)形參來引入依賴模塊

      (function(window, module2){
        var data = 'atguigu.com'
        function foo() {
           module2.xxx()
           console.log('foo()'+data)
        }
        function bar() {
           console.log('bar()'+data)
        }
        
        window.module = {foo}
      })(window, module2)

模塊化的規(guī)范（關(guān)鍵是【拆】【合】）

1.CommonJs -唯一的雙端JS規(guī)范

CommonJS 是一套規(guī)范，它的創(chuàng)建和核準是開放的。這個規(guī)范已經(jīng)有很多版本和具體實現(xiàn)。
CommonJS 規(guī)范是為了解決 JavaScript 的作用域問題而定義的模塊形式，可以使每個模塊它自身的命名空間中執(zhí)行。該規(guī)范的主要內(nèi)容是，模塊必須通過 module.exports或exports 導(dǎo)出對外的變量或接口，通過 require() 來導(dǎo)入其他模塊的輸出到當前模塊作用域中。
服務(wù)端實現(xiàn)： Node.js模塊化

  |-modules
    |-module1.js
    |-module2.js
    |-module3.js
  |-app.js  //合并 node app.js
  |-package.json
    {
      "name": "commonJS-node",
      "version": "1.0.0"
    }

瀏覽器端實現(xiàn): Browserify模塊化

 |-js
   |-dist //打包生成文件的目錄
   |-src //源碼所在的目錄
     |-module1.js
     |-module2.js
     |-module3.js
     |-app.js //應(yīng)用主源文件
 |-index.html
 |-package.json
   {
     "name": "browserify-test",
     "version": "1.0.0"
   }

2.AMD

*AMD 定義了一套 JavaScript 模塊依賴異步加載標準，來解決同步加載的問題。
* require.js
* 基本語法
* 定義暴露模塊: define([依賴模塊名], function(){return 模塊對象})
* 引入模塊: require(['模塊1', '模塊2', '模塊3'], function(m1, m2){//使用模塊對象})

3.CMD

• sea.js
  • 基本語法
    • 定義暴露模塊:

      define(function(require, module, exports){
        通過require引入依賴模塊
        通過module/exports來暴露模塊
        exports.xxx = value
      })
      

    • 使用模塊seajs.use(['模塊1', '模塊2'])

4.ES6

• 定義暴露模塊: export
  默認暴露(暴露一個數(shù)據(jù)):
  export default 對象
  一般暴露(暴露多個數(shù)據(jù)):
  export const a = value1
  export let b = value2
  const c = value1
  let d = value2
  export {c, d}
  • 引入使用模塊: import
    引入default模塊:
    import xxx from '模塊路徑/模塊名'
    引入一般模塊
    import {a, b} from '模塊路徑/模塊名'
    import * as module1 from '模塊路徑/模塊名'
• 使用Babel將ES6編譯為ES5代碼
• 使用Browserify編譯打包js

參考

最新的模塊化 JavaScript 設(shè)計模式
詳解JavaScript模塊化開發(fā)
Javascript 模塊化編程 - 阮一峰
https://zhaoda.net/webpack-handbook/commonjs.html