1： 为什么要使用模块化？
解决命名冲突；
方便依赖性管理；
提高代码的维护性和可读性；
每个模块都是单独文件，解耦提高代码复用性；
- 模块的由来：
随着网站逐渐的发展，嵌入网页的Javascript代码越来越庞大，而网页越来越像桌面程序，需要一个团队去分工协作，进行管理和测试等等，为了更好的管理网页的业务逻辑，产生了模块化编程的理念。
- 模块的定义：
模块就是实现特定功能的相互独立的一组方法。 - 模块的意义：
有了模块，我们能更好的管理网页的业务逻辑，以及按照自己的需求去使用各种模块，并且可以让每个开发者都能设计自己想要的模块以及去使用别人的模块代码。
2： CMD、AMD、CommonJS 规范分别指什么？有哪些应用
- CommonJS：
CommonJS是服务器模块的规范, Node.js采用了这个规范. 根据CommonJS规范, 一个单独的文件就是一个模块, 每一个模块都是一个单独的作用域, 在一个文件定义的变量(还包括函数和类), 都是私有的, 对其他文件是不可见的；通过require来加载模块；通过modul.exports来暴露模块中的内容；
CommonJS规范加载模块是同步的, 也就是说, 只有加载完成后, 才能执行后面的操作. - AMD
AMD 即Asynchronous Module Definition，中文名是“异步模块定义”的意思。它是一个在浏览器端模块化开发的规范
模块将被异步加载，模块加载不影响后面语句的运行。所有依赖某些模块的语句均放置在回调函数中。
AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出。
AMD规范其实只有一个主要接口 define(id,dependencies,factory)，它要在声明模块的时候指定所有的依赖dependencies，并且还要当做形参传到factory中，对于依赖的模块提前执行，依赖前置。 - CMD
CMD 即Common Module Definition通用模块定义，是sea.js在推广过程中对模块定义的规范化产出。SeaJS要解决的问题和requireJS一样，只不过在模块定义方式和模块加载时机上有所不同。CMD是按需加载依赖就近,只有在用到某个模块的时候再去require，AMD是依赖关系前置,在定义模块的时候就要声明其依赖的模块
//AMD 规范
/**
* define(id?, dependencies?, factory);
*
* define(['dep1', 'dep2'], function(dep1, dep2){
* return funciton() {};
* });
*/
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
....
b.doSomething()
...
})
define(function () {
var exports = {};
exprots.sayHello = function () {
alert('Hello from module:' + module.id);
};
return exports;
});
**************************************************************************
//CMD 规范
/**
* define(function(require, exports, module){
* return funciton() {};
* });
* require是可以把其他模块导入进来的一个参数;
* exports可以把模块内的一些属性和方法导出;
* module 是一个对象，上面存储了与当前模块相关联的一些属性和方法。
* 在需要依赖模块时，随时调用require() 引入即可
*/
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
......
var b = require('./b')
// 依赖可以就近书写 b.doSomething()
// ...
})
**************************************************************************
//commonJs 规范
/**
* 在模块中，通过require()方法来引入外部的模块。
* 上下文提供了exports 对象用于暴露当前模块的方法和变量， 并且是唯一的出口。
* 在模块中存在一个module对象，它代表模块自身，exports是module的属性。
*/
//example.js
var invisible = function () {
console.log("invisible");
}
exports.message = "hi";
exports.say = function () {
console.log(message);
}
//运行下面的命令，可以输出exports对象。
var example = require('./example.js');
example
// {
// message: "hi",
// say: [Function]
// }
3： 使用 requirejs 完善入门任务15，包括如下功能：
1. 首屏大图为全屏轮播
2. 有回到顶部功能
3. 图片区使用瀑布流布局（图片高度不一），下部有加载更多按钮，点击加载更多会加载更多数据(数据在后端 mock)
4. 使用 r.js 打包应用
4：RequireJS
RequireJS入门（一）
RequireJS入门（二）
RequireJS入门（三）
RequireJS进阶（一）
RequireJS进阶（二）
RequireJS进阶（三）
网友评论