js模块化

最初的模块化雏形: IIFE 立即执行函数

(function(){
	// code
})()

1.commonjs CJS

• 优点：解决了全局变量污染，依赖的问题
• 缺点：它是同步加载模块，不能解决异步问题

//a.js
module.exports={
	getSum(arr){
		return arr.reduce((cur, per)=>cur+per,0)
	},
	getAverage(arr){
		const sum = arr.reduce((cur, per)=>cur+per,0)
		return sum/arr.length
	}
}
//main.js
const m = require('a.js')
m.getSum([1,2,3,4,5])
m.getAverage([1,2,3,4,5,6,7,8,9])

2.AMD

允许为非同步加载的模块制定回调函数

//语法
define(id, [deps], callback)
require([deps], callback)

// 加载异步模块
define('module',['module1','module2'], (module1, module2)=>{
	let count = 0
	const increase = ()=>{
		count++;
	}
	const decrease = ()=>{
		count--
	}
	return {
		increase,
		decrease
	}
})

require(['module'],(module)=>{
	module.increate()
})

// 加载同步模块
// AMD支持向前兼容的，以提供回调的形式来做require方法动态加载模块
define(require=>{
	const module1 = require('module1')
	const module2 = require('module2')

	let count = 0
	const increase = ()=>{
		count++;
	}
	const decrease = ()=>{
		count--
	}

	exports.increase=increase
	exports.decrease=decrease
})

缺点： 需要加载所有依赖模块

3.UMD

统一兼容AMD和commonjs 断判区分是否为AMD or common

优点：适合在浏览器环境中异步加载模块，同时又已采用common模块

缺点：提高了开发成本，并且不能按需加载，必须提前加载所有依赖

4.CMD

支持按需加载 不需要想CMD那样加载所有模块

5.ESM es module

语法: export import

// a.js
const a = 1;
const b = 2
export const getNumber = ()=>{
	return [a,b]
}
export default {
 	a,
	b
}

// main.js

import AModule,{getNumber} from 'a.js'
getNumber()