AMD_CMD_RequireJS

题目1： 为什么要使用模块化？

• 可以解决命名冲突
• 管理依赖
• 提高代码的可读性
• 代码解耦，提高代码的复用性

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

CommonJS

• CommonJS是起源于服务器端模块化开发的规范
• 定义模块：一个单独的文件就是一个模块，每一个模块都是一个单独的作用域（在- 模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性）
• 模块输出：模块只有一个出口 module.exports 对象，需要将模块希望输出的内容放在该对象中
• 加载模块：加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的 module.exports 对象

//模块定义 myModel.js

var name = 'Clark';

function printName(){
    console.log(name);
}

function printFullName(firstName){
    console.log(firstName + name);
}

module.exports = {
    printName: printName,
    printFullName: printFullName
}

//加载模块

var nameModule = require('./myModel.js');

nameModule.printName();

• 问题：加载模块和操作模块提供的变量和方法是同步的(上面第二段代码)，即操作模块提供的变量和方法必须得等到加载模块完成后才可以执行。在服务器端，所有的模块(js文件)都放在硬盘中，因此模块的加载速度很快。但是在浏览器端，加载模块需要向服务器发送请求，会受到网络的影响。如果模块的加载需要等很长时间，浏览器就会处于“假死”状态。因此CommonJS只适用于服务器端，并不适用于浏览器端。

AMD

• AMD即 Asynchronous Module Definition，中文名为异步模块定义。它是一个在浏览器端模块化开发的规范
• 使用AMD规范进行开发需要使用RequireJS
• requireJS主要解决两个问题:
  js文件之间的依赖关系：被依赖的文件需要早于依赖它的文件加载到浏览器
  js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长

使用
定义模块：requireJS定义了一个函数 define，它是全局变量，用来定义模块

define(id?, dependencies?, factory);

• id：可选参数，用来定义模块的标识，如果没有提供该参数，默认为该模块对应的脚本文件名（去掉拓展名）
• dependencies：是一个当前模块依赖的模块名称数组
• factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值

加载和使用模块：

require([module], callback);

• [module]，是一个数组，指定了要加载的模块
• callback，是加载成功之后的回调函数

例子：

require(['math'], function (math) {
  math.add(2, 3);
});
console.log('hello world');

console.log()的执行和模块的加载是异步的，不会因为等待模块的加载而使浏览器“假死”

CMD

• CMD即 Common Module Definition，中文为通用模块定义，它是一个在浏览器端模块化开发的规范
• 使用CMD规范进行开发需要使用SeaJS
• Sea.js推荐一个模块一个文件

使用

定义模块：requireJS定义了一个函数 define，它是全局变量，用来定义模块

define(id?, dependencies?, factory);

• id：可选(推荐不写，默认为文件名)，用来定义模块的标识，通常用文件名作为模块id
• dependencies：可选(推荐不写)，是一个当前模块依赖的模块名称数组(因为CMD推崇依赖就近，因此一般不在此处指定)
• factory：
  1.function(require, exports, module)
  2.require(id):require 是一个方法，接受模块标识作为唯一参数，用来获取其他模块提供的接口
  3.exports 是一个对象，用来向外提供模块接口
  4.module 是一个对象，上面存储了与当前模块相关联的一些属性和方法

加载模块

seajs.use([module], callback);

• [module]，是一个数组，指定了要加载的模块
• callback，是加载成功之后的回调函数

seajs.use(['./a', './b'], function(a, b) {
  a.doSomething();
  b.doSomething();
});

AMD和CMD

• 模块定义时对依赖的处理不同：
  AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块
  CMD推崇就近依赖，只有在用到某个模块的时候再去require
• 对依赖模块的执行时机处理不同（同第一点，换种表述方式）：
  AMD依赖前置，js可以方便知道依赖模块是谁，立即加载
  CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块
• 模块的加载都是异步的
• SeaJS和RequireJS可以完成相同的功能

预览
代码地址
后端数据mock成功