jquery面向对象编程

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

情景如下：

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

[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控制的：
[css]
#switch .curr .smc { 
    display: block; 
} 
#switch .smc { 
    display: none; 
    overflow: visible; 
} 

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

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

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

[javascript] 
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来判断加载；

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

[javascript]
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(); 
}};