JS模块化编程（一）

• 需求背景

// 实际开发常需要将一些公用方法打包放在一个js文件，写法大致如下
    function f1(){
        // ...
    }
    function f2(){
        // ...
    }

function f3(){
        // ...
    }
// 上面的函数f1()\f2()\f3()...,组成一个模块;使用时直接调用就行;

So,问题来了
污染了全局变量; 无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系;

程序猿经过深思熟虑，决定适当优化，于是对象写法诞生了

• 对象写法

// 把模块写成一个对象,所有的模块成员都放到这个对象里面;
  var myobj = new Object({
    _count:0,
    f1:function(){
      // ...
    },
    f2:function(){
      // ...
    },

   f3:function(){

　　//....

   }
  });
// 上面的函数f1()\f2()\f3(),都封装在myobj对象里;使用时直接调用这个对象的属性;
  myobj.f1();

随着程序猿们写了无数的js，突然发现自己写的代码就像一个赤裸裸的女人，被人一览无余，肆意践踏，不够含蓄，不够深沉，不够帅...

myobj._count = -1;//可以随意修改这个属性

So,问题来了

我们应把重要的东西隐藏起来，包裹起来，穿上衣服

• 立即执行函数写法：JavaScript模块的基本写法

var myobj = (function(){
    var _mimi = 2;
    var f1 = function(){
      // ...
    };
    var f2 = function(){
     //...
    };
    return {
      f1:f1,
      f2:f2
    };
  })();
// 使用上面的写法,外部代码无法读取内部的_mimi变量;
  console.info(myobj._mimi); // undefined;

时间如梭，程序猿慢慢变老了，万恶的资本家不给升职加薪，只好苦逼一天有一天...，程序依旧...

身体也慢慢变肥了，爱屋及乌，遇到特大程序模块，深恶痛绝，一定要减肥...

• JS放大模式

// 如果模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用"放大模式";
  var myobj = (function(depend){
    depend.f4 = function(){
      // ...
    };
    return depend;
  })(denpend);
// 上面的代码为depend模块添加了一个新方法f4(),然后返回新的depend模块;

 

TMD,减肥过度了，把身体都搞出问题，

• JS宽放大模式

// 放大模式的写法,有可能加载一个不存在的空对象,这时就要采用"宽放大模式";
  var myobj= (function(dep){
    // ...
    return dep;
  })(dep || {});
// 与"放大模式"相比,"宽放大模式"就是"立即执行函数"的参数可以是空对象;

模块化js得以广泛应用，越来越得意，所有的对象变量都应遵循这一思想...

• 传入全局变量

// 封装是模块的重要特点,模块内部最好与程序的其他部分是隔离的，不直接发生关系;
// 为了在模块内部调用全局变量,必须显式地将其他变量输入模块;
  var myobj = (function($,YUI){
    // ...
  })(jQuery,YAHOO);
// 上面的module模块需要使用jQuery库和YUI库,就把这两个库(其实是两个模块)当作参数输入myobj;
// 这样做除了保证模块的独立性,还使得模块之间的依赖关系变得明显;