題目1: 為什么要使用模塊化?
- 解決命令沖突
- 依賴管理
- 代碼解耦,提高代碼的重用性
- 提高代碼的可讀性
參考
題目2: CMD、AMD、CommonJS 規范分別指什么?有哪些應用
這是針對如果不在服務器的環境下去加載模塊,而是在瀏覽器中去向服務器去要模塊去加載,就要采用異步加載的方式,所以就有AMD ,CMD解決方案。
- CMD規范:
(Common Module definition)通用模塊定義。這個是在SeaJs在推廣過程中對于模塊定義的規范化產出,意思就是SeaJs在推廣過程中,重新對模塊化進行了定義。
語法:
define(id?dependencies?factory);//id,dependenicies可以省略,不然就跟AMD一樣了。
通常在factory中是傳入function,且function的參數固定:
格式:function(require,exports,module){
//require是請求的模塊名,用來獲取其他模塊提供的模塊名。
//exports是對外輸出的模塊接口
//module是存儲當前模塊相關的屬性和方法
}
注意點:記得要加載requireJS文件。不然不行的。
demo:
//定義模塊index.js
define(function(require,exports,module){
var $=require('jquery.js');
$('div').remove();
a={ name: 'clc', sayName:function(){
console.log(this.name);}
}
//錯誤的寫法 //exports.a=a;//index.js這個模塊的輸出口
exports.a=a.sayName(); //index.js這個模塊的輸出口
)
//加載在clc.js,就是在clc.js模塊中加載index.js模塊
//錯誤的寫法 // defind(funciton(require,exports,module){
//var komo=require('index.js').a //請求index.js這個模塊。
//komo.sayName(); //結果:clc
//}
defind(funciton(require,exports,module){
var komo=require('index.js') //請求index.js這個模塊,并調用index.js中的a.sayName(),輸出 clc;
}
或是直接加載: 下面的方法沒有驗證過,懷疑。先注釋,等實驗過在去注釋
// seajs.use(['index.js'],function(my){
//在這里my是等于index.js模塊中的a。故可以直接調用下面的方法
// my.sayName() //結果: clc
//})
- AMD規范:
(Asynchronous Module Definiton)異步模塊定義。這個是在RequireJs在推廣過程中所形成的模塊化的定義方法,簡稱規范。
demo:
//定義模塊mymodule.js
define([dependencies],function () {
var name = 'komo';
function sayName() {
console.log('my name', name);
}
return {
sayName: sayName
}
})
//加載模塊
require(['./mymodule.js'], function (my) {
my.sayName();
})
AMD、CMD區別:
1 . AMD是推崇依賴前置,在定義模塊的時候就要聲明其依賴的模塊。就是你在定義一個新的模塊的時候,會使用到什么模塊,你都要提前依賴好。
2 . CMD是推崇就近依賴,只有在用到某個模塊的時候再去依賴,通過require來進行依賴。就是要你要什么模塊,你就require你要的模塊就好了。
- CommonJS規范:是運行在服務器端的規范,Nodejs采用這個規范。其加載模塊是同步的,只有加載完成之后才能執行下一個操作。而由于所有的文件是在服務器上的,所以加載起來比較快,不用考慮異步加載的方式。
其具體指的是:
定義模塊:一個單獨的文件就是一個模塊。每一個模塊就是一個單獨的作用域,換一句話說:在該模塊定義的變量是無法被別的模塊所讀取的,除非將這個變量定義為全局變量,也就是定義為global對象的屬性。
模塊輸出:模塊就是一個出口,module.exports對象,我們將需要模塊輸出的內容放入到該對象中去。就是module.exports=模塊的內容
-
加載模塊:加載模塊使用require方法,require方法讀取一個文件并執行,返回文件內部的module.exports對象,就是require(xxx),是調用require()去調用xxx文件并執行,同時因為xxx文件中有module.exports對象,則在返回。
demo:index.js文件
var komo={ name: 'clc', sayName:funciton(){ console.log("this name is:",this. name}
module.exports=komo;
調用文件:x.js
var a=require(index.js) ;//require(index.js)
//var a;
a.sayName() ------>輸出this name is clc;
題目3: 使用 requirejs 完善入門任務15,包括如下功能: 首屏大圖為全屏輪播
有回到頂部功能
圖片區使用瀑布流布局(圖片高度不一),下部有加載更多按鈕,點擊加載更多會加載更多數據(數據在后端 mock)
-
使用 r.js 打包應用
預覽 額,要在mock中使用才行。
后端mock的demo
r.js
ps: 看見有人用新浪的接口。。等等去試試看。在鏈接。0 .0
小demo,新浪的