SeaJS 與 RequireJS 的差異對比
“歷史不是過去,歷史正在上演。隨著 W3C 等規(guī)范、以及瀏覽器的飛速發(fā)展,前端的模塊化開發(fā)會逐步成為基礎(chǔ)設(shè)施。一切終究都會成為歷史,未來會更好?!薄糜癫淖詈笠欢卧?,我個人也非常贊同。既然談到了“未來”,我個人認為:前端 js 模塊如果繼續(xù)發(fā)展,其模塊格式很可能會成為未來 WEB 一種標準規(guī)范,產(chǎn)生多種實現(xiàn)方式。就好比 JSON 格式一樣,最終成為標準、被瀏覽器原生實現(xiàn)。
誰更有能成為未來的異步模塊標準?SeaJS 遵循 CMD 規(guī)范,RequireJS 遵循 AMD 規(guī)范,先從這兩種不同的格式說起。
CMD
CMD 模塊依賴聲明方式:
define(function (require) {
var a = require('./a');
var b = require('./b');
// more code ..
})
CMD 依賴是就近聲明,通過內(nèi)部require方法進行聲明。但是因為是異步模塊,加載器需要提前加載這些模塊,所以模塊真正使用前需要提取模塊里面所有的依賴。無論是加載器即時提取,還是通過自動化工具預(yù)先提取,CMD 的這種依賴聲明格式只能通過靜態(tài)分析方式實現(xiàn),這也正是 CMD 的弊端所在。
CMD 規(guī)范的弊端
不能直接壓縮:require是局部變量,意味著不能直接的通過壓縮工具進行壓縮,若require這個變量被替換,加載器與自動化工具將無法獲取模塊的依賴。
模塊書寫有額外約定:路徑參數(shù)不能進行字符串運算,不能使用變量代替,否則加載器與自動化工具無法正確提取路徑。
規(guī)范之外的約定意味著更多的文檔說明,除非它們也是規(guī)范中的一部分。
注:SeaJS 靜態(tài)分析實現(xiàn)是把模塊包toString()后使用正則提取require部分得到依賴的模塊路徑。
AMD
AMD 模塊依賴聲明方式:
define(['./a', './b'], function (a, b) {
// more code ..
})
AMD 的依賴是提前聲明。這種優(yōu)勢的好處就是依賴無需通過靜態(tài)分析,無論是加載器還是自動化工具都可以很直接的獲取到依賴,規(guī)范的定義可以更簡單,意味著可能產(chǎn)生更強大的實現(xiàn),這對加載器與自動化分析工具都是有利的。
AMD 規(guī)范的弊端
依賴提前聲明在代碼書寫上不是那么友好。
模塊內(nèi)部與 NodeJS 的 Modules 有一定的差異。
關(guān)于第二點的問題需要特別說明下。其實無論是 CMD 還是 AMD 的異步模塊,都無法與同步模塊規(guī)范保持一致(NodeJS 的 Modules),只有誰比誰更像同步模塊而已。AMD 要轉(zhuǎn)換為同步模塊,除了去掉define函數(shù)的包裹外,需要在頭部使用require把依賴聲明好,而 CMD 只需要去掉define函數(shù)的包裹即可。
總結(jié)
從規(guī)范上來說,AMD 更加簡單且嚴謹,適用性更廣,而在 RequireJS 強力的推動下,在國外幾乎成了事實上的異步模塊標準,各大類庫也相繼支持 AMD 規(guī)范。
但從 SeaJS 與 CMD 來說,也做了很多不錯東西:
1、相對自然的依賴聲明風(fēng)格
2、小而美的內(nèi)部實現(xiàn)
3、貼心的外圍功能設(shè)計
4、更好的中文社區(qū)支持
如果有可能,我希望看到 SeaJS 也支持 AMD,與前端社區(qū)大環(huán)境保持一致最終幸福的是廣大開發(fā)者。
相關(guān)文章
AngularJS基礎(chǔ) ng-include 指令簡單示例
本文主要介紹AngularJS ng-include 指令,這里對ng-include的基本知識做了整理,并附有代碼實例,有需要的朋友可以參考下2016-08-08簡介可以自動完成UI的AngularJS工具angular-smarty
這篇文章主要介紹了簡介可以自動完成UI的AngularJS工具angular-smarty,包括其中隔離作用域綁定指令符和promise的使用,需要的朋友可以參考下2015-06-06angular中實現(xiàn)控制器之間傳遞參數(shù)的方式
本篇文章主要介紹了angular中實現(xiàn)控制器之間傳遞參數(shù)的方式,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-04-04Angular 4.0學(xué)習(xí)教程之架構(gòu)詳解
作為一種大受歡迎的Web應(yīng)用程序框架,Angular終于迎來了版本4.0,下面這篇文章主要給大家介紹了關(guān)于Angular 4.0學(xué)習(xí)教程之架構(gòu)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考借鑒,下面來一起看看吧。2017-09-09Angular.js中用ng-repeat-start實現(xiàn)自定義顯示
大家都知道Angular.js可以用ng-repeat來顯示列表數(shù)據(jù),可是如果想要自定義顯示數(shù)據(jù)列表的話ng-repeat就實現(xiàn)不了了,這個時候可以利用ng-repeat-start 和 ng-repeat-end來實現(xiàn),下面通過本文來詳細看看實現(xiàn)的方法吧。2016-10-10