乘胜嵌入网页的javascript代码越来越复杂,网页越来越像桌面程序,需要一个团分工协作、进度管理、单元测试等等……开发者不得不以软件工程的艺术,管理网页的事情逻辑。
Javascript模块化编程,已经变成一个归心似箭的求。理想图景下,开发者只需要实现基本之事情逻辑,其他还可以加载别人就勾勒好之模块。但是,Javascript不是同种植模块化编程语言,它不支持”类”(class),更遑论”模块”(module)了。(正在制订中之ECMAScript标准第六本,将业内支持”类”和”模块”,但尚需特别丰富时才能够投入实用。)
Javascript社区召开了森奋力,在存活的运作环境受到,实现”模块”的效益。
以下是模块化编程的演化路径
平等、原始写法
最简易的写法就是将不同的函数放在同算一个模块

function m1(){
    //do sthing
}
function m2(){
    //do sthing
}

点的m1,m2组成一个模块。使用的时一直开展调用。
欠点老显:“污染”全局变量,无法确保非跟另模块的变量称呼中发生冲突。而且无法见到模块成员之内的关系。
亚、对象写法
为缓解上述问题,可以管模块成员还放一个目标中,一个模块就是一个靶

var module1 = {
    _count : 0,
    m1 : function (){
      //do sthing
    },
    m2 : function (){
      //do sthing
    }
  };

地方的函数m1,m2和变量_count都封闭装在module1对象被。使用的时光就调用这个目标的属性

module1.m1();

不过这种方式的一个题材即是拿目标被拥有的模块成员还暴露了出来,内部状态好被外表状态改写。比如:

module._count=5;

其三、立即执行函数的写法
以化解上述问题,我们使用当即执行函数的写法,能够达成不暴露模块成员的目的。

  var module1 = (function(){
    var _count = 0;
    var m1 = function(){
      //...
    };
    var m2 = function(){
      //...
    };
    return {
      m1 : m1,
      m2 : m2
    };
  })();

以方面的写法,外部代码无法读取到里头的_count变量

console.log(module1._count);   //undefined

原因:立是以当时实施函数的返回值是m1:m1,m2:m2,并从未用_countreturn出来。那么实际上module1是一个目标,对象被起半点只点子,如图:

Paste_Image.png

所以外部为是能够读取到m2的,如图:

Paste_Image.png

module1就是Javascript模块的主干写法
module1就是Javascript模块的中坚写法
module1就是Javascript模块的基本写法
要害的业务说其三通
下,我们针对这种写法进一步的加工

四、放大模式

如若一个模块很非常,需要分成几个组成部分。或者一个模块需要继续另一个模块,这时便产生必不可少运用“放大模式”

  var module1 = (function (mod){
    mod.m3 = function () {
      //...
    };
    return mod;
  })(module1);

上面代码为module1模块添加了一个初的办法m3,然后回一个初的module1模块
五、宽放大模式
以浏览器环境遭受,模块的次第组成部分常见还是打网上取之,有时无法掌握哪个部分会事先加载。如果用上平等节的写法,第一个实施之部分来或加载一个非存空对象,这时就要采取”宽放大模式”。

  var module1 = ( function (mod){
    //...
    return mod;
  })(window.module1 || {});

以及”放大模式”相比,"宽放大模式"就是”立即执行函数”的参数可以是空对象。
作用:开展保底。不多招一个拖欠对象的讲话,那么module1的价值有或出现undefined,调用module1.XXX时会报错。进行保底之后module1的价值最不济就是沾一个拖欠对象{},在调用module1.XXX时刻不会见报错。
六、输入全局变量
独立性是模块的严重性特点,模块内部尽不与程序的另有直接互动。
就此为了以模块内部调用全局变量,我们须显式的将其余变量jQuery传入模块。

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

点的module1模块需要利用jQuery库和YUI库,就管当下有限个仓库(其实是鲜单模块)当作参数输入module1。这样做除了确保模块的独立性,还教模块之间的依靠关系转移得明白。
参考文献:阮一峰网络日志

相关文章

网站地图xml地图