全棧工程師知識點彙總——模塊化詳解

## JS模塊化

* 模塊化的理解
* 什麼是模塊?
  * 將一個複雜的程序依據必定的規則(規範)封裝成幾個塊(文件), 並進行組合在一塊兒
  * 塊的內部數據/實現是私有的, 只是向外部暴露一些接口(方法)與外部其它模塊通訊
* 一個模塊的組成
  * 數據--->內部的屬性
  * 操做數據的行爲--->內部的函數
* 模塊化
  * 編碼時是按照模塊一個一個編碼的, 整個項目就是一個模塊化的項目

* 模塊化的進化過程
  * 全局function模式 : 
    * 編碼: 全局變量/函數
    * 問題: 污染全局命名空間, 容易引發命名衝突/數據不安全
  * namespace模式 : 
    * 編碼: 將數據/行爲封裝到對象中
    * 解決: 命名衝突(減小了全局變量)
    * 問題: 數據不安全(外部能夠直接修改模塊內部的數據)
  * IIFE模式/加強
    * IIFE : 當即調用函數表達式--->匿名函數自調用
    * 編碼: 將數據和行爲封裝到一個函數內部, 經過給window添加屬性來向外暴露接口
    * 引入依賴: 經過函數形參來引入依賴模塊
      ```
      (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)
      ```

* 模塊化規範

  * CommonJS
    * Node.js : 服務器端
    * Browserify : 瀏覽器端    也稱爲js的打包工具
    * 基本語法:
      * 定義暴露模塊 : exports
        ```
        exports.xxx = value
        module.exports = value
        ```
      引入模塊 : require
        ```
        var module = require('模塊名/模塊相對路徑')
        ```
    * 引入模塊發生在何時?
      * Node : 運行時, 動態同步引入
      * Browserify : 在運行前對模塊進行編譯/轉譯/打包的處理(已經將依賴的模塊包含進來了), 
                  運行的是打包生成的js, 運行時不存在須要再從遠程引入依賴模塊

  * AMD : 瀏覽器端
    * require.js
    * 基本語法
      * 定義暴露模塊: define([依賴模塊名], function(){return 模塊對象})
      * 引入模塊: require(['模塊1', '模塊2', '模塊3'], function(m1, m2){//使用模塊對象})
      * 配置: 
        ```
        require.config({
          //基本路徑
          baseUrl : 'js/',
          //標識名稱與路徑的映射
          paths : {
            '模塊1' : 'modules/模塊1',
            '模塊2' : 'modules/模塊2',
            'angular' : 'libs/angular',
            'angular-messages' : 'libs/angular-messages'
          },
          //非AMD的模塊
          shim : {
            'angular' : {
                exports : 'angular'
            },
            'angular-messages' : {
                exports : 'angular-messages',
                deps : ['angular']
            }
          }
        })
        ```

  * CMD : 瀏覽器端
    * sea.js
    * 基本語法
      * 定義暴露模塊: 
        ```
        define(function(require, module, exports){
          經過require引入依賴模塊
          經過module/exports來暴露模塊
          exports.xxx = value
        })
        ```
      * 使用模塊seajs.use(['模塊1', '模塊2'])

  * ES6
    * ES6內置了模塊化的實現
    * 基本語法
      * 定義暴露模塊 : export
        * 暴露一個對象: 
          ```
          export default 對象
          ```
        * 暴露多個: 
          ```
          export var xxx = value1
          export let yyy = value2
          
          var xxx = value1
          let yyy = value2
          export {xxx, yyy}
          ```
              
      * 引入使用模塊 : import
        * default模塊:
          ```
          import xxx  from '模塊路徑/模塊名'
          ```
        * 其它模塊
          ```
          import {xxx, yyy} from '模塊路徑/模塊名'
          import * as module1 from '模塊路徑/模塊名'
          ```
    * 問題: 全部瀏覽器還不能直接識別ES6模塊化的語法  
    * 解決:
        * 使用Babel將ES6--->ES5(使用了CommonJS) ----瀏覽器還不能直接支行
        * 使用Browserify--->打包處理----瀏覽器能夠運行