前端模块化：匿名闭包、CommonJS、ES6模块化

ES5时，用匿名函数实现的模块化

通过将代码放在闭包当中，使得命名不会冲突，每一个js文件都成为独立的模块。需要复用代码时，将闭包中的结构返回到全局作用域即可，通过模块名.方法/属性的方法使用。

// a.js
;
var moduleA = (function(){
	var flag = true
	function sum(a, b) {
		return a + b
	}
	return {
		flag,
		sum
	}
})()

CommonJS中的模块化

// 导出
// 文件a.js
function sum(a, b) {
	return a + b
}
var flag = true
module.exports = {
	sum,
	flag
}

// 导入
// 文件b.js
var {sum, flag} = require('a.js')

ES6中的模块化

// 文件a.js
// 导出
// 方式一
var name = 'wang'
var age = 18
function say() {
	console.log('hello')
}
export {name, age, say}

// 文件a.js
// 导出
// 方式二
export var name = 'wang'
export var age = 18
export function say() {
	console.log('hello')
}

// 方式一、二作用相同

// 文件a.js
// 导出
// 方式三
export default function say() {
	console.log('hello')
}
// 这种导出方式，只能默认导出一个

// 情况一、二下的导入
import {name, age, say} from './a.js'

// 情况三下的导入
import fun from './a.js'
// 因为是默认导出且只有一个，因此fun必定是函数say，不必再解构

// 通用情况的导入
import * as a from './a.js'
// 将所有的导出，打包到a中
// 使用时，通过a去访问
a.say();

参考文章