SeaJS是一個遵循CommonJS規(guī)范的JavaScript模塊加載框架,可以實(shí)現(xiàn)JavaScript的模塊化開發(fā)及加載機(jī)制。與jQuery等JavaScript框架不同,SeaJS不會擴(kuò)展封裝語言特性,而只是實(shí)現(xiàn)JavaScript的模塊化及按模塊加載。SeaJS的主要目的是令JavaScript開發(fā)模塊化并可以輕松愉悅進(jìn)行加載,將前端工程師從繁重的JavaScript文件及對象依賴處理中解放出來,可以專注于代碼本身的邏輯。SeaJS可以與jQuery這類框架完美集成。使用SeaJS可以提高JavaScript代碼的可讀性和清晰度,解決目前JavaScript編程中普遍存在的依賴關(guān)系混亂和代碼糾纏等問題,方便代碼的編寫和維護(hù)。
傳統(tǒng)模式 vs SeaJS模塊化
假設(shè)我們現(xiàn)在正在開發(fā)一個Web應(yīng)用TinyApp,我們決定在TinyApp中使用jQuery框架。TinyApp的首頁會用到module1.js,module1.js依賴module2.js和module3.js,同時module3.js依賴module4.js。
- 傳統(tǒng)開發(fā)
使用傳統(tǒng)的開發(fā)方法,此時index.html需要引用module1.js及其所有下層依賴。
隨著項(xiàng)目的進(jìn)行,js文件會越來越多,依賴關(guān)系也會越來越復(fù)雜,使得js代碼和html里的script列表往往變得難以維護(hù)。 - SeaJS模塊化開發(fā)
使用SeaJS實(shí)現(xiàn)相同的功能。首先是index.html:
html頁面不再需要引入所有依賴的js文件,而只是引入一個sea.js,sea.js會處理所有依賴,加載相應(yīng)的js文件,加載策略可以選擇在渲染頁面時一次性加載所有js文件,也可以按需加載(用到時才加載響應(yīng)js)。
SeaJS的特性:
一是html頁面不用再維護(hù)冗長的script標(biāo)簽列表,只要引入一個sea.js即可。
二是js代碼以模塊進(jìn)行組織,各個模塊通過require引入自己依賴的模塊,代碼清晰明了。
下載及安裝
要在項(xiàng)目中使用SeaJS,你所有需要做的準(zhǔn)備工作就是下載sea.js然后放到你項(xiàng)目的某個位置。
SeaJS項(xiàng)目目前托管在GitHub上,主頁為 https://github.com/seajs/seajs/ ??梢缘狡鋑it庫的build目錄下下載sea.js(已壓縮)或sea-debug.js(未壓縮)。
下載完成后放到項(xiàng)目的相應(yīng)位置,然后在頁面中通過<script>標(biāo)簽引入,你就可以使用SeaJS了。
SeaJS的模塊化理念和開發(fā)原則
使用SeaJS開發(fā)JavaScript的基本原則就是:一切皆為模塊。引入SeaJS后,編寫JavaScript代碼就變成了編寫一個又一個模塊,SeaJS中模塊的概念有點(diǎn)類似于面向?qū)ο笾械念悺K可以擁有數(shù)據(jù)和方法,數(shù)據(jù)和方法可以定義為公共或私有,公共數(shù)據(jù)和方法可以供別的模塊調(diào)用。
另外,每個模塊應(yīng)該都定義在一個單獨(dú)js文件中,即一個對應(yīng)一個模塊。
下面介紹模塊的編寫和調(diào)用。
Seajs,一個Web模塊加載框架,追求簡單、自然的代碼書寫和組織方式,:Sea.js 遵循 CMD 規(guī)范,模塊化JS代碼。依賴的自動加載、配置的簡潔清晰,可以讓程序員更多地專注編碼。
優(yōu)缺點(diǎn)
優(yōu)點(diǎn):
1).提高可維護(hù)性。
2).模塊化編程。
3).動態(tài)加載,前端性能優(yōu)化
缺點(diǎn):
1).學(xué)習(xí)文檔偏少且混亂,會更改團(tuán)隊使用JS的編寫習(xí)慣,必須使用模塊化編程。
2).不太適合團(tuán)隊目前的情況,多JS文件但少改動,動態(tài)加載優(yōu)勢和模塊化優(yōu)勢不明顯。
3). 需要配套使用SPM工具,JS的打包和管理工具。
什么是CMD 和AMD ?
異步模塊定義(AMD)是Asynchronous Module Definition的縮寫,是RequireJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。
通用模塊定義(CMD)是Common Module Definition的縮寫,是SeaJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。
RequireJS 和 SeaJS 都是模塊化框架的代表,AMD和CMD,是他們各自定義模塊化的方式,大同小異,主要是代碼風(fēng)格和API不同