為什么要使用模塊化？
隨著網站功能逐漸豐富，網頁中的js也變得越來越復雜和臃腫，原有通過script標簽來導入一個個的js文件這種方式已經不能滿足現在互聯網開發模式，我們需要團隊協作、模塊復用、單元測試等等一系列復雜的需求。
- 解決命名沖突
- 依賴管理
- 提高代碼可讀性
- 代碼解耦提高復用性
CMD、AMD、CommonJS 規范分別指什么？有哪些應用
- CommonJS
模塊必須通過 module.exports導出對外的變量或接口，通過require()來導入其他模塊的輸出到當前模塊。
服務器端的Node.js遵循CommonJS規范。CommonJS是同步加載模塊，傳統CommonJS模塊在瀏覽器環境中無法正常加載。
// moduleA.js
module.exports = function( value ){
return value * 2;
}
// moduleB.js
var multiplyBy2 = require('./moduleA');
var result = multiplyBy2(4);
- AMD
require.js加載的模塊采用AMD規范。
適合在瀏覽器環境異步加載
并行加載多個模塊
如果一個模塊不依賴其他模塊，那么可以直接定義在define()函數之中。
// math.js
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
加載方法如下：
// main.js
require(['math'], function (math){
alert(math.add(1,1));
});
如果這個模塊還依賴其他模塊，將其寫在一個數組里
當require()函數加載下面這個模塊的時候，就會先加載myLib.js文件。
define(['myLib'], function(myLib){
function foo(){
myLib.doSomething();
}
return {
foo : foo
};
});
AMD 是 RequireJS 在推廣過程中對模塊定義的規范化產出。
推崇依賴前置。
- CMD規范
CMD 是 SeaJS 在推廣過程中對模塊定義的規范化產出。
推崇依賴就近，只有在用到某個模塊的時候再去require
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
...
var b = require('./b')
b.doSomething()
...
})
參考
使用 requirejs 完善入門任務15，包括如下功能：
- 首屏大圖為全屏輪播
- 有回到頂部功能
- 圖片區使用瀑布流布局（圖片高度不一），下部有加載更多按鈕，點擊加載更多會加載更多數據(數據在后端 mock)
4.（可選）. 使用 r.js 打包應用
