ECMAScriptJavascript模块化编制程序(1):模块的写法

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

作者: 阮一峰

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

随着网址逐步形成”互连网应用程序“,嵌入网页的Javascript代码更粗大,越来越复杂。

 

网页越来越像桌面程序,要求五个团伙分工同盟、进程管理、单元测试等等……开拓者不得不采用软件工程的章程,管理网页的事体逻辑。

Javascript模块化编制程序,已经成为一个亟待化解的急需。理想图景下,开辟者只须要达成基本的事情逻辑,其余都能够加载外人已经写好的模块。

只是,Javascript不是1种模块化编制程序语言,它不帮忙”“(class),更遑论”模块”(module)了。(正在制订中的ECMAScript标准第陆版,将业内接济”类”和”模块”,但还亟需相当长日子才能投入实用。)

Javascript社区做了多数努力,在存活的运作环境中,完结”模块”的功效。本文化总同盟结了当下"Javascript模块化编制程序"的最棒实行,表明怎么着投入实用。尽管那不是初级教程,但是假使稍稍领悟Javascript的中央语法,就能看懂。

 

1、原始写法

模块便是贯彻特定成效的壹组方法。

假定把不相同的函数(以及记录状态的变量)轻松地坐落一同,就到底一个模块。

  function m1(){
    //…
  }

  function m2(){
    //…
  }

地方的函数m一()和m贰(),组成二个模块。使用的时候,直接调用就行了。

那种做法的毛病很驾驭:”污染”了全局变量,不也许确定保障不与其余模块爆发变量名争论,而且模块成员之间看不出直接关系。

贰、对象写法

为了消除地方的缺点,能够把模块写成2个对象,全数的模块成员都停放这一个目的里面。

  var module1 = new Object({

    _count : 0,

    m1 : function (){
      //…
    },

    m2 : function (){
      //…
    }

  });

上边的函数m一()和m二(),都封装在module一对象里。使用的时候,正是调用这一个指标的性质。

  module1.m1();

而是,那样的写法会揭示全数模块成员,内部景观可以被外表改写。比如,外部代码可以直接改变内部计数器的值。

  module1._count = 5;

3、即刻施行函数写法

使用”随即奉行函数“(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模块的着力写法。上边,再对那种写法举行加工。

四、放大情势

借使2个模块相当大,必须分成多少个部分,或然一个模块供给再而三另贰个模块,那时就有必要运用”放大情势”(augmentation)。

  var module1 = (function (mod){

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

    return mod;

  })(module1);

上边的代码为module1模块增多了贰个新章程m三(),然后再次回到新的module1模块。

5、宽放大方式(Loose augmentation)

在浏览器环境中,模块的逐条部分常见都以从网上获取的,有时无法知道哪些部分会先加载。如若采纳上①节的写法,第二个实行的有的有相当大只怕加载一个不存在空对象,那时就要选取”宽放大形式”。

  var module1 = ( function (mod){

    //…

    return mod;

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

与”放大方式”比较,"宽放大情势"便是”登时实践函数”的参数能够是空对象。

6、输入全局变量

独立性是模块的要紧特征,模块内部最佳不与程序的别的部分直接互动。

为了在模块内部调用全局变量,必须显式地将其他变量输入模块。

  var module1 = (function ($, YAHOO) {

    //…

  })(jQuery, YAHOO);

上边的module一模块供给利用jQuery库和YUI库,就把那三个库(其实是多个模块)当作参数输入module一。那样做除了保障模块的独立性,还使得模块之间的信赖关系变得领会。那上头越多的座谈,参见Ben
Cherry的盛名小说《JavaScript Module Pattern:
In-Depth》

本条类别的第贰有的,将探讨什么在浏览器环境公司分裂的模块、管理模块之间的正视性。

(完)