AMD_CMD_RequireJS

题目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，包括如下功能：

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

一、require使用原因：
1.由于加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；2.由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。
require.js的诞生，就是为了解决这两个问题
　（1）实现js文件的异步加载，避免网页失去响应；
　（2）管理模块之间的依赖性，便于代码的编写和维护。
二、require.js的使用
1.是先去官方网站下载最新版本。
下载后，假定把它放在js子目录下面，就可以加载了。
　
2.加载require.js以后，下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js，也放在js目录下面。那么，只需要写成下面这样就行了：
　　
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

页面效果

交互效果.gif