題目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导狡,包括如下功能:
- 首屏大圖為全屏輪播
- 有回到頂部功能
- 圖片區(qū)使用瀑布流布局(圖片高度不一),下部有加載更多按鈕偎痛,點擊加載更多會加載更多數(shù)據(jù)(數(shù)據(jù)在后端 mock)
- 使用 r.js 打包應(yīng)用
效果
demo