AMD_CMD_RequireJS

題目1: 為什么要使用模塊化?

在JavaScript發(fā)展初期就是為了實現(xiàn)簡單的頁面交互邏輯宁仔,寥寥數(shù)語即可留潦;如今CPU飘言、瀏覽器性能得到了極大的提升衣形,很多頁面邏輯遷移到了客戶端(表單驗證等),隨著web2.0時代的到來姿鸿,Ajax技術(shù)得到廣泛應(yīng)用谆吴,jQuery等前端庫層出不窮,前端代碼日益膨脹

這時候JavaScript作為嵌入式的腳本語言的定位動搖了般妙,JavaScript卻沒有為組織代碼提供任何明顯幫助纪铺,甚至沒有類的概念,更不用說模塊(module)了碟渺,JavaScript極其簡單的代碼組織規(guī)范不足以駕馭如此龐大規(guī)模的代碼鲜锚。

在此背景下突诬,無數(shù)的JSer努力探索,從最初的函數(shù)封裝芜繁,對象封裝旺隙,到如今的模塊化,JavaScript已經(jīng)有了很大進(jìn)步骏令。

題目2: CMD蔬捷、AMD、CommonJS 規(guī)范分別指什么榔袋?有哪些應(yīng)用

  • 第一個模塊化規(guī)范--CommonJS

第一個流行的模塊化規(guī)范卻由服務(wù)器端的JavaScript應(yīng)用帶來周拐,CommonJS規(guī)范是由NodeJS發(fā)揚光大,這標(biāo)志著JavaScript模塊化編程正式登上舞臺凰兑。

1.定義模塊 根據(jù)CommonJS規(guī)范妥粟,一個單獨的文件就是一個模塊。每一個模塊都是一個單獨的作用域吏够,也就是說勾给,在該模塊內(nèi)部定義的變量,無法被其他模塊讀取锅知,除非定義為global對象的屬性

2.模塊輸出: 模塊只有一個出口播急,module.exports對象,我們需要把模塊希望輸出的內(nèi)容放入該對象

3.加載模塊: 加載模塊使用require方法售睹,該方法讀取一個文件并執(zhí)行桩警,返回文件內(nèi)部的module.exports對象

  • AMD
    AMD 即Asynchronous Module Definition,中文名是異步模塊定義的意思侣姆。它是一個在瀏覽器端模塊化開發(fā)的規(guī)范

由于不是JavaScript原生支持生真,使用AMD規(guī)范進(jìn)行頁面開發(fā)需要用到對應(yīng)的庫函數(shù)沉噩,也就是大名鼎鼎RequireJS捺宗,實際上AMD 是 RequireJS 在推廣過程中對模塊定義的規(guī)范化的產(chǎn)出

requireJS主要解決兩個問題

1.多個js文件可能有依賴關(guān)系,被依賴的文件需要早于依賴它的文件加載到瀏覽器

2.js加載的時候瀏覽器會停止頁面渲染川蒙,加載文件越多蚜厉,頁面失去響應(yīng)時間越長

  • CMD

CMD 即Common Module Definition通用模塊定義,CMD規(guī)范是國內(nèi)發(fā)展出來的畜眨,就像AMD有個requireJS昼牛,CMD有個瀏覽器的實現(xiàn)SeaJS,SeaJS要解決的問題和requireJS一樣康聂,只不過在模塊定義方式和模塊加載(可以說運行贰健、解析)時機上有所不同。

1.一個文件一個模塊恬汁,所以經(jīng)常就用文件名作為模塊id

2.CMD推崇依賴就近伶椿,所以一般不在define的參數(shù)中寫依賴,在factory中寫

  • AMD與CMD區(qū)別

最明顯的區(qū)別就是在模塊定義時對依賴的處理不同

1.AMD推崇依賴前置,在定義模塊的時候就要聲明其依賴的模塊

2.CMD推崇就近依賴脊另,只有在用到某個模塊的時候再去require

題目3: 使用 requirejs 完善入門任務(wù)15导狡,包括如下功能:

    1. 首屏大圖為全屏輪播
    1. 有回到頂部功能
    1. 圖片區(qū)使用瀑布流布局(圖片高度不一),下部有加載更多按鈕偎痛,點擊加載更多會加載更多數(shù)據(jù)(數(shù)據(jù)在后端 mock)
    1. 使用 r.js 打包應(yīng)用

圖片輪播1

圖片輪播2

瀑布流布局1

瀑布流布局2

gotop組件

r.js打包文件

效果
demo

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末旱捧,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子踩麦,更是在濱河造成了極大的恐慌枚赡,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件谓谦,死亡現(xiàn)場離奇詭異标锄,居然都是意外死亡,警方通過查閱死者的電腦和手機茁计,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進(jìn)店門料皇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人星压,你說我怎么就攤上這事践剂。” “怎么了娜膘?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵逊脯,是天一觀的道長。 經(jīng)常有香客問我竣贪,道長军洼,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任演怎,我火速辦了婚禮匕争,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘爷耀。我一直安慰自己甘桑,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布歹叮。 她就那樣靜靜地躺著跑杭,像睡著了一般。 火紅的嫁衣襯著肌膚如雪咆耿。 梳的紋絲不亂的頭發(fā)上德谅,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天,我揣著相機與錄音萨螺,去河邊找鬼窄做。 笑死宅荤,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的浸策。 我是一名探鬼主播冯键,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼庸汗!你這毒婦竟也來了惫确?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤蚯舱,失蹤者是張志新(化名)和其女友劉穎改化,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體枉昏,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡陈肛,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了兄裂。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片句旱。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡礁遣,死狀恐怖恃泪,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情碎税,我是刑警寧澤匾南,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布啃匿,位于F島的核電站,受9級特大地震影響蛆楞,放射性物質(zhì)發(fā)生泄漏溯乒。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一豹爹、第九天 我趴在偏房一處隱蔽的房頂上張望裆悄。 院中可真熱鬧,春花似錦帅戒、人聲如沸灯帮。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至迎献,卻和暖如春瞎访,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背吁恍。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工扒秸, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留播演,地道東北人。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓伴奥,卻偏偏與公主長得像写烤,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子拾徙,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,779評論 2 354

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