20170623-CommonJS AMD CMD -CSDN博客

1.模块与模块化开发

模块：实现特定功能的一组方法
模块化开发：随着浏览器性能的提升，相关技术的进步，前端项目变得越来越复杂。为了提高开发效率，人们将特定功能的方法/代码放在一起，构成模块，方便在开发过程中复用，但是出现了很多问题：全局变量的使用冲突，函数命名冲突，依赖关系管理困难。为了解决上述问题，制定了一些方法和规范来解决上述问题——CommonJS、AMD、CMD

2.CommonJS

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

//模块定义 myModel.js

var name = 'Byron';

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();
// 在myModel模块外部是无法获取其内部定义的变量name

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

3.AMD

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

使用

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

define(id?, dependencies?, factory);

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

加载和使用模块：

require([module], callback);

1.[module]，是一个数组，指定了要加载的模块

2.callback，是加载成功之后的回调函数

例子：

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

console.log()的执行和模块的加载执行是异步的，当模块加载完毕，并且当前页面所有代码执行完毕后才会执行回调函数。

测试

// html
<body>
  <script data-main="main" src="require.js"></script>
</body>

//main.js
require(['sayName', 'sayAge', 'sayTime'], function(sayName, sayAge,sayTime){
  alert('加载成功！！')
})
alert('hahaha')


// sayName.js
define(function(p){
  alert('xin')
})

// sayAge.js
define(['jquery'],function($){
  alert('22')
})

// sayTime.js
define(function(){
  alert(Date.now())
})

结果：依次弹出：hahaha, xin, 1498193441948, 22, 加载成功!!
请求后的html文件

各种文件的加载顺序

总结：
- 通过上面的例子，可以看到RequireJS会动态的创建异步脚本去加载各种依赖模块，加载顺序和声明模块时指定依赖模块的顺序有关。
- 脚本加载完毕后会立即执行，并不能保证这些脚本执行顺序。
- 一个模块依赖的所有模块都加载完毕后，该模块的回调函数才会被执行。
- main模块中，require中的回调函数会在main中所有脚本执行完毕并且其依赖的所有模块都加载完毕后才会被调用。

4.CMD

CMD即 Common Module Definition，中文为通用模块定义，它是一个在浏览器端模块化开发的规范
Sea.js是遵循AMD规范的一个JavaScript文件和模块的加载器
Sea.js推荐一个模块一个文件

使用

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

define(id?, dependencies?, factory);

//例子
define(function(require, exports, module) {

  // 通过 require 引入依赖
  var $ = require('jquery');
  var Spinning = require('./spinning');

  // 通过 exports 对外提供接口
  exports.doSomething = ...

  // 或者通过 module.exports 提供整个接口
  module.exports = ...

});

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

测试

//html
<body>
  <script src="sea.js"></script>
  <script>
    seajs.use('main')
  </script>
</body>

// main.js
define(function(require, exports, module) {
  alert('aaa')

  var sayName = require('sayName')
  sayName()
  var date = new Date()
　// 50s后再执行require('sayAge')
  while(Date.now()-date<50000){}
  var sayAge = require('sayAge')
  sayAge()
});

// sayName.js
define(function(require, exports, module) {
  module.exports = function(){
    alert('xin')
  }
});

// sayAge.js
define(function(require, exports, module) {
  module.exports = function(){
    alert('22')
  }
});

结果：依次弹出：aaa, xin ,(50秒后输出)22

　结果分析：

通过上面的时间图可以看出,尽管在main.js中，var sayAge = require('sayAge')被延迟了(大约)50s才执行，但是sayAge.js的加载却没有收到影响(sayAge.js在200多ms的时候就加载完毕了)，只是sayAge的执行被延迟了(大约)50s。
通过上述实验可以得到以下结论：seajs会分析依赖哪些模块，然后加载这些模块，加载完成后先不执行，当使用require语句的时候，才执行对应的模块，模块的执行顺序和书写顺序是完全一致的

AMD和CMD

模块定义时对依赖的处理不同：
- AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块
- CMD推崇就近依赖，只有在用到某个模块的时候再去require
依赖模块加载的过程以及依赖模块执行的时机不同：
- AMD依赖前置，js可以方便知道依赖模块是谁，立即加载并执行，所有依赖模块都加载执行完后会进入require的回调函数，执行主逻辑，这样的效果就是依赖模块的执行顺序和书写顺序不一定一致
- CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块，然后加载这些模块，加载完成后先不执行，当使用require语句的时候，才执行对应的模块，模块的执行顺序和书写顺序是完全一致的
模块的加载都是异步的