模块化

模块化的定义:

模块化就是一个大程序按照功能划分为若干小程序模块，每个小程序模块完成一个确定的功能，并在这些模块之间建立必要的联系，通过模块的互相协作完成整个功能的程序设计方法。

AMD

AMD是”Asynchronous Module Definition”的缩写，即”异步模块定义”。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。

require(['math'], function(math) {

  math.add(2, 3);

})

require.js

requireJS加载模块，采用的是AMD规范。也就是说，模块必须按照AMD规定的方式来写

define(id?, dependencies?, factory);12

CMD

CMD（同步模块定义）是SeaJS在推广过程中对模块定义的规范化产出，SeaJS是CMD这个概念的实现

define(function(require, exports, module) {

  var a = require('./a');

  a.doSomething();

  var b = require('./b');

  b.doSomething();

})

sea.js

sea.js通过sea.use()来加载模块,特点是就近依赖，即哪里用到依赖就在哪里引入，即用即返回。

seajs.use(id, callback?)

common.js

CommonJs规范通过module.exports定义，前端浏览器并不支持，推荐在后端nodeJs中使用
CommonJS定义的模块分为: 模块引用(require) 模块输出(exports) 模块标识(module)
CommonJS是一个更偏向于服务器端的规范。NodeJS采用了这个规范。CommonJS的一个模块就是一个脚本文件。require命令第一次加载该脚本时就会执行整个脚本，然后在内存中生成一个对象。

{

  id: '...',

  exports: { ... },

  loaded: true,

  ...

}

ES6

模块功能主要由两个命令构成：export和import。

export

export命令用于规定模块的对外接口
输出变量:

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

输出函数:

export function multiply(x, y) {
  return x * y;
};

import

import命令用于输入其他模块提供的功能
使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

// main.js
import { firstName, lastName, year } from './profile.js';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}