Javascript模块化编程(一):模块的写法

Javascript模块化编程(一):模块的写法

作者: 阮一峰

初稿链接:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html

乘网站逐渐改为”互联网应用程序”,嵌入网页的Javascript代码越来越粗大,越来越复杂。

 

网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测试等等……开发者不得不用软件工程的不二法门,管理网页的业务逻辑。

Javascript模块化编程,已经改成一个急功近利的要求。理想状态下,开发者只待贯彻中心之工作逻辑,其他还好加载别人就写好之模块。

而是,Javascript不是一模一样种植模块化编程语言,它不支持”类”(class),更遑论”模块”(module)了。(正在制订中的ECMAScript标准第六版本,将规范支持”类”和”模块”,但还欲格外丰富时才会投入实用。)

Javascript社区举行了累累使劲,在现有的运转环境被,实现”模块”的效果。本文总结了脚下"Javascript模块化编程"的顶尖实践,说明如何投入实用。虽然当时不是初级教程,但是倘若稍加粗了解Javascript的为主语法,就会看懂。

 

同等、原始写法

模块就是促成特定功能的一律组方法。

倘将不同的函数(以及记录状态的变量)简单地坐落一块儿,就到底一个模块。

  function m1(){
    //…
  }

  function m2(){
    //…
  }

地方的函数m1()和m2(),组成一个模块。使用的上,直接调用就执行了。

这种做法的缺陷很显:”污染”了全局变量,无法保证不与外模块出变量名闯,而且模块成员之内看不起直接涉及。

亚、对象写法

为化解者的弱点,可以拿模块写成一个对象,所有的模块成员都坐这个目标中。

  var module1 = new Object({

    _count : 0,

    m1 : function (){
      //…
    },

    m2 : function (){
      //…
    }

  });

地方的函数m1()和m2(),都封闭装在module1对象里。使用的早晚,就是调用这个目标的习性。

  module1.m1();

可,这样的写法会暴露所有模块成员,内部状态可以给外表改写。比如,外部代码可以一直改动中计数器的价值。

  module1._count = 5;

老三、立即施行函数写法

使用”立马施行函数”(Immediately-Invoked
Function Expression,IIFE),可以达标不露个人成员的目的。

  var module1 = (function(){

    var _count = 0;

    var m1 = function(){
      //…
    };

    var m2 = function(){
      //…
    };

    return {
      m1 : m1,
      m2 : m2
    };

  })();

采取方面的写法,外部代码无法读取内部的_count变量。

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

module1就是Javascript模块的骨干写法。下面,再针对这种写法进行加工。

季、放大模式

只要一个模块很死,必须分成几单有,或者一个模块需要连续另一个模块,这时就发出必不可少采取”放大模式”(augmentation)。

  var module1 = (function (mod){

    mod.m3 = function () {
      //…
    };

    return mod;

  })(module1);

方的代码为module1模块添加了一个新措施m3(),然后回到新的module1模块。

五、宽放大模式(Loose augmentation)

以浏览器环境遭受,模块的依次组成部分常见都是于网上取的,有时无法知道谁部分会先行加载。如果以上一致节省的写法,第一只实施之片来或加载一个免存在空对象,这时就要动用”宽放大模式”。

  var module1 = ( function (mod){

    //…

    return mod;

  })(window.module1 || {});

及”放大模式”相比,"宽放大模式"就是”立即施行函数”的参数可以是拖欠对象。

六、输入全局变量

独立性是模块的根本特色,模块内部尽不跟程序的任何组成部分直接互动。

以以模块内部调用全局变量,必须显式地拿其余变量输入模块。

  var module1 = (function ($, YAHOO) {

    //…

  })(jQuery, YAHOO);

上面的module1模块需要以jQuery库和YUI库,就管当下片个仓库(其实是简单个模块)当作参数输入module1。这样做除了确保模块的独立性,还令模块之间的依关系转移得显然。这地方又多的讨论,参见Ben
Cherry的名牌文章《JavaScript Module Pattern:
In-Depth》。

其一系列的老二组成部分,将讨论哪些当浏览器环境集团不同的模块、管理模块之间的赖。

(完)