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内添加 => 隐藏方法和局部变量
►曝光组件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 留出多个接口供不同效果的元素使用（曝光加载图片，曝光加载文字...）
