为什么要使用模块化？
- 解决命名冲突
- 实现依赖管理
- 模块的版本管理
- 提高可维护性
- 前端性能优化
- 跨环境共享模块
AMD（Asynchronous Module Definition） 异步模块定义，AMD是采用异步方式加载模块，应用在require.js。
/**
* 书写方式
* require([module], callback);
* 第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。
*/
// 定义module.js
define(['dependencies'],function(){
var name = 'Array';
function printName(){console.log(name)}
return {printName: pirintName}
})
// 加载模块
require(['module'],function(module){
module.printName();
})
CMD（Common Module Definition） 通用模块定义，CMD是按需加载，应用在sea.js。
/**
* 书写方式
* define(factory);
* factory 为函数时，表示是模块的构造方法。执行该构造方法，可以得到模块向外提供的接口。
* factory 方法在执行时，默认会传入三个参数：require、exports 和 module
* require是一个方法，接受模块标识作为唯一参数，用来获取其他模块提供的接口
* exports是一个对象，用来想外提供模块接口
* module是个对象，上面存储了与当前模块相关的属性和方法
*/
// 在a.js中使用模块
define(function(require, exports, module) {
var $ = require('jquery.js');
$.each = function(index, el) {
// 实现代码
};
});
// 在b.js中使用模块
defind(function(require, exports, module){
var util = require('./util.js');
exports.init = function() {
// 实现代码
};
})
Commonjs 是个模块化规范，将javascript语言用于服务器端编程，采用同步加载模块的方式。
/**
* 一个单独的文件就是一个模块，每个模块都是一个单独的作用域，在模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性
* 加载模块 加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象，如果请求的模块不能返回，那么"require"必须抛出一个错误。
* 模块输出 module.exports对象，需要把模块输出的内容放入该对象
*/
// 模块定义 model.js
var name = "jirengu";
function printName(){
console.log(name);
}
function printFullName(firstName){
console.log(firstName + name);
}
module.exports = {
printName: printName;
printFullName: printFullName
}
//加载模块
var nameModule = require("./model.js");
nameModule.printName(); // "jirengu"
nameModule.printFullName("Hello "); // "Hello jirengu"
使用 requirejs 完善任务，包括如下功能：
- 首屏大图为全屏轮播
- 有回到顶部功能
- 图片区使用瀑布流布局（图片高度不一），下部有加载更多按钮，点击加载更多会加载更多数据
- 使用 r.js 打包应用
查看源代码
预览效果
