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/ 苹享。可以到其git庫的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)隊(duì)使用JS的編寫習(xí)慣拧抖,必須使用模塊化編程煤搜。
2).不太適合團(tuán)隊(duì)目前的情況,多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不同