題目1： 為什么要使用模塊化？
- 解決命名沖突
- 依賴管理
- 提高代碼可讀性
- 代碼解耦持际，提高復用性
題目2： CMD沃琅、AMD、CommonJS 規(guī)范分別指什么蜘欲？有哪些應用
AMD：
是”Asynchronous Module Definition”的縮寫益眉，意思就是”異步模塊定義”。采用異步方式加載模塊姥份，模塊的加載不影響它后面語句的運行郭脂。所有依賴這個模塊的語句，都定義在一個回調函數中澈歉，等到加載完成之后展鸡，這個回調函數才會運行。
語法：define(id, dependences, factory);-
CommonJS：
用于服務器端模塊化埃难，有一個全局性方法require()莹弊，用于加載模塊。
語法：require(dependences) // 加載依賴模塊 exports.factory = function(){ // ...}; // 使用”exports”對象來做為輸出的唯一表示涡尘。 -
CMD：
CMD（Common Module Definition）是 SeaJS推廣過程中產生的忍弛。和AMD不同的是，它并不是異步加載考抄，而是松散加載细疚，只有當需要加載模塊的時候，再用require方法引用模塊川梅。
語法：define(factory);// CMD // math.js define(function(requires, exports, module) { exports.add = function(x, y) { return x + y; }; }); // inc.js define(function(requires, exports, module) { var add = require('math').add; exports.inc = function(val) { return add(val, 1); }; }); // program.js define(function(require, exports, module) { var inc = require('inc').inc; var a = 1; inc(a); // 2 module.id = "program"; }); -
require.js：
// 加載模塊設置 requirejs.config({ baseUrl: 'js/libs', // 指明模塊的默認路徑 paths: { 'jquery': 'jquery.min', // 每個模塊都是JS文件疯兼，即HTTP請求多 'underscore': 'underscore.min', // 可以用require.js的優(yōu)化工具合并模塊 'backbone': 'backbone.min', 'jquery.scroll': 'jquery.scroll.min' 'xxx': 'https://xxx.com/libs/xxx/1.7.2/xxx.min' } shim: { // 為非規(guī)范的模塊定義特征，接受配置對象 'underscore': { exports: '_' // exports為外部調用模塊時所用的名稱 }, 'backbone': { deps: ['underscore', 'jquery'], // deps數組表明模塊的依賴性 exports: 'Backbone' }, 'jquery.scroll': { deps: ['jquery'], exports: 'jQuery.fn.scroll' } } }); // 加載AMD模塊挑势，并用回調函數操作 requirejs(['jquery', 'underscore', 'backbone'], function($, _, Backbone) { //... }); // 寫AMD模塊 // 1. 不依賴其他模塊镇防，例如：math.js define(function() { var add = function(x, y) { return x + y; }; return { add: add }; }); // 2. 依賴其他模塊啦鸣，需指明依賴數組 define(['mylib'], function(mylib) { function foo() { mylib.doSomething(); } return { foo: foo }; }); // require.js提供了一些插件 //1. domready插件潮饱，回調函數在頁面DOM結構加載完成時運行 require(['domready!'], function(doc) { //... }); //2. text和image插件，允許require.js加載文件和圖片文件 define(['text!review.txt', 'image!dog.jpg'], function(review, dog) { console.log(review); document.body.appendChild(dog); }); // 3. 類似的插件還有json和mdown诫给，加載json文件和markdown文件 -
實例
?
創(chuàng)建html文件香拉，引入require.js庫啦扬，設置data-main屬性：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js" data-main="main"></script> </body> </html>在html目錄下新建js文件夾，創(chuàng)建main.js：
// main.js require(['starting']); console.log("starting");starting.js：
//starting.js define(['inc'],function(inc){ console.log(inc.getRes()); inc.add1(); console.log(inc.getRes()); inc.add1(); console.log(inc.getRes()); });inc.js：
// inc.js define(function() { var a = 0; var inc = { add1: function() { return a++; }, getRes: function() { return a; } }; return inc; });
題目3： 使用 requirejs 完善入門任務15凫碌，包括如下功能：
1. 首屏大圖為全屏輪播
2. 有回到頂部功能
3. 圖片區(qū)使用瀑布流布局（圖片高度不一）扑毡，下部有加載更多按鈕，點擊加載更多會加載更多數據(數據在后端 mock)
4. 使用 r.js 打包應用
