[回顧 js 模塊化規範]

Modular 模塊化

將一個複雜的程序 依據必定的規則(規範) 拆分紅幾個塊(文件)，並組合在一塊兒。

塊內部的數據是私有的，只是向外暴露一些接口(方法)與外部其餘模塊進行通訊。

關鍵字： 模塊的暴露、模塊的引入

 

1. 發展

(1) 全局函數模式： window.屬性

(2) js 文件分離

(3) 命名空間模式： 對象.屬性

(4) IIFE 函數： 匿名函數自調用（閉包）

(5) 引入依賴： 如 jQuery ，是現代模塊化的基石

(6) commonJS： node 模塊化，就是基於 commonJS 編寫的

瀏覽器不認識 commonJS 語法，須要 Browserify 工具 進行編譯打包處理

(7) AMD

(8) CMD： 一個阿里人寫的，賣給國外了。

(9) ES6

瀏覽器也不認識 import 語法，須要

npm install -g babel-cli browserify

• 先使用 Babel 將 ES6 轉成 ES5，此時 import 語法 轉成了 require 語法
• 最後使用 Browserify 進行編譯打包處理，使瀏覽器認識 require 語法

2. 好處

減小命名空間污染

模塊分離，按需加載

更高的複用性、可維護性

減小 js 資源請求（一個 script 標籤引入資源，意味着一次請求）

3. commonJS

特色： 

(1) 每一個文件都是一個模塊。

(2) 因爲服務器端，模塊的加載是同步的，意味着會有阻塞，

因此在客戶端，請求模塊，用戶可能出現等待， 體驗很差。

(3) 瀏覽器不認識 commonJS 語法，須要 Browserify 工具 進行編譯打包處理。

基本語法：

• 暴露： （本質是： 暴露 exports, 須要知道，默認的 exports = {} ）

方式一： module.exports = value;    // 最後一次暴露生效

方式二： exports.xxx = value;    // 能夠屢次暴露不一樣的屬性

• 引入：

自定義模塊： require('./')        須要路徑標識

第三方模塊： require('包名')

• 後端 node.js 模塊化____基於 commonJS
  

(1) 目錄結構

(2) 暴露一個對象 module1.js

(3) 暴露一個函數 module2.js

(4) 暴露多個屬性 module3.js

(5) app.js 引入 依賴模塊

• 前端 Browserify 使得瀏覽器 處理 require

報錯： require is not defined

解決：使用 browserify

 

(1) 安裝 browserify

npm install -g browserify        // 全局安裝

npm install --save-dev browserify        // 安裝進 開發依賴 devDependencies: {}

(2) browserify ./js/src/app.js -o ./js/dist/app.js

(3) html 引入生成的 js 文件 <script src="./js/dist/app.js"></script>

4. AMD

專門用於瀏覽器端，模塊加載是異步的，意味着可能多個模塊同時加載

requireJS 就是 AMD

比 瀏覽器端 commonJS 實現更早

• 暴露

顯示聲明依賴注入

• 引入

通常也是在主模塊 require

瀏覽器端的 AMD 實例

(1) 將 require.js 下載，項目目錄：

(2) 定義暴露模塊 dataService.js (無依賴模塊)

(3) 定義暴露模塊 alerter.js (有依賴模塊)

(4) 主模塊，配置 模塊路徑，聚集模塊

main.js

注意：

• baseUrl 使用時，配置路徑是從根目錄出發。。。不然，從 main.js 目錄出發
• 配置路徑時，不能加 .js 後綴，由於 require.js 會加 .js ，會衝突
• 第三方模塊 jquery-1.10.1 的使用：

main.js 

根據 jquery-1.10.1 源碼，這兒的聲明，必定要小寫 jquery

alerter.js

• 若是使用 angular.js 須要以下配置

main.js

(5) html 使用 script 引入 require.js，聲明 主模塊 相對路徑

5. CMD

專門用於瀏覽器端，模塊加載是異步的

模塊使用時纔會加載

依賴 sea.js

暴露

引入

(1) 下載 sea.js ，並建立項目結構

(2) 定義暴露模塊 module1.js (定義沒有依賴的模塊)

(3) 定義暴露模塊 module2.js ()

(4) 定義暴露模塊 module3.js ()

(5) 定義暴露模塊 module4.js ()

(6) main.js 入口

(7) index.html 使用

 

6. ES6 + bable + browserify

(1) 下載第三方庫

npm install -g babel-cli browserify

npm install --save-dev bable-preset-es2015    // 將 es6 轉成 es5 的全部插件包

(2) 配置 .babelrc

• run control

• {
      "presets": ["es2015"]
  }

(3) 參見 http://www.javashuo.com/article/p-vhajlzxb-dg.html