JS面向对象封装

自己这一段时间在研究怎么样进行面向对象的封装，别人可以直接调用来进行操作，自己可以根据想要的样式进行调整，自己也搜集了一些资料，比较容易复用的现在还不太会写，自己会更加抽出时间来学习这一块，希望大家能够给个指导。
点击弹出遮罩层：
首先要引入jquery文件，http://demo.jb51.net/jslib/jquery/jquery.js

JS：

(function($) {//写法1
jQuery.extend({
        a: function(h){
            $("#modelContainer").html(h);
        }
        b:function(){}
	}）
})(jQuery);

(function($) {//写法二
    jQuery.mask=function(h){
    	var htmlTest = '<div id="modelBox" class="modelBox">'+
    					'<div class="alertBox" id="alertBox">'+
    						'<h1>消息确认框</h1>'+
    						'<p class="confirm-mgs">'+h.tips+'</p>'+
    						'<div class="left confirm">'+
        						'<a class="ensurediv">'+h.leftBtn+'</a>'+
        						'<a class="cancel" href="javascript:void(0)">'+h.rightBtn+'</a>'+
    						'</div>'+
    					'</div>'+
    				'</div>';
        $("#modelContainer").html(htmlTest);
        $("#delete").click(function(){
        	$('#modelContainer').css('display','block');
        })
    }
})(jQuery);

CSS:

*{margin: 0;
   padding:0;
}
html,body{
 width: 100%;
 height: 100%;
 			
}
.modelContainer{
 	width: 100%;
 	height: auto;
 	overflow: hidden;
 	display: none;
}
.modelBox{
 	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 9999;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.4);
 }
 .modelBox .alertBox{
 	box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
	border-radius: 5px;
	background-color: #FFFFFF;
	position: absolute;
	min-height: 150px;
	max-height: 150px;
	top: 20%;
	left: 40%;
	height: 60%;
	width: 22%;
 }
 .alertBox h1 {
	border-bottom: 1px solid #efefef;
	border-radius: 5px 5px 0px 0px;
	background-color: #DAE6F2;
	padding: 3px 0 5px 5px;
	font-weight: normal;
	font-size: 12px;
	color: #666666;
	line-height: 28px;
}
 .confirm-mgs {
	text-align: center;
	color: #666666;
	margin-top: 20px;
}
.confirm {
	margin-top: 11px;
	width: 120px;
	padding-left:80px;
	padding-right: 80px;
}
.alertBox a{
	text-transform: uppercase;
	text-decoration: none;
	background-color: #3890CF;
	position: relative;
	text-align: center;
	font-size: 12px;
	display: block;
	padding: 5px;
	width: 40px;
	height: 18px;
	line-height: 18px;
	color: #FFF;
	cursor: pointer;
}
.alertBox .cancel {
	margin-top: -28px;
	margin-left: 80px;
	background:#B8B8B8;
}

HTML:

<input type="button" name="delete" id="delete" value="点击弹出遮罩层" />
<div id="modelContainer" class="modelContainer"></div>

自定义JS：

$.mask({
        'tips':'确定删除吗？',
         'leftBtn':'确定',
         'rightBtn':'取消'
});

tab切换：

JS：

function Tab(id){
    this.tabBtn = $(id+' '+'input');
    this.tabDiv = $(id+' '+'div');
    for(var i=0;i<this.tabBtn.length;i++){
        this.tabBtn[i].index = i;
        var _this = this;
        this.tabBtn.eq(i).click(function(){
            _this.clickBtn(this);
        });
    }
};

Tab.prototype.clickBtn = function(btn){
    for(var j=0;j<this.tabBtn.length;j++){
        this.tabBtn.eq(j).attr('class','');
        this.tabDiv.eq(j).css('display','none');
    }
    $(btn).addClass('active');
    this.tabDiv.eq(btn.index).css('display','block');
};

CSS：

.tab input {
            background: #F6F3F3;
            border: 1px solid #FF0000;
            border-bottom: none;
            outline: none;
            cursor: pointer;
        }
        .tab .active {
            background: #E9D4D4;
        }
        .tab div {
            width:300px; 
            height:250px; 
            display:none;
            padding: 10px;
            background: #E9D4D4;
            border: 1px solid #FF0000;
}

HTML:

<div class="tab" id="tabBox1">
        <input type="button" value="聊天" class="active" />
        <input type="button" value="音乐" />
        <input type="button" value="运动" />
        <div style="display:block;">QQ、微信</div>
        <div>蓝色的圣诞节、虎口脱险</div>
        <div>篮球、羽毛球</div>
    </div>
    <br />
    <div class="tab" id="tabBox2">
        <input type="button" value="HTML" class="active" />
        <input type="button" value="CSS" />
        <input type="button" value="JS" />
        <div style="display:block;">h1、span</div>
        <div>margin、padding</div>
        <div>AngularJS、jQuery</div>
    </div>

自己定义：

var tab1 = new Tab("#tabBox1");
var tab2 = new Tab("#tabBox2");

自己会继续努力来学习这方面的知识，从基础做起，相信只要努力去学，一定会有收获的！！！