web前端模块化(一)—前言

发表于 更新于 分类于 阅读次数：
本文字数： 1.2k 阅读时长 ≈ 2 分钟

什么是模块化

将一个复杂的程序依据一定的规则规范封装成几个块文件，并进行组合在一起。
内部数据与实现是私有的，只是向外暴露一些接口方法与外部其他模块通信。

模块化的进程

1.全局function模式-把不同的功能封装成不同的全局函数

2.命名空间模式-基于简单的对象封装,
劣势：数据不安全，外部可以直接修改模块内部的数据;所有成员都暴露在外；

1
2
3
4
5
6
7
8
let obj = {
  data: '',
  func1: () => {},
  func2: () => () {},
}

obj.data = 'aaa';
obj.func1();

3.匿名函数自执行方式（闭包）
向window对象上添加全局属性，也有的把这种方法叫做添加命名空间，目的是向外暴露接口，其实这种方式很好，方法是私有的，只能通过外部接口来小左，但是多个模块有依赖关系的时候就不好办了。

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript>
(function(win) {
  function func1() {
    // ...
  }
  function func2() {
    // ...
  }
  // 向外暴露方法，es6的写法
  win.myMethods = {func1, func2};
})(window)
</script>

4.匿名函数的模式增加：向入口传入依赖的模块

1
2
3
4
5
6
7
8
<script type="text/javascript>
(function(a, b) {
  b(a);
})(window, function(window){
  window.jQuery = jQuery;
  function jQuery(){};
})
</script>
1
2
3
4
5
6
const var module1 = (function(m) {
  m.add = (a, b) => {
    return a+b;
  }
  return m;
})(window.module1 || {})

劣势：这种方式引入的js文件、模块必须要有一定的先后顺序，否则会报错（各种undefined）

模块化的好处

  1. 避免命名冲突（减少命名空间污染）
  2. 更好的分离，按需加载
  3. 更高的复用性，更高的可维护性

引入多个script后出现的问题

引入多个script之后，会不可避免的出现引用交叉。

  • 请求过多
  • 依赖会乱掉，就所谓的依赖模糊
  • 难以维护，因为各种调用，依赖都交织在一起了。

这就导致真正意义上的模块化的出现，也就是后来的Common.js, AMD, ES6, CMD.

-------------本文结束&感谢您的阅读-------------
相关文章