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();