题目1： 为什么要使用模块化？
- 最主要的目的：
1.解决命名冲突
2.依赖管理- 其他价值：
1.提高代码可读性
2.代码解耦和，提高复用性
参考：前端模块化开发的价值
题目2： CMD、AMD、CommonJS 规范分别指什么？有哪些应用
- CMD（Common Module Definition）
更贴近 CommonJS Modules/1.1 和 Node Modules 规范，一个模块就是一个文件；它推崇依赖就近，想什么时候 require就什么时候加载；它也没有全局 require， 每个API都简单纯粹 。代码的书写格式如下：
define(factory);factory 为函数时，表示是模块的构造方法。执行该构造方法，可以得到模块向外提供的接口。factory 方法在执行时，默认会传入三个参数：require、exports 和 module。
function(require,exports,module)
require： 是一个方法,用来获取其他模块提供的接口
exports：是一个对象,用来向外提供模块接口
module： 是一个对象,上面存储了与当前模块相关联的一些属性和方法
对于CMD，有代表性的是SeaJS，官网：seajs.org/docs/
//eg:
//math.js
define(function(require, exports, module) {
exports.add = function() {
var sum = 0, i = 0, args = arguments, l = args.length;
while (i < l) {
sum += args[i++];
}
return sum;
};
});
//increment.js
define(function(require, exports, module) {
var add = require('math').add;
exports.increment = function(val) {
return add(val, 1);
};
});
//program.js
define(function(require, exports, module) {
var inc = require('increment').increment;
var a = 1;
inc(a); // 2
module.id == "program";
});
- AMD (Asynchronous Module Definition, 异步模块定义) 指定一种机制，在该机制下模块和依赖可以异步加载。这对浏览器端的异步加载尤其适用。
它是依赖前置 (依赖必须一开始就写好)会先尽早地执行(依赖)模块。换句话说，所有的require都被提前执行（require 可以是全局或局部 ）。
AMD规范只定义了一个函数 define，它是全局变量。用法：
defind(id, dependencies, factory)
id: 定义中模块的名字，可选；如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字。。
dependencies：是一个当前模块依赖的，已被模块定义的模块标识的数组字面量。 依赖参数是可选的，如果忽略此参数，它应该默认为["require", "exports", "module"]。然而，如果工厂方法的长度属性小于3，加载器会选择以函数的长度属性指定的参数个数调用工厂方法。
factory：模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。
//示例:
define('modal', ['jQuery', 'dialog'], function($, Dialog){
$('.modal').show();
Dialog.open();
});
- CommonJS是服务器端模块的规范，Node.js采用了这个规范。Node.JS首先采用了js模块化的概念。
在一个模块中，存在一个自由的变量”require”，它是一个函数。
这个”require”函数接收一个模块标识符。
“require”返回外部模块所输出的API。
如果出现依赖闭环(dependency cycle)，那么外部模块在被它的传递依赖（transitive dependencies）所require的时候可能并没有执行完成；在这种情况下，”require”返回的对象必须至少包含此外部模块在调用require函数（会进入当前模块执行环境）之前就已经准备完毕的输出。
如果请求的模块不能返回，那么”require”必须抛出一个错误。
在一个模块中，会存在一个名为”exports”的自由变量，它是一个对象，模块可以在执行的时候把自身的API加入到其中。
模块必须使用”exports”对象来做为输出的唯一表示。
//示例:
//math.js
exports.add = function() {
var sum = 0, i = 0, args = arguments, l = args.length;
while (i < l) {
sum += args[i++];
}
return sum;
};
//increment.js
var add = require('math').add;
exports.increment = function(val) {
return add(val, 1);
};
//program.js
var inc = require('increment').increment;
var a = 1;
inc(a);
// 2
题目3： 使用 requirejs 完善入门任务15，包括如下功能：
- 首屏大图为全屏轮播
- 有回到顶部功能
- 图片区使用瀑布流布局（图片高度不一），下部有加载更多按钮，点击加载更多会加载更多数据(数据在后端 mock)
- 使用 r.js 打包应用
一、require使用原因：
1.由于加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；2.由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。
require.js的诞生，就是为了解决这两个问题
（1）实现js文件的异步加载，避免网页失去响应；
（2）管理模块之间的依赖性，便于代码的编写和维护。
二、require.js的使用
1.是先去官方网站下载最新版本。
下载后，假定把它放在js子目录下面，就可以加载了。
<script src="js/require.js"></script>
2.加载require.js以后，下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js，也放在js目录下面。那么，只需要写成下面这样就行了：
<script src="js/require.js" data-main="js/main"></script>
data-main属性的作用：指定网页程序的主模块（整个网页的入口代码）。
在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。
3.主模块的写法：
主模块依赖于其他模块，这时就要使用AMD规范定义的的require()函数。
// main.js
requirejs.config({
baseUrl:"js/dist", //相对于被引用的页面的路径，次例为调用页面和js平级
paths:{//相对于baseUrl的路径，
"jquery":"jquery-2.1.4",
"carouse":"../app/carouse",
"waterfalls":"../app/waterfalls"
}
});
require(['jquery', 'carouse', 'waterfalls'], function ($, carouse, waterfalls){
// some code here
});
4.要加载的模块文件写法为：
define(mo,[依赖],funciton(){
//to do code...
})
//mo为模块名字，一般不写，依赖为可选参数
三、r.js压缩
r.js是一个打包工具，主要是与requirejs配合对模块化后的开发进行打包压缩，因为模块化的写法会导致多个http的请求并产生性能影响，因此在发布上线前要进行文件的压缩合并。
r.js的运行需要node环境和git
1.下载r.js
npm install requirejs//会附送r.js
2.设置配置文件，文件名为build.js
({
baseUrl:"../../dist",//相对于build.js，入口文件main.js所在的路径
paths:{//相对于baseUrl的路径，
"jquery":"jquery-2.1.4",
"carouse":"../app/carouse",
"waterfalls":"../app/waterfalls"
},
name:"main",name为需要打包压缩js文件的入口文件名字
out:"../../dist/merge.js"//out为压缩完成后输出的文件名字
})
3.使用git，在r.js所在目录下执行node r.js -o build.js
4.改变require.js的 data-main, 使用压缩的merge.js
<script src="js/require.js" data-main="js/merge"></script>
