面向对象编程

OOPObject-oriented programming
理解 一种编程方法
原理 利用Prototype属性的可继承性实现

应用
► tab组件

  ▼ 面向过程---------------------------------------------------------
  $('.tab').on('click',function(){
       var tab = $(this) ;
       var i = $(this).index();

       tab.siblings().removeClass('active');
       tab.addClass('active');

       tab.parents('.item').find('.panel-box').removeClass('active');
       tab.parents('.item').find('.panel-box').eq(i).addClass('active');  
  });

  ▼ 面向对象---------------------------------------------------------
  function Tab(ct){                                 // 构造函数Tab
    this.ct = ct;
    this.init();
    this.bind();
  }
  Tab.prototype.init = function(){                 // 初始化函数
    this.$tab = this.ct.find('.tab');
  };
  Tab.prototype.bind = function(){                 // 绑定事件 

    this.$tab.on('click',function(){
      var tab = $(this) ;
      var i = $(this).index();

      tab.siblings().removeClass('active');
      tab.addClass('active');

      tab.parents('.item').find('.panel-box').removeClass('active');
      tab.parents('.item').find('.panel-box').eq(i).addClass('active');
     });
   };

  new Tab($('.item').eq(0));        
  new Tab($('.item').eq(1));

 过程: 1 将面向过程的各部分功能划分清晰
       2 绑定在构造函数上
       3 绑定在新增加的this上

 问题: 每个新组件都要执行new命令来绑定this，才会生效。如何一次使所有组件生效？   


 ▼ 优化封装---------------------------------------------------------

 举例： var newTab1 = {
                init:function(){ ...... }；
        }
        newTab1.init($('.item'));

 思路： 1 以构造函数的方式，将方法绑定在对象上，只是封装方法
        ► 优点：
                把方法作为对象的属性来绑定，防止全局变量的污染；
                提高代码复用性，扩展性，节省内存；
        ► 缺点：
                对象可获得，可操控，有泄露风险；
        2 需要进一步优化，隐藏方法和变量 => 封装对象

 优化： var newTab2 = (function(){
                return{
                     init:function(ct){ 
                        ct.each(function(index,node){
                            new Tab($(node));
                        }) ;
                      }
                }
        })()
        newTab2.init($('.item'));

 分析： 1 newTab1是一个对象，所有方法只能以属性方式添加
        2 newTab2是一个立即执行函数，结果由return返回，
          方法可以属性方式添加，也可在return内添加 => 隐藏方法和局部变量

同理 menu组件 & crousel组件

►曝光组件Exppsure lazyLoad-Demo

  功能：当一个元素出现在可视范围时，再让此元素做出某种效果
  函数--------------------------------------------------------
  function Exposure ($target,callback){ //参数：元素，回调函数
     this.$target = $target;
     this.init();
     this.bind();
     this.check($node);
   } 
   
  Exposure.prototype.bind = function(){     //给元素绑定滚动事件
    var _this = this;
    $(window).on('scroll',function(){
      _this.check();
    })
  }
  Exposure.prototype.check = function(){    //检查到元素出现，就执行回调函数
    if(this.isShow(this.$target)){
      this.callback(this.$target)
    }
  }   
  Exposure.prototype.isShow = function($node){   //判断元素是否出现
     var scrollH = $(window).scrollTop(),
       winH = $(window).height(),
       top = $node.offset().top,
     if(top < winH + scrollH){
         return true;
     }else{
      return false;
     }
  };
  封装------------------------------------------------------------- 
  var Lazy = (function(){
      return{
          init:function(){...};       // 初始化
          once:function(){...};
      }
  })();
  Lazy.one($('.always'), function($node){   // 调用组件，让不同元素出现相应效果
    $node.text( $node.text() + 'and again');
  });
  Lazy.init($('.container img'), function($img){
    $img.attr('src', $img.attr('data-src'));
  });

  分析：1 用构造函数做出一个公用的曝光功能组件
        2 留出多个接口供不同效果的元素使用（曝光加载图片，曝光加载文字...）

同理 Date组件 & 弹窗组件