一，开篇分析
Hi，大家好！大熊君又和大家见面了，还记得上一篇文章吗。主要讲述了一个“Tab”插件是如何组织代码以及实现的”，以及过程化设计与面向对象思想设计相结合的方式是
如何设计一个插件的，两种方式各有利弊取长补短，本系列文章是以学习为导向的，具体场景大家自己定夺使用方式。在从这篇文章中，我们还是以那个“Tab”实例为主，
继续扩展相关功能。嘿嘿嘿，废话少说，进入正题。直接上实际效果图：
大家看到了吧，增加了一个新的功能，如果我们在初始化时，我们的模块配置信息项目的条目数大于我们指定的，那么就会显示在“更多模块”
操作项的隐藏列表中，我们的初始化参数配置也从新做了调整比如多了一个“displayMax”指定初始化时的条目数，还有一个项目属性，“status”
在初始化时也去掉了不需要配置了，在程序中动态生成配置，增加了程序的灵活性，下面就具体分析一下吧。
（二），实例分析
（1），首先确定这个插件做什么事。下面看一下插件的调用方式，以及配置参数说明。如下代码：
1 {
2 buttonText : "添加模块" ,
3 result : [
4 {
5 text : "向导提示" ,
6 url : "help.html" ,
7 showClose : "0"
8 } ,
9 {
10 text : "学生信息" ,
11 url : "info.html" ,
12 showClose : "1"
13 } ,
14 {
15 text : "学生分类" ,
16 url : "category.html" ,
17 showClose : "1"
18 } ,
19 {
20 text : "大熊君{{bb}}" ,
21 url : "bb.html" ,
22 showClose : "1"
23 } ,
24 {
25 text : "Beta测试模块" ,
26 url : "test.html" ,
27 showClose : "1"
28 } ,
29 {
30 text : "三胖子" ,
31 url : "help.html" ,
32 showClose : "1"
33 } ,
34 {
35 text : "四秃子" ,
36 url : "help.html" ,
37 showClose : "1"
38 }
39 ] ,
40 displayMax : 5 // 最多显示项目
41 }
“bigbear.ui.createTab”里面包含两个参数，第一个是dom节点对象，第二个是插件参数选项，"buttonText "代表“Tab“插件中，操作按钮的文字描述。
”result“是一个数组，里面包含的是选项卡项目的属性，包括文字描述，点击选项卡项目时做请求使用的url，”showClose“代表选项卡的选项是否显示关闭按钮。
“status”在初始化时也去掉了不需要配置了，在程序中动态生成配置。可能会有关闭状态，分别表示为：1-默认显示，0-关闭状态，2-超过默认的条目数。
（2），功能分步骤介绍
1---，通过可选参数，初始化插件：
1 $(function(){
2 bigbear.ui.createTab($("#tab"),{
3 buttonText : "添加模块" ,
4 result : [
5 {
6 text : "向导提示" ,
7 url : "help.html" ,
8 showClose : "0"
9 } ,
10 {
11 text : "学生信息" ,
12 url : "info.html" ,
13 showClose : "1"
14 } ,
15 {
16 text : "学生分类" ,
17 url : "category.html" ,
18 showClose : "1"
19 } ,
20 {
21 text : "大熊君{{bb}}" ,
22 url : "bb.html" ,
23 showClose : "1"
24 } ,
25 {
26 text : "Beta测试模块" ,
27 url : "test.html" ,
28 showClose : "1"
29 } ,
30 {
31 text : "三胖子" ,
32 url : "help.html" ,
33 showClose : "1"
34 } ,
35 {
36 text : "四秃子" ,
37 url : "help.html" ,
38 showClose : "1"
39 }
40 ] ,
41 displayMax : 5 // 最多显示项目
42 }) ;
43 }) ;
2---，渲染并且完成时间绑定以及相关的业务逻辑，比如初始化时条目数量验证。
1 tabProto.init = function(){
2 if(this._isEmptyResult()){
3 this._setContent("暂无任何模块!") ;
4 }
5 var that = this ;
6 this.getElem().find(".title .adder")
7 .text("+" + this.getOpts()["buttonText"])
8 .on("click",function(){
9 that.getElem().find(".console-panel").slideToggle(function(){
10 that._renderConsolePanel("0") ;
11 }) ;
12 }) ;
13 $.each(this.getOpts()["result"],function(i,item){
14 if(that._isDisplayMax(i + 1)){
15 that._saveOrUpdateStatus(item,"1") ;
16 }
17 else{
18 that._saveOrUpdateStatus(item,"2") ;
19 }
20 that._render(item) ;
21 }) ;
22 if(!that._isDisplayMax(this.getOpts()["result"].length)){
23 this.getElem().find(".title .more-mod").fadeIn(function(){
24 $(this).find(".tag").on("click",function(){
25 var root = $(this).next() ;
26 root.empty() ;
27 $.each(that._getItemListByStatus("2"),function(i,data){
28 $("<div></div>").text(data["text"])
29 .on("click",function(){
30 if(that._getItemListByStatus("1").length < that.getOpts()["displayMax"]){
31 that.getElem().find(".title .items div").eq(data["index"]).fadeIn(function(){
32 that._saveOrUpdateStatus(data,"1") ;
33 }) ;
34 }
35 else{
36 alert("不能添加任何模块，目前已经是最大数量！") ;
37 }
38 })
39 .appendTo(root) ;
40 }) ;
41 root.toggle() ;
42 }) ;
43
44 });
45 }
46 this.getElem().find(".title .items div")
47 .eq(0)
48 .trigger("click") ; // 假定是必须有一项，否则插件意义就不大了！
49 } ;
3---，选项卡切换以及数据内容渲染操作。
1 tabProto._setCurrent = function(index){
2 var items = this.getElem().find(".title .items div").removeClass("active") ;
3 items.eq(index).addClass("active") ;
4 var contents = this.getElem().find(".content .c").hide() ;
5 contents.eq(index).show() ;
6 } ;
1 item.on("click",function(){
2 that._setCurrent($(this).index()) ;
3 that._getContent(data["url"]).done(function(result){
4 that._setContent(result) ;
5 })
6 .fail(function(){
7 throw new Error("Net Error !") ;
8 });
9 })
1 tabProto._setContent = function(html){
2 this.getElem().find(".content").html(html) ;
3 } ;
4 tabProto._getContent = function(url){
5 return $.ajax({
6 url : url
7 }) ;
8 } ;
4---，核心的辅助数据操作方法，不涉及dom。
1 /* update time 2015 1/26 15:36 */
2 tabProto._isDisplayMax = function(size){
3 var displayMax = this.getOpts()["displayMax"] || 5 ;
4 return (size <= displayMax) ? true : false ;
5 } ;
6 tabProto._isEmptyResult = function(){
7 if(!this.getOpts()["result"].length){
8 return false ;
9 }
10 return true ;
11 } ;
12 tabProto._saveOrUpdateStatus = function(item,status){
13 item["status"] = status ;
14 } ;
15 tabProto._getItemListByStatus = function(status){
16 var list = [] ;
17 var result = this.getOpts()["result"] ;
18 $.each(result,function(i,item){
19 if(status == item["status"]){
20 list.push(item) ;
21 }
22 }) ;
23 return list ;
24 } ;
25 tabProto._getStatusByIndex = function(index){
26 var status = null ;
27 var result = this.getOpts()["result"] ;
28 $.each(result,function(i,item){
29 if(index == item["index"]){
30 status = item["status"] ;
31 }
32 }) ;
33 return status ;
34 } ;
（三），完整代码以供学习，本代码已经过测试，包括目录结构以及相关的文件。
1，html
1 <body>
2 <div class="dxj-ui-hd">
3 大熊君{{bb}} - DXJ UI ------ Tab
4 </div>
5 <div class="dxj-ui-bd">
6 <div id="tab">
7 <div class="title">
8 <div class="adder">
9 + 添加学生信息
10 </div>
11 <div class="items">
12 <!--<div><span class="del">X</span>欢迎页</div>
13 <div><span class="del">X</span>用户管理</div>
14 <div><span class="del">X</span>Bigbear</div>-->
15 </div>
16 <div class="more-mod">
17 <div class="tag">更多模块</div>
18 <div class="mods">
19
20 </div>
21 </div>
22 </div>
23 <div class="console-panel">
24 </div>
25 <div class="content">
26 <!--<div class="c">
27
28 <div class="input-content"><span>姓名：</span><input type="text" /></div>
29 <div class="input-content"><span>备注：</span><textarea></textarea></div>
30
31 </div> <div class="input-content"><input type="button" value="保存" /></div>
32 -->
33 </div>
34 </div>
35 </div>
36 </body>
2，css
1 .dxj-ui-hd {
2 padding:0px ;
3 margin : 0 auto;
4 margin-top:30px;
5 width:780px;
6 height:60px;
7 line-height: 60px;
8 background: #3385ff;
9 color:#fff;
10 font-family: "微软雅黑" ;
11 font-size: 28px;
12 text-align: center;
13 font-weight:bold;
14 }
15 .dxj-ui-bd {
16 padding:0px ;
17 margin : 0 auto;
18 width:778px;
19 padding-top : 30px ;
20 padding-bottom : 30px ;
21 overflow: hidden;
22 border:1px solid #3385ff;
23 }
24 .dxj-ui-bd #tab {
25 padding:0px ;
26 margin : 0 auto;
27 width:720px;
28 overflow: hidden;
29 position:relative;
30 }
31 .dxj-ui-bd #tab .title {
32 width:720px;
33 overflow: hidden;
34 border-bottom:2px solid #3385ff;
35 }
36 .dxj-ui-bd #tab .title .adder {
37 width:160px;
38 height:32px;
39 line-height: 32px;
40 background: #DC143C;
41 color:#fff;
42 font-family: "微软雅黑" ;
43 font-size: 14px;
44 text-align: center;
45 font-weight:bold;
46 float : left;
47 cursor:pointer;
48 }
49 .dxj-ui-bd #tab .title .more-mod {
50 overflow:hidden;
51 border:1px solid #DC143C;
52 width:70px;
53 position:absolute;
54 right:0;
55 margin-right:6px;
56 display:none;
57 }
58 .dxj-ui-bd #tab .title .more-mod .tag{
59 height:32px;
60 line-height:32px;
61 width:70px;
62 background: #DC143C;
63 color:#fff;
64 font-family: arial ;
65 font-size: 12px;
66 text-align: center;
67 cursor:pointer;
68 }
69 .dxj-ui-bd #tab .title .more-mod .mods {
70 overflow:hidden;
71 width:70px;
72 display:none;
73 }
74 .dxj-ui-bd #tab .title .more-mod .mods div {
75 height:24px;
76 line-height:24px;
77 width:62px;
78 font-family: arial ;
79 font-size: 12px;
80 cursor:pointer;
81 padding-left:10px;
82 }
83 .dxj-ui-bd #tab .title .items {
84 height:32px;
85
86 width:480px;
87 overflow: hidden;
88 float : left;
89 }
90 .dxj-ui-bd #tab .title .items div {
91 padding:0px;
92 margin-left:10px;
93 width:84px;
94 height:32px;
95 line-height: 32px;
96 background: #3385ff;
97 color:#fff;
98 font-family: arial ;
99 font-size: 12px;
100 text-align: center;
101 position:relative;
102 float : left;
103 cursor:pointer;
104 }
105 .dxj-ui-bd #tab .title .items div span.del {
106 width:16px;
107 height:16px;
108 line-height: 16px;
109 display:block;
110 background: #DC143C;
111 position:absolute;
112 right:0 ;
113 top:0;
114 cursor:pointer;
115 }
116 .dxj-ui-bd #tab .content {
117 width:716px;
118 padding-top:30px;
119 overflow: hidden;
120 border:2px solid #3385ff;
121 border-top:0px;
122 min-height:130px;
123 text-align:center;
124 }
125 .dxj-ui-bd #tab .content table {
126 margin : 0 auto ;
127 }
128 .dxj-ui-bd #tab .content div.c {
129 padding-top : 20px ;
130 padding-left:20px;
131 background:#eee;
132 height:140px;
133 }
134 .dxj-ui-bd #tab .content div.c .input-content {
135 margin-top : 10px ;
136 font-family: arial ;
137 font-size: 12px;
138 }
139 .dxj-ui-bd #tab .console-panel {
140 width:716px;
141 padding-top:20px;
142 padding-bottom:20px;
143 overflow: hidden;
144 border:2px solid #3385ff;
145 border-top:0px;
146 border-bottom:2px solid #3385ff;
147 background:#fff;
148 display:none;
149 }
150
151 .active {
152 font-weight:bold ;
153 }
3,bigbear.js
(function($){
var win = window ;
var bb = win.bigbear = win.bigbear || {
ui : {}
} ;
var ui = bb.ui = {} ;
var Tab = function(elem,opts){
this.elem = elem ;
this.opts = opts ;
} ;
var tabProto = Tab.prototype ;
/* update time 2015 1/26 15:36 */
tabProto._isDisplayMax = function(size){
var displayMax = this.getOpts()["displayMax"] || 5 ;
return (size <= displayMax) ? true : false ;
} ;
tabProto._isEmptyResult = function(){
if(!this.getOpts()["result"].length){
return false ;
}
return true ;
} ;
tabProto._saveOrUpdateStatus = function(item,status){
item["status"] = status ;
} ;
tabProto._getItemListByStatus = function(status){
var list = [] ;
var result = this.getOpts()["result"] ;
$.each(result,function(i,item){
if(status == item["status"]){
list.push(item) ;
}
}) ;
return list ;
} ;
tabProto._getStatusByIndex = function(index){
var status = null ;
var result = this.getOpts()["result"] ;
$.each(result,function(i,item){
if(index == item["index"]){
status = item["status"] ;
}
}) ;
return status ;
} ;
tabProto._renderConsolePanel = function(status){
var that = this ;
var root = that.getElem().find(".console-panel") ;
this._resetConsolePanel() ;
$.each(that._getItemListByStatus(status),function(i,item){
var elem = $("<div style=‘float:left‘;></div>").appendTo(root) ;
$("<input type=‘radio‘ name=‘addmod‘ />")
.data("item",item)
.appendTo(elem) ;
$("<span></span>").text(item["text"]).appendTo(elem) ;
}) ;
if(root.find("div").size()){
$("<input type=‘button‘ value=‘添加模块‘ style=‘margin-left:20px‘/>")
.on("click",function(){
var data = root.find("input[type=radio]:checked").data("item") ;
if(that._getItemListByStatus("1").length < that.getOpts()["displayMax"]){
that.getElem().find(".title .items div").eq(data["index"]).fadeIn(function(){
that._saveOrUpdateStatus(data,"1") ;
})
.trigger("click") ;
}
else{
that._saveOrUpdateStatus(data,"2") ;
}
that.getElem().find(".title .adder").trigger("click") ;
})
.appendTo(root) ;
}
else{
root.text("暂无任何可添加的项目！") ;
}
} ;
/* update time 2015 1/26 15:36 */
tabProto._setCurrent = function(index){
var items = this.getElem().find(".title .items div").removeClass("active") ;
items.eq(index).addClass("active") ;
var contents = this.getElem().find(".content .c").hide() ;
contents.eq(index).show() ;
} ;
tabProto.getElem = function(){
return this.elem ;
} ;
tabProto.getOpts = function(){
return this.opts ;
} ;
tabProto._resetContent = function(){
this.getElem().find(".content").html("") ;
} ;
tabProto._setContent = function(html){
this.getElem().find(".content").html(html) ;
} ;
tabProto._getContent = function(url){
return $.ajax({
url : url
}) ;
} ;
tabProto._deleteItem = function(elem){
var that = this ;
this.getElem().find(".title .items div")
.eq(elem.index())
.fadeOut(function(){
that._resetContent() ;
that._saveOrUpdateStatus(elem.data("item"),"0") ;
that._triggerItem(elem.index() + 1) ;
}) ;
} ;
tabProto._triggerItem = function(next){
var nextStatus = this._getStatusByIndex(next) ;
var items = this.getElem().find(".title .items div") ;
next = items.eq(next) ;
if(next.size() && "1" == nextStatus){ //后继dom节点存在
next.trigger("click") ;
}
else{
items.eq(0).trigger("click") ;
}
} ;
tabProto._resetConsolePanel = function(){
this.getElem().find(".console-panel").empty() ;
} ;
tabProto.init = function(){
if(this._isEmptyResult()){
this._setContent("暂无任何模块!") ;
}
var that = this ;
this.getElem().find(".title .adder")
.text("+" + this.getOpts()["buttonText"])
.on("click",function(){
that.getElem().find(".console-panel").slideToggle(function(){
that._renderConsolePanel("0") ;
}) ;
}) ;
$.each(this.getOpts()["result"],function(i,item){
if(that._isDisplayMax(i + 1)){
that._saveOrUpdateStatus(item,"1") ;
}
else{
that._saveOrUpdateStatus(item,"2") ;
}
that._render(item) ;
}) ;
if(!that._isDisplayMax(this.getOpts()["result"].length)){
this.getElem().find(".title .more-mod").fadeIn(function(){
$(this).find(".tag").on("click",function(){
var root = $(this).next() ;
root.empty() ;
$.each(that._getItemListByStatus("2"),function(i,data){
$("<div></div>").text(data["text"])
.on("click",function(){
if(that._getItemListByStatus("1").length < that.getOpts()["displayMax"]){
that.getElem().find(".title .items div").eq(data["index"]).fadeIn(function(){
that._saveOrUpdateStatus(data,"1") ;
}) ;
}
else{
alert("不能添加任何模块，目前已经是最大数量！") ;
}
})
.appendTo(root) ;
}) ;
root.toggle() ;
}) ;
});
}
this.getElem().find(".title .items div")
.eq(0)
.trigger("click") ; // 假定是必须有一项，否则插件意义就不大了！
} ;
tabProto._render = function(data){
var that = this ;
var item = $("<div></div>").text(data["text"]).appendTo(this.getElem().find(".title .items")) ;
data["index"] = item.index() ;
item.on("click",function(){
that._setCurrent($(this).index()) ;
that._getContent(data["url"]).done(function(result){
that._setContent(result) ;
})
.fail(function(){
throw new Error("Net Error !") ;
});
})
.data("item",data) ;
if("2" == data["status"]){
item.hide() ;
}
if("1" == data["showClose"]){
$("<span class=‘del‘>X</span>")
.on("click",function(){
if(win.confirm("是否删除此项？")){
that._deleteItem(item) ;
return false ; // 阻止冒泡
}
})
.appendTo(item) ;
}
} ;
ui.createTab = function(elem,opts){
var tab = new Tab(elem,opts) ;
tab.init() ;
return tab ;
} ;
})(jQuery) ;
（四），最后总结
（1），面向对象的思考方式合理分析功能需求。
（2），以类的方式来组织我们的插件逻辑。
（3），不断重构上面的实例，如何进行合理的重构那？不要设计过度，要游刃有余，推荐的方式是过程化设计与面向对象思想设计相结合。
哈哈哈，本篇结束，未完待续，希望和大家多多交流够沟通，共同进步。。。。。。呼呼呼……(*^__^*)
时间： 2024-10-12 19:30:11