前言
什麼是模塊化?
模塊就是實現特定功能的一組方法,而模塊化是將模塊的代碼創造自己的作用域,只向外部暴露公開的方法和變量,而這些方法之間高度解耦。
寫 JS 爲什麼需要模塊化編程?
當寫前端還只是處理網頁的一些表單提交,點擊交互的時候,還沒有強化 JS 模塊化的概念,當前端邏輯開始複雜,交互變得更多,數據量越來越龐大時,前端對 JS 模塊化編程的需求就越加強烈。
在很多場景中,我們需要考慮模塊化:
- 團隊多人協作,需要引用別人的代碼
- 項目交接,我們在閱讀和重構別人的代碼
- 代碼審查時,檢驗你的代碼是否規範,是否存在問題
- 寫完代碼,回顧自己寫的代碼是否美觀:)
- 不同的環境,環境變量不同
基於以上場景,所以,當前 JS 模塊化主要是這幾個目的:
- 代碼複用性
- 功能代碼鬆耦合
- 解決命名衝突
- 代碼可維護性
- 代碼可閱讀性
先給結論:JS 的模塊化編程經歷了幾個階段:
- 命名空間形式的代碼封裝
- 通過立即執行函數(IIFE)創建的命名空間
- 服務器端運行時 Nodejs 的 CommonJS 規範
- 將模塊化運行在瀏覽器端的 AMD/CMD 規範
- 兼容 CMD 和 AMD 的 UMD 規範
- 通過語言標準支持的 ES Module
先給結論圖:
一、命名空間
我們知道,在 ES6 之前,JS 是沒有塊作用域的,私有變量和方法的隔離主要靠函數作用域,公開變量和方法的隔離主要靠對象的屬性引用。
封裝函數
在 JS 還沒有模塊化規範的時候,將一些通用的、底層的功能抽象出來,獨立成一個個函數來實現模塊化:
比方寫一個 utils.js 工具函數文件
// utils.js
function add(x, y) {
if(typeof x !== "number" || typeof y !== "number") return;
return x + y;
}
function square(x) {
if(typeof x !== "number") return;
return x * x;
}
<script src="./utils.js"></script>
<script>
add(2, 3);
square(4);
</script>
通過 js 函數文件劃分的方式,此時的公開函數其實是掛載到了全局對象 window 下,當在別人也想定義一個叫 add 函數,或者多個 js 文件合併壓縮的時候,會存在命名衝突的問題。
掛載到全局變量下:
後來我們想到通過掛載函數到全局對象字面量下的方式,利用 JAVA 包的概念,希望減輕命名衝突的嚴重性。
var mathUtils1 = {
add: function(x, y) {
return x + y;
},
}
var mathUtils2 = {
add: function(x, y, z) {
return x + y + z;
},
}
mathUtils.add();
mathUtils.square();
這種方式仍然創建了全局變量,但如果包的路徑很長,那麼到最後引用方法可能就會以module1.subModule.subSubModule.add
的方式引用代碼了。
IIFE
考慮模塊存在私有變量,於是我們利用IIFE(立即執行表達式)創建閉包來封裝私有變量:
var module = (function(){
var count = 0;
return {
inc: function(){
count += 1;
},
dec: function(){
count += -1;
}
}
})()
module.inc();
module.dec();
這樣私有變量對於外部來說就是不可訪問的,那如果模塊需要引入其他依賴呢?
var utils = (function ($) {
var $body = $("body");
var _private = 0;
var foo = function() {
...
}
var bar = function () {
...
}
return {
foo: foo,
bar: bar
}
})(jQuery);
以上封裝模塊的方式叫作:模塊模式,在 jQuery 時代,大量使用了模塊模式:
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="utils.js"></script>
<script src="base.js"></script>
<script src="main.js"></script>
jQuery 的插件必須在 JQuery.js 文件之後 ,文件的加載順序被嚴格限制住,依賴越多,依賴關係越混亂,越容易出錯。
二、CommonJS
Nodejs 的出現,讓 JavaScript 能夠運行在服務端環境中,此時迫切需要建立一個標準來實現統一的模塊系統,也就是後來的 CommonJS。
// math.js
exports.add = function(x, y) {
return x + y;
}
// base.js
var math = require("./math.js");
math.add(2, 3); // 5
// 引用核心模塊
var http = require('http');
http.createServer(...).listen(3000);
CommonJS 規定每個模塊內部,module 代表當前模塊,這個模塊是一個對象,有 id,filename, loaded,parent, children, exports 等屬性,module.exports 屬性表示當前模塊對外輸出的接口,其他文件加載該模塊,實際上就是讀取 module.exports 變量。
// utils.js
// 直接賦值給 module.exports 變量
module.exports = function () {
console.log("I'm utils.js module");
}
// base.js
var util = require("./utils.js")
util(); // I'm utils.js module
或者掛載到 module.exports 對象下
module.exports.say = function () {
console.log("I'm utils.js module");
}
// base.js
var util = require("./utils.js")
util.say();
爲了方便,Node 爲每個模塊提供一個 exports 自由變量,指向 module.exports。這等同在每個模塊頭部,有一行這樣的命令。
var exports = module.exports;
exports 和 module.exports 共享了同個引用地址,如果直接對 exports 賦值會導致兩者不再指向同一個內存地址,但最終不會對 module.exports 起效。
// module.exports 可以直接賦值
module.exports = 'Hello world';
// exports 不能直接賦值
exports = 'Hello world';
CommonJS 總結:
CommonJS 規範加載模塊是同步的,用於服務端,由於 CommonJS 會在啓動時把內置模塊加載到內存中,也會把加載過的模塊放在內存中。所以在 Node 環境中用同步加載的方式不會有很大問題。
另,CommonJS模塊加載的是輸出值的拷貝。也就是說,外部模塊輸出值變了,當前模塊的導入值不會發生變化。
三、AMD
CommonJS 規範的出現,使得 JS 模塊化在 NodeJS 環境中得到了施展機會。但 CommonJS 如果應用在瀏覽器端,同步加載的機制會使得 JS 阻塞 UI 線程,造成頁面卡頓。
利用模塊加載後執行回調的機制,有了後面的 RequireJS 模塊加載器, 由於加載機制不同,我們稱這種模塊規範爲 AMD(Asynchromous Module Definition 異步模塊定義)規範, 異步模塊定義誕生於使用 XHR + eval 的開發經驗,是 RequireJS 模塊加載器對模塊定義的規範化產出。
AMD 的模塊寫法:
// 模塊名 utils
// 依賴 jQuery, underscore
// 模塊導出 foo, bar 屬性
<script data-main="scripts/main" src="scripts/require.js"></script>
// main.js
require.config({
baseUrl: "script",
paths: {
"jquery": "jquery.min",
"underscore": "underscore.min",
}
});
// 定義 utils 模塊,使用 jQuery 模塊
define("utils", ["jQuery", "underscore"], function($, _) {
var body = $("body");
var deepClone = _.deepClone({...});
return {
foo: "hello",
bar: "world"
}
})
</script>
AMD 的特點在於:
- 延遲加載
- 依賴前置
AMD 支持兼容 CommonJS 寫法:
define(function (require, exports, module){
var someModule = require("someModule");
var anotherModule = require("anotherModule");
someModule.sayHi();
anotherModule.sayBye();
exports.asplode = function (){
someModule.eat();
anotherModule.play();
};
});
四、CMD
SeaJS 是國內 JS 大神玉伯開發的模塊加載器,基於 SeaJS 的模塊機制,所有 JavaScript 模塊都遵循 CMD(Common Module Definition) 模塊定義規範.
CMD 模塊的寫法:
<script src="scripts/sea.js"></script>
<script>
// seajs 的簡單配置
seajs.config({
base: "./script/",
alias: {
"jquery": "script/jquery/3.3.1/jquery.js"
}
})
// 加載入口模塊
seajs.use("./main")
</script>
// 定義模塊
// utils.js
define(function(require, exports, module) {
exports.each = function (arr) {
// 實現代碼
};
exports.log = function (str) {
// 實現代碼
};
});
// 輸出模塊
define(function(require, exports, module) {
var util = require('./util.js');
var a = require('./a'); //在需要時申明,依賴就近
a.doSomething();
exports.init = function() {
// 實現代碼
util.log();
};
});
CMD 和 AMD 規範的區別:
AMD推崇依賴前置,CMD推崇依賴就近:
AMD 的依賴需要提前定義,加載完後就會執行。
CMD 依賴可以就近書寫,只有在用到某個模塊的時候再去執行相應模塊。
舉個例子:
// main.js
define(function(require, exports, module) {
console.log("I'm main");
var mod1 = require("./mod1");
mod1.say();
var mod2 = require("./mod2");
mod2.say();
return {
hello: function() {
console.log("hello main");
}
};
});
// mod1.js
define(function() {
console.log("I'm mod1");
return {
say: function() {
console.log("say: I'm mod1");
}
};
});
// mod2.js
define(function() {
console.log("I'm mod2");
return {
say: function() {
console.log("say: I'm mod2");
}
};
});
以上代碼分別用 Require.js 和 Sea.js 執行,打印結果如下:
Require.js:
先執行所有依賴中的代碼
I'm mod1
I'm mod2
I'm main
say: I'm mod1
say: I'm mod2
Sea.js:
用到依賴時,再執行依賴中的代碼
I'm main
I'm mod1
say: I'm mod1
I'm mod2
say: I'm mod2
五、UMD
umd(Universal Module Definition) 是 AMD 和 CommonJS 的兼容性處理,提出了跨平臺的解決方案。
(function (root, factory) {
if (typeof exports === 'object') {
// commonJS
module.exports = factory();
} else if (typeof define === 'function' && define.amd) {
// AMD
define(factory);
} else {
// 掛載到全局
root.eventUtil = factory();
}
})(this, function () {
function myFunc(){};
return {
foo: myFunc
};
});
應用 UMD 規範的 JS 文件其實就是一個立即執行函數,通過檢驗 JS 環境是否支持 CommonJS 或 AMD 再進行模塊化定義。
六、ES6 Module
CommonJS 和 AMD 規範都只能在運行時確定依賴。而 ES6 在語言層面提出了模塊化方案, ES6 module 模塊編譯時就能確定模塊的依賴關係,以及輸入和輸出的變量。ES6 模塊化這種加載稱爲“編譯時加載”或者靜態加載。
寫法:
// math.js
// 命名導出
export function add(a, b){
return a + b;
}
export function sub(a, b){
return a - b;
}
// 命名導入
import { add, sub } from "./math.js";
add(2, 3);
sub(7, 2);
// 默認導出
export default function foo() {
console.log('foo');
}
// 默認導入
import someModule from "./utils.js";
ES6 模塊的運行機制與 CommonJS 不一樣。JS 引擎對腳本靜態分析的時候,遇到模塊加載命令import,就會生成一個只讀引用。等到腳本真正執行時,再根據這個只讀引用,到被加載的那個模塊裏面去取值。原始值變了,import加載的值也會跟着變。因此,ES6 模塊是動態引用,並且不會緩存值,模塊裏面的變量綁定其所在的模塊。
另,在 webpack 對 ES Module 打包, ES Module 會編譯成 require/exports 來執行的。
總結
JS 的模塊化規範經過了模塊模式、CommonJS、AMD/CMD、ES6 的演進,利用現在常用的 gulp、webpack 打包工具,非常方便我們編寫模塊化代碼。掌握這幾種模塊化規範的區別和聯繫有助於提高代碼的模塊化質量,比如,CommonJS 輸出的是值拷貝,ES6 Module 在靜態代碼解析時輸出只讀接口,AMD 是異步加載,推崇依賴前置,CMD 是依賴就近,延遲執行,在使用到模塊時纔去加載相應的依賴。
@Starbucks 2019/03/10