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

补充：web前端 , JavaScript ,