大熊君JavaScript插件化開發------（實戰篇之DXJ UI ------ Tab功能擴展完結版）

時間 2019-12-11

標籤 javascript 插件開發實戰 dxj tab 功能擴展完結欄目 JavaScript 简体版

原文原文鏈接

一，開篇分析javascript

Hi，你們好！大熊君又和你們見面了，還記得上一篇文章嗎。主要講述了一個「Tab」插件是如何組織代碼以及實現的」，以及過程化設計與面向對象思想設計相結合的方式是css

如何設計一個插件的，兩種方式各有利弊取長補短，本系列文章是以學習爲導向的，具體場景你們本身定奪使用方式。在從這篇文章中，咱們仍是以那個「Tab」實例爲主，html

繼續擴展相關功能。嘿嘿嘿，廢話少說，進入正題。直接上實際效果圖：java

你們看到了吧，增長了一個新的功能，若是咱們在初始化時，咱們的模塊配置信息項目的條目數大於咱們指定的，那麼就會顯示在「更多模塊」ajax

操做項的隱藏列表中，咱們的初始化參數配置也重新作了調整好比多了一個「displayMax」指定初始化時的條目數，還有一個項目屬性，「status」數組

在初始化時也去掉了不須要配置了，在程序中動態生成配置，增長了程序的靈活性，下面就具體分析一下吧。app

（二），實例分析dom

（1），首先肯定這個插件作什麼事。下面看一下插件的調用方式，以及配置參數說明。以下代碼：ide

 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），不斷重構上面的實例，如何進行合理的重構那？不要設計過分，要遊刃有餘，推薦的方式是過程化設計與面向對象思想設計相結合。

　　　　　　　　　　　　　　哈哈哈，本篇結束，未完待續，但願和你們多多交流夠溝通，共同進步。。。。。。呼呼呼……(*^__^*)　　　　　　　　　　　　　　