【模块化】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 俩种导出模块

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

俩种导入模块

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

4.2 避免导入命名冲突
4.2.1 导入重命名

import {hello as helloFromA, str as strFromA} from './moduleA'
import {hello as helloFromB, str as strFromB} from './moduleB'

helloFromA()

4.2.2 创建模块对象

import * as A from './moduleA'
import * as B from './moduleB'

A.hello()

4.3 默认导入导出

1. 默认导出允许一个模块指定一个（最多一个）默认的导出项。
2. 每个模块最多有一个默认导出，因此默认导出无需关注导入项的原始名称，并且无需使用 {}
3. 默认导入时无需关注导入项的名称，所以默认导出支持匿名内容。例如匿名函数

默认导出

export default function hello() {
	console.log('moduleA')
}

export default function () {
	console.log('moduleB')
}

默认导入

import h from './moduleA'