ECMAScriptjavascript模块化编程(一)

随着嵌入网页的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时候不会报错。
六、输入全局变量
独立性是模块的要害特点,模块内部最好不与程序的另外部分间接互动。
为此为了在模块内部调用全局变量,我们必须显式的把其他变量传入模块。

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

下边的module1模块需要动用jQuery库和YUI库,就把这多少个库(其实是两个模块)当作参数输入module1。这样做除了保证模块的独立性,还使得模块之间的依赖关系变得肯定。
参考文献:阮一峰网络日志