jquery面向对象编程

最近又在搞前端的一些交互，对js面向对象编程又有了一些新的理解;

情景如下：

现在页面中有3个区域：A,B,C;点击不同的tab切换不同的层。看一下HTML代码:

<div class="m" id="switch" data-widget="tabs">
		<div class="fore1 curr" data-widget="tab-item">
			<div class="smt ">A</div>
			<div class="smc" data-widget="tab-content">
			</div>
		</div>		
		<div class="fore2" data-widget="tab-item">
			<div class="smt">B</div>
			<div class="smc" data-widget="tab-content">
			</div>
		</div>
		<div class="fore3 " data-widget="tab-item" >
			<div class="smt">C</div>
			<div class="smc" data-widget="tab-content">
			</div>	
		</div>	
	</div>
</div>

tab内容显示与隐藏，用的样式css控制的：

#switch .curr .smc {
    display: block;
}
#switch .smc {
    display: none;
    overflow: visible;
}

当点击当前的tab时候加上class “curr”；

闲话不说太多，来看看怎么运用面向编程的思想；

由于在层switch中会有很多的交互，我就考虑做一个对象：

var a = {obj:$("#switch"), func:function() {
	var p = a.obj.find(".smt");
	p.bind("click", function() {
		p.parent().removeClass("curr");
		jQuery(this).parent().addClass("curr");
		//A
	    if(jQuery(this).attr("id")=="A"){
		   load();
		}
		//B
		if(jQuery(this).attr("id")=="B"){
		   load();
		}
		//C
		if(jQuery(this).attr("id")=="C"){
		   load();
		}
	})
},init:function() {
	a.func();
}};
a.init();

其中有obj对象，func函数，func简单得实现点击切换隐藏

为了页面的响应速度，区域B,C可能是点击之后才会加载，我们通过识别ID来判断加载；

如果不需要每次点击都加载，可以定义一个属性，第一次点击时候改变值，再次点击判断它的值来决定是否加载

var a = {obj:$("#switch"), func:function() {
	var p = a.obj.find(".smt");
	p.bind("click", function() {
		p.parent().removeClass("curr");
		jQuery(this).parent().addClass("curr");
		//A
	    if(jQuery(this).attr("id")=="A"&&jQuery(this).attr("data-flag")=="1"){
		   load();
		   jQuery(this).attr("data-flag","0");
		}
		//B
		if(jQuery(this).attr("id")=="B"&&jQuery(this).attr("data-flag")=="1"){
		   load();
		   jQuery(this).attr("data-flag","0");
		}
		//C
		if(jQuery(this).attr("id")=="C"&&jQuery(this).attr("data-flag")=="1"){
		   load();
		   jQuery(this).attr("data-flag","0");
		}
	})
},init:function() {
	a.func();
}};

个人博客：mchao blog