什么是模块化
将一个复杂的程序依据一定的规则规范封装成几个块文件,并进行组合在一起。
内部数据与实现是私有的,只是向外暴露一些接口方法与外部其他模块通信。
模块化的进程
1.全局function模式-把不同的功能封装成不同的全局函数
2.命名空间模式-基于简单的对象封装,
劣势:数据不安全,外部可以直接修改模块内部的数据;所有成员都暴露在外;
let obj = {
data: '',
func1: () => {},
func2: () => () {},
}
obj.data = 'aaa';
obj.func1();
3.匿名函数自执行方式(闭包)
向window对象上添加全局属性,也有的把这种方法叫做添加命名空间,目的是向外暴露接口,其实这种方式很好,方法是私有的,只能通过外部接口来小左,但是多个模块有依赖关系的时候就不好办了。
<script type="text/javascript>
(function(win) {
function func1() {
// ...
}
function func2() {
// ...
}
// 向外暴露方法,es6的写法
win.myMethods = {func1, func2};
})(window)
</script>
4.匿名函数的模式增加:向入口传入依赖的模块
<script type="text/javascript>
(function(a, b) {
b(a);
})(window, function(window){
window.jQuery = jQuery;
function jQuery(){};
})
</script>
const var module1 = (function(m) {
m.add = (a, b) => {
return a+b;
}
return m;
})(window.module1 || {})
劣势:这种方式引入的js文件、模块必须要有一定的先后顺序,否则会报错(各种undefined)
模块化的好处
- 避免命名冲突(减少命名空间污染)
- 更好的分离,按需加载
- 更高的复用性,更高的可维护性
引入多个script后出现的问题
引入多个script之后,会不可避免的出现引用交叉。
- 请求过多
- 依赖会乱掉,就所谓的依赖模糊
- 难以维护,因为各种调用,依赖都交织在一起了。
这就导致真正意义上的模块化的出现,也就是后来的Common.js, AMD, ES6, CMD.