面向对象编程

2017-03-14  本文已影响24人  jrg_memo

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组件 & 弹窗组件

上一篇下一篇

猜你喜欢

热点阅读