前端模块化
什么是模块化
将一个复杂的程序按照一定的规范封装成几个块,组合在一起,块的内部数据是私有的,只向外暴露一些接口和其他模块通信
为什么要模块化
- 解决命名冲突
- 解决文件依赖
- 提高代码的可读性和可维护性
- 降低代码耦合度,提高代码的复用性
模块化的发展
最早的时候
全局作用域被污染,很容易命名冲突
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