Seajs的學(xué)習(xí)筆記

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不同

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末谋作,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子壁晒,更是在濱河造成了極大的恐慌瓷们,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件秒咐,死亡現(xiàn)場離奇詭異谬晕,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)携取,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進(jìn)店門攒钳,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人雷滋,你說我怎么就攤上這事不撑。” “怎么了晤斩?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵焕檬,是天一觀的道長。 經(jīng)常有香客問我澳泵,道長实愚,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮腊敲,結(jié)果婚禮上击喂,老公的妹妹穿的比我還像新娘。我一直安慰自己碰辅,他們只是感情好懂昂,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著没宾,像睡著了一般凌彬。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上榕吼,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天饿序,我揣著相機(jī)與錄音,去河邊找鬼羹蚣。 笑死原探,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的顽素。 我是一名探鬼主播咽弦,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼胁出!你這毒婦竟也來了型型?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤全蝶,失蹤者是張志新(化名)和其女友劉穎闹蒜,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體抑淫,經(jīng)...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡绷落,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了始苇。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片砌烁。...
    茶點(diǎn)故事閱讀 40,096評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖催式,靈堂內(nèi)的尸體忽然破棺而出函喉,到底是詐尸還是另有隱情,我是刑警寧澤荣月,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布恕汇,位于F島的核電站无宿,受9級特大地震影響废离,放射性物質(zhì)發(fā)生泄漏呻袭。R本人自食惡果不足惜顿天,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一堂氯、第九天 我趴在偏房一處隱蔽的房頂上張望蔑担。 院中可真熱鬧,春花似錦咽白、人聲如沸啤握。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽排抬。三九已至,卻和暖如春授段,著一層夾襖步出監(jiān)牢的瞬間蹲蒲,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工侵贵, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留届搁,地道東北人。 一個月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓窍育,卻偏偏與公主長得像卡睦,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子漱抓,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,037評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 模塊通常是指編程語言所提供的代碼組織機(jī)制表锻,利用此機(jī)制可將程序拆解為獨(dú)立且通用的代碼單元。所謂模塊化主要是解決代碼分...
    MapleLeafFall閱讀 1,170評論 0 0
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,167評論 25 707
  • 什么是模塊化開發(fā)乞娄? 前端開發(fā)中瞬逊,起初只要在script標(biāo)簽中嵌入幾十上百行代碼就能實(shí)現(xiàn)一些基本的交互效果,后來js...
    半世韶華憶闌珊閱讀 654評論 0 0
  • 版權(quán)聲明:本文為博主原創(chuàng)文章骚腥,未經(jīng)博主允許不得轉(zhuǎn)載。 webpack介紹和使用 一瓶逃、webpack介紹 1束铭、由來 ...
    it筱竹閱讀 11,137評論 0 21
  • 12月10日心理咨詢師論文答辯補(bǔ)考。從第一次浩浩蕩蕩的隊(duì)伍厢绝,到這次只身一人契沫,這些時間一直也沒有看書,一心在《尋找奇...
    尚靈心閱讀 494評論 7 13