【模块化】CommonJS，AMD规范，CMD规范，ES6模块化

1. CommonJS

Node.js基于CommonJS规范应运而生

1.1 commonjs规范语法导出模块

module.exports = { a, b }

1.2 commonjs规范语法引入模块

const mod = require('./导出模块name')

2. AMD 规范

RequireJS 是AMD规范的实现。是js文件和模块的加载器。
在没有单页应用（angular.js，vue.js，react.js），基于路由的形式，一个 index.html主文件，切换路由展示（SPA形式）的环境下使用。
依赖全加载完再执行js，保证依赖没有问题。
有很多自己的语法。
宏观的，先把需要的依赖都加载好，加载费时，开发效率高。

2.1 本地下载并引入第三方库 require.js

// 新建lib文件用来存放第三方下载库，lib/require.js
<script data-main = 'js/main' src = 'lib/require.js' ></script>
// data-main 入口文件

2.2 添加 require.js 配置

require.confing({// 当前模块化解析的基本路径baseUrl: 'js',// 模块的映射paths: {jquery: '../lib/jquery.min', //never includes a '.js' extension since lodash: '../lib/lodash'}
})

2.3 使用ADM规范，定义一个requireJS语法的模块

define(['jquery', 'lodash'], function($,_){// 这里就是RequireJS解决的问题，等【】依赖全加载完，再执行js
})

2.4 使用ADM规范，加载入口requireJS语法的模块

require(['./index'])

3. CMD规范

Sea.js 遵循CMD规范。
可以像Node.js一般书写模块代码，不用记语法。
官网五分钟上手。
微观的，随用随加载，分散开发效率，但不需要加载耗时。

3.1 本地下载并引入第三方库 sea.js
3.2 添加 sea.js 配置
3.3 使用CMD规范，定义一个seajs语法的模块

define(function(require, exports, module){// 通过require引入依赖const $ = reauire('jquery')// 通过 exports 对外提供接口exports.doSomething = ...// 或通过module.exports 提供整个接口module.exports = ...
})

3.4 使用CMD规范，加载入口seajs语法的模块

seajs.use('../js/main')

4. ES6 模块化规范

使用 babel 的插件 babel-cli 把es6转换成浏览器可编译的 es5

4.1 es6 俩种导出模块

// 单独模块导出
export function sum(a,b) {return a+b；
}
export function sub(a,b) {return a-b；
}
// 默认整体导出
const user = {name: 'lisi',age: 18,say: function() {console.log('My name is' + this.name)}
}
export default user

4.1 es6 俩种导入模块

// 单独模块导入
import {sum, sub} from "./math"
// 整体模块导入
import user from "./user"