js 模塊化

模塊化

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

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

模塊的暴露、模塊的引入

模塊的進化史

1. 頁面加載 script 的缺點：

請求過多，依賴模糊，難以維護

module1.js

 

module2.js

 

index.html

2. 簡單地封裝進一個對象（本質是對象，可修改，不安全）

3. 使用 IIFE 匿名閉包

4. 引入依賴（現代模塊化的基石）

前端面試題： 沒有模塊化，怎麼寫代碼？

利用 IIFE 引入依賴，構建匿名閉包。

設計原則： 高內聚、低耦合（模塊內部配合越緊密越好、模塊之間聯繫越低越好）

解耦： 下降耦合度

模塊化的好處：

避免了命名衝突（減小了命名空間的污染）

更好的分離

更高的複用性

可維護性好

模塊化規範 (vue 的出現，組件規範更深得人心)：

• ES6 ----> Babel + Browserify

因爲目前，瀏覽器還不能直接徹底識別 ES6 

Babel 將 ES6 轉成 ES5，還將 import 語法 轉成了 require 語法語法，最後 Browserify 使瀏覽器認識 require 語法

依賴模塊，須要編譯打包處理

• 暴露模塊 (ES6 模塊中的暴露命名，處於同一做用域 export，意味着不能暴露同名定義)

1. 分別暴露

export 暴露內容;

2. 統一暴露

export {xxx, yyy};

3. 默認暴露 (使用的頻率很高，只能暴露一次)

export default 暴露內容;

• 引入模塊

1. import {} from './module1';        

2. import modules from './module2';

(瀏覽器端的) 實現： 

① 使用 jQuery 的話

npm install  jquery@1 --save

import $ from 'jquery';

② 使用 Babel 將 ES6 編譯爲 ES5 代碼 (還能 { "presets": ["jsx"] } )

npm install -g babel-cli browserify        // comment line interface ----> 命令行接口

npm install babel-preser-es2015 --save-dev        // 安裝進開發依賴

vim .babelrc        // run control 運行時控制規則

{ "presets": ["es2015"] }

③ 使用 Babel 將 ES6 編譯爲 ES5 代碼 (ES6 模塊化 轉換成了 CommandJS)

babel js/src -d js/lib 

④ 使用 Browserify

browserify js/lib/app.js -o js/lib/appOutput.js

<script scr="js/lib/appOutput.js"></script>

看起來這一系列很麻煩，可是 自動化構建工具 誕生了，哈哈。

使用 Browserify 編譯打包 js

• js/module1.js

• js/module2.js

• js/module3.js

• js/app.js

1

• index.html

1

 

---

•  CommonJS ----> Node、Browserify

每個 js 文件均可以當成一個模塊

node 服務器端 

模塊加載 是運行時同步加載的

npm install uniq --save        

暴露模塊 (本質是 exports 對象)

module.exports = {xxx, ccc};

exports.xxx = xxx;

exports.ccc = ccc;

module.js:

module.exports = {

name:'SunWuKong',

age:550,

hello(){ console.log('Hello Module.'); }

};

引入模塊

require('xxx');    // 第三方庫

require('./xxx');    // 自定義模塊，必須以 ./ 或者 ../ 開頭

const sun = require('./module.js');

const {name:sunName} = require('./module.js');

瀏覽器端不認識 require 因此必須 npm install browserify -g       // 查看全局的包在哪兒 npm get prefix

模塊須要提早編譯打包處理

npm install browserify -g

browserify js/src/app.js -o js/dist/appOutput.js

<script src="js/dist/appOutput.js"></script>

 

---

•  AMD ----> RequireJS

Asynchronous Module Definition 異步模塊定義

https://github.com/amdjs/amdjs-api/wiki/AMD

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

• 暴露模塊

1. 定義一個沒有依賴的模塊

define(function(){

return 模塊;

});

2. 定義又依賴的模塊

define(['module1', 'module2'... ...], function(m1, m2){... ...});        // 破壞了 就近聲明原則

• 引入模塊

瀏覽器端，模塊的加載是異步的 ：

坑：

去 .js 後綴

jquery 迎合 小寫 jquery 

• modules/dataService.js        // return 必須是一個對象;

• modules/loger.js

• main.js        // 模塊化入口主文件，須要編寫配置對象，固定寫法

• index.html

 

---

• CMD ----> SeaJS

參見： http://www.javashuo.com/article/p-dghmfkny-cm.html