首頁  >  文章  >  web前端  >  SeaJS 與 RequireJS 的差異對比_AngularJS

SeaJS 與 RequireJS 的差異對比_AngularJS

WBOY
WBOY原創
2016-05-16 16:28:191275瀏覽

「歷史不是過去,歷史正在上演。隨著W3C 等規範、以及瀏覽器的飛速發展,前端的模組化開發會逐步成為基礎設施。一切終究都會成為歷史,未來會更好。」——引用玉伯原文最後一段話,我個人也非常認同。既然談到了“未來”,我個人認為:前端 js 模組如果繼續發展,其模組格式很可能會成為未來 WEB 一種標準規範,產生多種實現方式。就好比 JSON 格式一樣,最後成為標準、被瀏覽器原生實作。

誰更有能成為未來的非同步模組標準? SeaJS 遵循 CMD 規範,RequireJS 遵循 AMD 規範,先從這兩種不同的格式說起。

CMD

CMD 模組依賴聲明方式:

複製程式碼 程式碼如下:

define(function (require) {
    var a = require('./a');
    var b = require('./b');
    // more code ..
})

CMD 依賴是就近聲明,透過內部require方法進行聲明。但因為是非同步模組,載入器需要事先載入這些模組,所以模組真正使用前需要擷取模組裡面所有的依賴。無論是加載器即時提取,還是透過自動化工具預先提取,CMD 的這種依賴聲明格式只能透過靜態分析方式實現,這也正是 CMD 的弊端所在。

CMD 規範的弊端

不能直接壓縮:require是局部變量,意味著不能直接的通過壓縮工具進行壓縮,若require這個變數被替換,載入器與自動化工具將無法取得模組的依賴。
模組書寫有額外約定:路徑參數不能進行字串運算,不能使用變數代替,否則載入器與自動化工具無法正確擷取路徑。
規範之外的約定意味著更多的文件說明,除非它們也是規範中的一部分。

註:SeaJS 靜態分析實作是把模組包toString()後使用正規提取require部分得到依賴的模組路徑。

AMD

AMD 模組依賴聲明方式:

複製程式碼 程式碼如下:

define(['./a', './b'], function (a, b) {
    // more code ..
})

AMD 的依賴是提前聲明。這種優勢的好處是依賴無需通過靜態分析,無論是加載器還是自動化工具都可以很直接的獲取到依賴,規範的定義可以更簡單,意味著可能產生更強大的實現,這對加載器與自動化分析工具都是有利的。

AMD 規範的弊端

依賴提前聲明在程式碼書寫上不是那麼友善。
模組內部與 NodeJS 的 Modules 有一定的差異。
關於第二點的問題需要特別說明。其實無論是 CMD 或 AMD 的非同步模組,都無法與同步模組規範保持一致(NodeJS 的 Modules),只有誰比誰更像同步模組而已。 AMD 要轉換為同步模組,除了去掉define函數的包裹外,需要在頭部使用require把依賴聲明好,而 CMD 只需要去掉define函數的包裹即可。

總結

從規範上來說,AMD 更加簡單且嚴謹,適用性更廣,而在 RequireJS 強力的推動下,在國外幾乎成了事實上的非同步模組標準,各大類庫也相繼支持 AMD 規範。

但從 SeaJS 與 CMD 來說,也做了很多好東西:

1、相對自然的依賴宣告風格
2.小​​而美的內部實現
3.貼心的外圍功能設計
4.更好的中文社群支持

如果有可能,我希望看到 SeaJS 也支持 AMD,與前端社區大環境保持一致最終幸福的是廣大開發者。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn