关于模块化（AMD_CMD_RequireJS）

为什么要使用模块化？

• 解决命名冲突
• 实现依赖管理
• 模块的版本管理
• 提高可维护性
• 前端性能优化
• 跨环境共享模块

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 完善任务，包括如下功能：

1. 首屏大图为全屏轮播
2. 有回到顶部功能
3. 图片区使用瀑布流布局（图片高度不一），下部有加载更多按钮，点击加载更多会加载更多数据
4. 使用 r.js 打包应用
   查看源代码
   预览效果