當(dāng)前有以下幾種JavaScript模塊化開(kāi)發(fā)方式：
- <script>標(biāo)簽
- CommonJS
- AMD and 其他
- ES6 modules
- ...
<script>標(biāo)簽
<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>
<script src="module3.js"></script>
不同模塊接口導(dǎo)出通過(guò)修改全局變量奸汇。例如添加到window變量上。
這種方式的缺點(diǎn)：
- 全局變量沖突
- 依賴文件按序加載
- 開(kāi)發(fā)者需要關(guān)心不同模塊之間的依賴關(guān)系
- 項(xiàng)目較大時(shí)椎木，管理很困難
CommonJs:同步加載require
require("module");
require("../file.js");
exports.doStuff = function() {};
module.exports = someValue;
該方式：定義一個(gè)同步require方法邦投，加載依賴醉冤，同時(shí)返回需要導(dǎo)出接口。
eg. node.js
優(yōu)點(diǎn)
- 服務(wù)端模塊可以復(fù)用
- 已經(jīng)有很多npm包
- 使用很簡(jiǎn)單
缺點(diǎn)
- 不太適用于瀏覽器端：由于模塊都放在服務(wù)器端，對(duì)于瀏覽器僧凤，必須等待依賴模塊加載完成豆巨，才能執(zhí)行后續(xù)代碼剩辟。等待時(shí)間取決于網(wǎng)速的快慢，可能要等很長(zhǎng)時(shí)間往扔，瀏覽器處于“假死”狀態(tài)贩猎。
AMD:異步加載require
require(["module", "../file"], function(module, file) { /* ... */ });
define("mymodule", ["dep1", "dep2"], function(d1, d2) {
return someExportedValue;
});
優(yōu)點(diǎn)
- 適用于瀏覽器端
- 多模塊并行加載
缺點(diǎn)
- 有一定的編碼開(kāi)銷
- 可讀性較差，寫(xiě)起來(lái)也麻煩
ES6模塊
import "jquery";
export function doStuff() {}
module "localModule" {}
優(yōu)點(diǎn)
- 未來(lái)ES的發(fā)展趨勢(shì)
- 靜態(tài)分析比較容易
缺點(diǎn)
- 瀏覽器原生支持尚需時(shí)日
- 模塊還比較少
