模块化编程(1)

总字数 1.1k

预计阅读时间 4 分钟

准备知识

网页中<script>标签

• 如果是src引入一个文件的形式 , 加载这个文件的过程默认是同步的 , 如果引入了多个文件 , 则按照声明的顺序进行加载运行 , 前面的文件尚未加载运行完毕 , 不会加载后面的文件

• 从src所指定的地址获取文件的动作是异步的 , 如果前面有未加载完成的脚本 , 那么该脚本即使已经获取到 , 也不会先加载运行
• 给script标签添加async="async"属性 , 可以指定这个脚本的加载运行以异步方式执行
• 在IE当中 , 使用defer指定异步方式执行脚本

例如 :

<script src="http://localhost:8080/test/demo1.js" ></script>
<script src="http://localhost:8080/test/demo2.js" ></script>

如果不加 defer async=”async” 的情况下 , demo1.js 和 demo2.js 会顺序加载运行 , 假如demo2.js当中有对demo1.js的依赖 , 那么这种情况下不会出现问题

<script src="http://localhost:8080/test/demo1.js" defer async="async"></script>
<script src="http://localhost:8080/test/demo2.js" ></script>

如果demo1.js由于文件庞大 网络不畅等原因加载缓慢 , 我们可以给demo1.js添加异步加载标识
这种情况下 , demo2.js将有可能先于demo1.js加载运行 , 如果存在依赖 , 将有可能报错

---

模块化的实现方式

JS在很长一段时间内不是一种支持模块化编程的语言
虽然ES6正式支持了类和模块 , 在nodejs环境下的模块化编程没有问题
但是能够在浏览器环境中普遍使用还需要很长时间
所以需要采用其他的方法去模拟实现模块化

原始写法

function func1() {
  //...
}
function func2() {
  //...
}

将若干个函数简单堆积在一起 , 可以认为是一个模块
但是这种模式是将这些函数对象作为全局变量
如果函数很多 , 会造成全局变量的污染
与其他模块也可能发生变量的命名冲突问题

对象写法

var module1 = {
  _count : 0,
  up : function(){
    _count ++;
  },
  down : function(){
    _count --;
  }
};

这种写法只讲一个对象作为全局变量 , 一定程度上避免了全局变量的污染
但是这种写法会暴露所有的模块成员 , 无法做到只有模块内部方法能够访问的局部变量

立即执行函数写法

var module1 = (function(){
  var _count = 0;
  return {
    up : function(){
      _count ++;
    },
    down : function(){
      _count --;
    }
  };
})();

这种写法 , 把模块内需要保护的变量作为函数的局部变量 , 在外部无法直接去访问
可以算是相对科学的写法了 , 之后的几种都是对这种写法的改造和扩展

放大模式

如果一个模块需要分成几个部分写在不同的地方 , 或者说一个模块需要去继承另一个模块 , 就需要使用放大模式

var module1 = (function(mod){
  mod.biz = function(){
    console.log("我是另外加入的方法");
  }
  return mod;
})(module1);

宽放大模式

上面的放大模式显然需要保证模块加载的先后顺序
如果传入的module1是undefined , 肯定会报错
然而部署在外网的项目 , 如果严格限制了模块的加载顺序 , 很容易造成页面加载缓慢
为了适应这种情况 , 可以采用宽放大模式

var module1 = (function(mod){
  mod.biz = function(){
    console.log("我是另外加入的方法");
  }
  return mod;
})(module1 || {});

module1模块的两部分都采取这种写法 , 加载的先后就无所谓了
先加载的会在空对象上添加方法

输入全局变量

一个模块最好能够是独立的 , 不与其他模块中的部分直接进行交互
但是如果在模块内需要其他模块产生的对象
可以显式地将这些对象输入到模块内部

比如需要用到jQuery的对象

var module1 = (function($){
  //...
})(jQuery);