js模块化之路(1)：手写js组件

阅读前需要具备js基础（this，js原型链，继承，立即执行函数等）

关键点：
1.通过立即执行函数，来达到隐藏细节的目的
2.防止污染全局变量
3.代码解耦，提高复用性

下面是三个我总结的组件例子

1. 原生js版：

var myModule = (function(){

    function _myModule(ct){
      this.ct = ct;
      this.init(); //初始化
      this.render(); //渲染
      this.bind(); //绑定事件
    }

    _myModule.prototype = { //定义原型方法
      init: function(){
        this.var1 = 1;
        this.var2 = 2;
      },

      render: function(){
        xxx
      },

      bind: function(){
        xxx
      },

      fn1: function(){
        xxxxxx
      },

      fn2: function(){
        xxxxxx
      }
    }

    return {
      init: function(cts){ 
        cts.forEach(function(ct){
          new _myModule(ct)
        });
      }
    }
})();

//假设页面有多个div.box
myModule.init(document.querySelectorAll('.box'))

2.jQuery版：

var myModule = (function(){

    function _myModule(ct){
      this.ct = ct;
      this.init(); //初始化
      this.render(); //渲染
      this.bind(); //绑定事件
    }

    _myModule.prototype = { //定义原型方法
      init: function(){
        this.var1 = 1;
        this.var2 = 2;
      },

      render: function(){
        xxx
      },

      bind: function(){
        xxx
      },

      fn1: function(){
        xxxxxx
      },

      fn2: function(){
        xxxxxx
      }
    }

    return {
      init: function($ct){ 
        $ct.each(function(index, ct){
          new _myModule($(ct));
        });
      }
    }
})();

//假设页面有多个div.box
myModule.init($('.box'));

3.jQuery插件版：

var myModule = (function(){

    function MyModule(ct){
      this.ct = ct;
      this.init(); //初始化
      this.render(); //渲染
      this.bind(); //绑定事件
    }

    MyModule.prototype = { //定义原型方法
      init: function(){
        this.var1 = 1;
        this.var2 = 2;
      },

      render: function(){
        xxx
      },

      bind: function(){
        xxx
      },

      fn1: function(){
        xxxxxx
      },

      fn2: function(){
        xxxxxx
      }
    }

    return {
      //给jQuery对象添加方法
      init: $.fn.MyModule = function(){
              this.each(function(){
                new myModule($(this));
              });
            }  
    }

})();

//假设页面有多个div.box
$(".box").MyModule();

理解上面三个例子后，
可以做几个实例或者尝试把自己以前做的功能组件化。

附带几个我做的组件化demo，demo中可以看到两个组件互不干扰：
1.轮播组件
点击查看源码

2.懒加载（曝光）组件
点击查看源码

3.Tab组件
点击查看源码

4.日历组件
点击查看源码

5.modal组件
点击查看源码