js命名空间写法

很早知道这种写法，由于基础面向对象不够扎实一直在回避，但是面对整站这种方法还是有必要会

<div id="div1">111</div>
    <div id="div2">现实</div>
    <div id="div3">层</div>
    <div class="tab">
        <ul class="tab_nav clearfix">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>

        <div class="tab_main">
            <div style="display: block">内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>

css

#div1{width: 100px;height: 100px;background: #ccc;}
    #div2{width:100px;height: 20px;background: red;}
    #div3{width: 300px;height: 200px;border: 1px solid #ccc;position: absolute;;margin-left: -150px;margin-top:-100px;left:50%;top: 50%;display: none;}
    li{width: 100px;float: left;background: #ccc;}
    .active{background: red;}
    .tab_main{display: none;}
    .clearfix:after{clear: both;display: table;content:'';}
    .cleafix{zoom:1;}

js

var namespace={
            int:function(){
                this.hide.hideFun();
                this.show.showFun();
                this.tab.tabFun();
            }
        };
        namespace.hide={
            hideBtn:$('#div1'),
            hideFun:function() {
                var that=this;
                var a=this.hideBtn;
                a.click(function() {
                    $(this).hide();
                });
            }
        };
        namespace.show={
            showBtn:$('#div2'),
            showBox:$('#div3'),
            showFun:function(){
                var that=this;
                var a=this.showBtn;
                var b=this.showBox;
                a.click(function(event) {
                    b.show();
                });
            }
        }
        namespace.tab={
            tabBtn:$('.tab_nav li'),
            tabCon:$('.tab_main div'),
            tabFun:function(){
                var that=this;
                var a=this.tabBtn;
                var b=this.tabCon;
                a.click(function() {
                    $(this).addClass('active').siblings().removeClass('active');
                    b.eq($(this).index()).show().siblings().hide();
                });
            }
        }
        namespace.int();