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