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");

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