首页 > 代码库 > 大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ Tab功能扩展完结版）
大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ Tab功能扩展完结版）
一，开篇分析
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 : url7 }) ;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="http://www.mamicode.com/保存" /></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=http://www.mamicode.com/‘添加模块‘ style=‘margin-left:20px‘/>") .on("click",function(){ var data = http://www.mamicode.com/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），不断重构上面的实例，如何进行合理的重构那？不要设计过度，要游刃有余，推荐的方式是过程化设计与面向对象思想设计相结合。
哈哈哈，本篇结束，未完待续，希望和大家多多交流够沟通，共同进步。。。。。。呼呼呼……(*^__^*)
大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ Tab功能扩展完结版）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。