JavaScript的模塊系統詳解(三)

這是JavaScript模塊系列的最後一篇，介紹AMD。

爲什麼？

AMD全稱是Asynchronous Module Defintion，或者叫異步模塊規範。它和CommonJS的最大區別就是AMD支持異步模塊加載，有利於瀏覽器端應用的用戶體驗，它對異步加載的實現完全符合開發人員使用傳統閉包的習慣：

//Calling define with a dependency array and a factory function
define(['dep1', 'dep2'], function (dep1, dep2) {

    //Define the module value by returning a value.
    return function () {};
});

// Or:
define(function (require) {
    var dep1 = require('dep1'),
        dep2 = require('dep2');

    return function () {};
});

通過define函數，AMD模塊系統能夠定義當前模塊的功能和依賴，對於那些無相互依賴的模塊可以同步加載。

特點

• 異步加載
• 支持循環依賴
• 兼容require和exports
• 集成了依賴管理
• 可以將各模塊分別定義在不同的文件
• 支持插件機制，可以在加載過程中進行定製化控制

缺點

• 需要額外加載模塊系統（可以通過預編譯解決）
• 不適合進行靜態分析

具體實現

當前最流行的兩個AMD實現是require.js和Dojo。使用require.js非常簡單，直接在HTML文件中引入，並設置data-main屬性，定義JavaScript執行的入口。

---

推薦文章

JavaScript的模塊系統詳解(一)
JavaScript的模塊系統詳解(二)
世界編程語言排行榜