模块化

为什么要使用模块化？

• 解决命名冲突
• 依赖管理
• 模块的版本管理。通过别名等配置，配合构建工具，可以比较轻松地实现模块的版本管理。
• 提高代码可维护性和可读性
• 前端性能优化
• 可以很方便实现模块的跨服务器和浏览器共享

---

CMD、AMD、CommonJS 规范分别指什么？有哪些应用

CommonJs

CommonJS是服务器端模块的规范，Node.js采用了这个规范并首先采用了js模块化的概念。
根据CommonJS规范，一个单独的文件就是一个模块。加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。

//add.js
exports.add = function(){...};

//calculate.js
var cc = require('add');
exports.add = function(n){
   return cc.add(val,n);
};

然而CommonJS规范并不适用于浏览器端,由于浏览器端的瓶颈在于带宽/网络,
如果客户端同步加载一个个文件，然后执行，那么就会出现假死情况
因此诞生了AMD，CMD，异步模块加载机制

CMD（Common Module Definition）

CMD是SeaJS 在推广过程中对模块定义的规范化产出
与AMD的不同在于, AMD推崇依赖前置会在一开始加载好所有需要的模块,而CMD则推崇依赖就近,当需要时才加载

//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;  //需要用到math时加载模块
  exports.increment = function(val) {
    return add(val, 1);
  };
});

AMD (Asynchronous Module Definition, 异步模块定义)

AMD属于依赖前置，把项目中需要用到的依赖提前声明，等获取之后执行callback

//创建文件check_amd.js, 定义模块
define(['check'], function(){
    var flag = true;
    function check(){
        return flag;
    }
    return {
        check: check
    };
});

//在需要用到的页面加载模块
require(['check_amd'], function (check){
    if(check.check()){
        console.log("哈哈哈");
    }
});

---

使用 requirejs 完善入门任务15，包括如下功能：

1. 首屏大图为全屏轮播
2. 有回到顶部功能
3. 图片区使用瀑布流布局（图片高度不一），下部有加载更多按钮，点击加载更多会加载更多数据(数据在后端 mock)
4. 使用 r.js 打包应用

预览链接
代码地址