JavaScript插件化開(kāi)發(fā)教程 （四）
更新時(shí)間：2015年01月27日 15:27:19 投稿：hebedich
這篇文章主要介紹了JavaScript插件化開(kāi)發(fā)教程第四篇,需要的朋友可以參考下
一，開(kāi)篇分析
Hi，還記得上一篇文章嗎。主要講述了一個(gè)“Tab”插件是如何組織代碼以及實(shí)現(xiàn)的”，以及過(guò)程化設(shè)計(jì)與面向?qū)ο笏枷朐O(shè)計(jì)相結(jié)合的方式是
如何設(shè)計(jì)一個(gè)插件的，兩種方式各有利弊取長(zhǎng)補(bǔ)短，本系列文章是以學(xué)習(xí)為導(dǎo)向的，具體場(chǎng)景大家自己定奪使用方式。在從這篇文章中，我們還是以那個(gè)“Tab”實(shí)例為主，
繼續(xù)擴(kuò)展相關(guān)功能。嘿嘿嘿，廢話少說(shuō)，進(jìn)入正題。直接上實(shí)際效果圖：
大家看到了吧，增加了一個(gè)新的功能，如果我們?cè)诔跏蓟瘯r(shí)，我們的模塊配置信息項(xiàng)目的條目數(shù)大于我們指定的，那么就會(huì)顯示在“更多模塊”
操作項(xiàng)的隱藏列表中，我們的初始化參數(shù)配置也從新做了調(diào)整比如多了一個(gè)“displayMax”指定初始化時(shí)的條目數(shù)，還有一個(gè)項(xiàng)目屬性，“status”
在初始化時(shí)也去掉了不需要配置了，在程序中動(dòng)態(tài)生成配置，增加了程序的靈活性，下面就具體分析一下吧。
（二），實(shí)例分析
（1），首先確定這個(gè)插件做什么事。下面看一下插件的調(diào)用方式，以及配置參數(shù)說(shuō)明。如下代碼：
復(fù)制代碼 代碼如下:
{
buttonText : "添加模塊" ,
result : [
{
text : "向?qū)崾? ,
url : "help.html" ,
showClose : "0"
} ,
{
text : "學(xué)生信息" ,
url : "info.html" ,
showClose : "1"
} ,
{
text : "學(xué)生分類" ,
url : "category.html" ,
showClose : "1"
} ,
{
text : "大熊君{{bb}}" ,
url : "bb.html" ,
showClose : "1"
} ,
{
text : "Beta測(cè)試模塊" ,
url : "test.html" ,
showClose : "1"
} ,
{
text : "三胖子" ,
url : "help.html" ,
showClose : "1"
} ,
{
text : "四禿子" ,
url : "help.html" ,
showClose : "1"
}
] ,
displayMax : 5 // 最多顯示項(xiàng)目
}
“bigbear.ui.createTab”里面包含兩個(gè)參數(shù)，第一個(gè)是dom節(jié)點(diǎn)對(duì)象，第二個(gè)是插件參數(shù)選項(xiàng)，"buttonText "代表“Tab“插件中，操作按鈕的文字描述。
”result“是一個(gè)數(shù)組，里面包含的是選項(xiàng)卡項(xiàng)目的屬性，包括文字描述，點(diǎn)擊選項(xiàng)卡項(xiàng)目時(shí)做請(qǐng)求使用的url，”showClose“代表選項(xiàng)卡的選項(xiàng)是否顯示關(guān)閉按鈕。
“status”在初始化時(shí)也去掉了不需要配置了，在程序中動(dòng)態(tài)生成配置?？赡軙?huì)有關(guān)閉狀態(tài)，分別表示為：1-默認(rèn)顯示，0-關(guān)閉狀態(tài)，2-超過(guò)默認(rèn)的條目數(shù)。
（2），功能分步驟介紹
1---，通過(guò)可選參數(shù)，初始化插件：
復(fù)制代碼 代碼如下:
$(function(){
bigbear.ui.createTab($("#tab"),{
buttonText : "添加模塊" ,
result : [
{
text : "向?qū)崾? ,
url : "help.html" ,
showClose : "0"
} ,
{
text : "學(xué)生信息" ,
url : "info.html" ,
showClose : "1"
} ,
{
text : "學(xué)生分類" ,
url : "category.html" ,
showClose : "1"
} ,
{
text : "大熊君{{bb}}" ,
url : "bb.html" ,
showClose : "1"
} ,
{
text : "Beta測(cè)試模塊" ,
url : "test.html" ,
showClose : "1"
} ,
{
text : "三胖子" ,
url : "help.html" ,
showClose : "1"
} ,
{
text : "四禿子" ,
url : "help.html" ,
showClose : "1"
}
] ,
displayMax : 5 // 最多顯示項(xiàng)目
}) ;
}) ;
2---，渲染并且完成時(shí)間綁定以及相關(guān)的業(yè)務(wù)邏輯，比如初始化時(shí)條目數(shù)量驗(yàn)證。
復(fù)制代碼 代碼如下:
tabProto.init = function(){
if(this._isEmptyResult()){
this._setContent("暫無(wú)任何模塊!") ;
}
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("不能添加任何模塊，目前已經(jīng)是最大數(shù)量！") ;
}
})
.appendTo(root) ;
}) ;
root.toggle() ;
}) ;
});
}
this.getElem().find(".title .items div")
.eq(0)
.trigger("click") ; // 假定是必須有一項(xiàng)，否則插件意義就不大了！
} ;
3---，選項(xiàng)卡切換以及數(shù)據(jù)內(nèi)容渲染操作。
復(fù)制代碼 代碼如下:
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() ;
} ;
復(fù)制代碼 代碼如下:
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 !") ;
});
})
復(fù)制代碼 代碼如下:
tabProto._setContent = function(html){
this.getElem().find(".content").html(html) ;
} ;
tabProto._getContent = function(url){
return $.ajax({
url : url
}) ;
} ;
4---，核心的輔助數(shù)據(jù)操作方法，不涉及dom。
復(fù)制代碼 代碼如下:
/* 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 ;
} ;
（三），完整代碼以供學(xué)習(xí)，本代碼已經(jīng)過(guò)測(cè)試，包括目錄結(jié)構(gòu)以及相關(guān)的文件。
1，html
復(fù)制代碼 代碼如下:
<body>
<div class="dxj-ui-hd">
大熊君{{bb}} - DXJ UI ------ Tab
</div>
<div class="dxj-ui-bd">
<div id="tab">
<div class="title">
<div class="adder">
+ 添加學(xué)生信息
</div>
<div class="items">
<!--<div><span class="del">X</span>歡迎頁(yè)</div>
<div><span class="del">X</span>用戶管理</div>
<div><span class="del">X</span>Bigbear</div>-->
</div>
<div class="more-mod">
<div class="tag">更多模塊</div>
<div class="mods">
</div>
</div>
</div>
<div class="console-panel">
</div>
<div class="content">
<!--<div class="c">
<div class="input-content"><span>姓名：</span><input type="text" /></div>
<div class="input-content"><span>備注：</span><textarea></textarea></div>
</div> <div class="input-content"><input type="button" value="保存" /></div>
-->
</div>
</div>
</div>
</body>
2，css
復(fù)制代碼 代碼如下:
.dxj-ui-hd {
padding:0px ;
margin : 0 auto;
margin-top:30px;
width:780px;
height:60px;
line-height: 60px;
background: #3385ff;
color:#fff;
font-family: "微軟雅黑" ;
font-size: 28px;
text-align: center;
font-weight:bold;
}
.dxj-ui-bd {
padding:0px ;
margin : 0 auto;
width:778px;
padding-top : 30px ;
padding-bottom : 30px ;
overflow: hidden;
border:1px solid #3385ff;
}
.dxj-ui-bd #tab {
padding:0px ;
margin : 0 auto;
width:720px;
overflow: hidden;
position:relative;
}
.dxj-ui-bd #tab .title {
width:720px;
overflow: hidden;
border-bottom:2px solid #3385ff;
}
.dxj-ui-bd #tab .title .adder {
width:160px;
height:32px;
line-height: 32px;
background: #DC143C;
color:#fff;
font-family: "微軟雅黑" ;
font-size: 14px;
text-align: center;
font-weight:bold;
float : left;
cursor:pointer;
}
.dxj-ui-bd #tab .title .more-mod {
overflow:hidden;
border:1px solid #DC143C;
width:70px;
position:absolute;
right:0;
margin-right:6px;
display:none;
}
.dxj-ui-bd #tab .title .more-mod .tag{
height:32px;
line-height:32px;
width:70px;
background: #DC143C;
color:#fff;
font-family: arial ;
font-size: 12px;
text-align: center;
cursor:pointer;
}
.dxj-ui-bd #tab .title .more-mod .mods {
overflow:hidden;
width:70px;
display:none;
}
.dxj-ui-bd #tab .title .more-mod .mods div {
height:24px;
line-height:24px;
width:62px;
font-family: arial ;
font-size: 12px;
cursor:pointer;
padding-left:10px;
}
.dxj-ui-bd #tab .title .items {
height:32px;
width:480px;
overflow: hidden;
float : left;
}
.dxj-ui-bd #tab .title .items div {
padding:0px;
margin-left:10px;
width:84px;
height:32px;
line-height: 32px;
background: #3385ff;
color:#fff;
font-family: arial ;
font-size: 12px;
text-align: center;
position:relative;
float : left;
cursor:pointer;
}
.dxj-ui-bd #tab .title .items div span.del {
width:16px;
height:16px;
line-height: 16px;
display:block;
background: #DC143C;
position:absolute;
right:0 ;
top:0;
cursor:pointer;
}
.dxj-ui-bd #tab .content {
width:716px;
padding-top:30px;
overflow: hidden;
border:2px solid #3385ff;
border-top:0px;
min-height:130px;
text-align:center;
}
.dxj-ui-bd #tab .content table {
margin : 0 auto ;
}
.dxj-ui-bd #tab .content div.c {
padding-top : 20px ;
padding-left:20px;
background:#eee;
height:140px;
}
.dxj-ui-bd #tab .content div.c .input-content {
margin-top : 10px ;
font-family: arial ;
font-size: 12px;
}
.dxj-ui-bd #tab .console-panel {
width:716px;
padding-top:20px;
padding-bottom:20px;
overflow: hidden;
border:2px solid #3385ff;
border-top:0px;
border-bottom:2px solid #3385ff;
background:#fff;
display:none;
}
.active {
font-weight:bold ;
}
3,bigbear.js
復(fù)制代碼 代碼如下:
(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("暫無(wú)任何可添加的項(xiàng)目！") ;
}
} ;
/* 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節(jié)點(diǎn)存在
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("暫無(wú)任何模塊!") ;
}
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("不能添加任何模塊，目前已經(jīng)是最大數(shù)量！") ;
}
})
.appendTo(root) ;
}) ;
root.toggle() ;
}) ;
});
}
this.getElem().find(".title .items div")
.eq(0)
.trigger("click") ; // 假定是必須有一項(xiàng)，否則插件意義就不大了！
} ;
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("是否刪除此項(xiàng)？")){
that._deleteItem(item) ;
return false ; // 阻止冒泡
}
})
.appendTo(item) ;
}
} ;
ui.createTab = function(elem,opts){
var tab = new Tab(elem,opts) ;
tab.init() ;
return tab ;
} ;
})(jQuery) ;
（四），最后總結(jié)
?。?），面向?qū)ο蟮乃伎挤绞胶侠矸治龉δ苄枨蟆?/p>
?。?），以類的方式來(lái)組織我們的插件邏輯。
?。?），不斷重構(gòu)上面的實(shí)例，如何進(jìn)行合理的重構(gòu)那？不要設(shè)計(jì)過(guò)度，要游刃有余，推薦的方式是過(guò)程化設(shè)計(jì)與面向?qū)ο笏枷朐O(shè)計(jì)相結(jié)合。
您可能感興趣的文章:
- JavaScript插件化開(kāi)發(fā)教程（六）
- JavaScript插件化開(kāi)發(fā)教程（五）
- JavaScript插件化開(kāi)發(fā)教程 （三）
- JavaScript插件化開(kāi)發(fā)教程 （二）
- JavaScript插件化開(kāi)發(fā)教程 （一）
- 一看就懂的Android APP開(kāi)發(fā)入門(mén)教程
- Android中利用App實(shí)現(xiàn)消息推送機(jī)制的代碼
- Android筆記之:App應(yīng)用之啟動(dòng)界面SplashActivity的使用
- Android 避免APP啟動(dòng)閃黑屏的解決辦法(Theme和Style)
- 親自動(dòng)手實(shí)現(xiàn)Android App插件化
相關(guān)文章
利用momentJs做一個(gè)倒計(jì)時(shí)組件(實(shí)例代碼)
這篇文章主要介紹了利用momentJs做一個(gè)倒計(jì)時(shí)組件，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12
點(diǎn)擊隱藏頁(yè)面左欄或右欄實(shí)現(xiàn)js代碼
通過(guò)點(diǎn)擊來(lái)隱藏頁(yè)面左欄或右欄，此效果在實(shí)際應(yīng)用中很常見(jiàn)，接下來(lái)為大家詳細(xì)介紹下實(shí)現(xiàn)代碼，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04
小程序?qū)崿F(xiàn)瀑布流動(dòng)態(tài)加載列表
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)瀑布流動(dòng)態(tài)加載列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這里是seajs loader的核心部分，有些IE兼容的部分還不是很明白，主要是理解各個(gè)模塊如何依賴有序加載，以及CMD規(guī)范2012-11-11
在日常開(kāi)發(fā)中我們經(jīng)常需要處理日期和時(shí)間的操作,下面這篇文章主要介紹了前端利器DateUtils日期時(shí)間工具的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
現(xiàn)在的前端JavaScript可以說(shuō)是異?；鸨?即使并不準(zhǔn)備向前端發(fā)展,但是對(duì)前端的一些基礎(chǔ)知識(shí)還是必須有所了解的,先這篇文章主要給大家介紹了關(guān)于在HTML中嵌入JS代碼的3種方式,需要的朋友可以參考下2022-11-11
JavaScript實(shí)現(xiàn)翻頁(yè)功能(附效果圖)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)翻頁(yè)功能(附效果圖)，在項(xiàng)目需求中經(jīng)常遇到，今天小編抽時(shí)間給大家分享JavaScript實(shí)現(xiàn)翻頁(yè)功能實(shí)例代碼，需要的朋友參考下吧2017-02-02
兼容IE FF Opera的javascript最短的拖動(dòng)代碼
關(guān)于拖動(dòng)的代碼太多了要么復(fù)雜要么不兼容,在這就不多說(shuō)了. 這里提供個(gè)簡(jiǎn)潔的。2008-01-01
js簡(jiǎn)單實(shí)現(xiàn)根據(jù)身份證號(hào)碼識(shí)別性別年齡生日
根據(jù)身份證號(hào)碼識(shí)別性別年齡生日，目前就有一個(gè)這樣的需求，那么接下來(lái)為大家介紹下使用js是如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過(guò)2013-11-11
JS實(shí)現(xiàn)雙擊屏幕滾動(dòng)效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)雙擊屏幕滾動(dòng)效果代碼,涉及JavaScript鼠標(biāo)事件的響應(yīng)及頁(yè)面元素屬性的動(dòng)態(tài)變換技巧,需要的朋友可以參考下2015-10-10