浅谈前端模块化

前端模块化

什么是模块化

将一个复杂的程序按照一定的规范封装成几个块，组合在一起，块的内部数据是私有的，只向外暴露一些接口和其他模块通信

为什么要模块化

1. 解决命名冲突
2. 解决文件依赖
3. 提高代码的可读性和可维护性
4. 降低代码耦合度，提高代码的复用性

模块化的发展

最早的时候

全局作用域被污染，很容易命名冲突

var a = 10;
function a(){
	...
}
function b(){
	...
}

简单封装

将变量封装到对象中，减少了全局作用域中的变量数目

但是不安全，可以通过对象修改属性

var obj = {
	a: 10,
	fun: function(){
		...
	}
}

匿名闭包

模块过多时，一个页面需要引入多个js文件，请求过多，模块之间的依赖模糊，难以维护

(function(win,$){
	let a = 10;
	function fun(){
		console.log(a)
	}
	win.fun = fun
})(window,jQuery)

fun()			//10

常用模块化规范

• CommonJS
• AMD
• CMD
• ES6