JavaScript插件化開發講解

（一），開篇分析

Hi，大家好！前兩篇文章我們主要講述了以“jQuery的方式如何開發插件”，以及過程化設計與面向對象思想設計相結合的方式是如何設計一個插件的，兩種方式各有利弊取長補短，嘿嘿嘿，廢話少説，進入正題。直接上實際效果圖：

大家看到了吧，這是一個下拉菜單插件，在我們日常開發中，系統提供的可能有時讓我們覺得不是很美觀並且功能有限，造成用户

的體驗形式以及用户的.可交互性不是很好，所以今天模擬一個嘿嘿嘿。下面就具體分析一下吧。

（二），實例分析

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

複製代碼 代碼如下:

$(function(){

var itemSelector = new ItemSelector($("#item-selector"),{

currentText : "Please Choose Item" ,

items : [

{

text : "JavaScript" ,

value : "js" ,

disabled : "1"

} ,

{

text : "Css" ,

value : "css" ,

disabled : "0"

} ,

{

text : "Html" ,

value : "html" ,

disabled : "0"

}

] ,

mode : "0" , // 為"1"時支持checkbox多選模式

change : function(value){

// put your code here

}

}) ;

() ;

setTimeout(function(){

(urrentValue()) ; // 測試 獲取當先選中項

},2000) ;

“var itemSelector = new ItemSelector()”裏面包含兩個參數，第一個是dom節點對象，第二個是插件參數選項，"currentText"代表“ItemSelector“插件中，選中文本顯示區域的文字描述。

”items“是一個數組，裏面包含的是“ItemSelector”項目的屬性，包括文字描述，選項值，”disabled“代表列表條目的可顯度，0代表顯示，1代表不可顯示。

”change“代表選中時的操作回調函數，選項數據會以參數的形式進行回傳。

（2），所涉的功能有哪些

可顯的效果圖如下：

不可顯的效果圖如下：

二者的區別是：不可現狀態數據不會回傳，懸浮上去不會有任何效果。

　（三），完整代碼以供學習，本代碼已經過測試，包括目錄結構以及相關的文件。

（1），html

複製代碼 代碼如下:

大熊君{{bb}} - DXJ UI ------ ItemSelector

↓

（2），css

複製代碼 代碼如下:

/* item-selector */

#item-selector {

margin : 0 auto;

width : 220px ;

overflow:hidden;

border:2px solid #ccc;

}

#item-selector e {

border-bottom:1px solid #ccc;

overflow:hidden;

}

#item-selector e div {

width:190px;

border:0px ;

color:#999;

font-family: arial ;

font-size: 14px;

height:28px;

line-height:28px;

float:left;

cursor:pointer;

}

#item-selector e span {

display:block;

height:30px;

line-height:30px;

width:29px;

float:left;

text-align:center;

border-left:1px solid #ccc;

cursor:pointer;

}

#item-selector ent {

width : 220px ;

overflow:hidden;

}

#item-selector ent s {

overflow:hidden;

}

#item-selector ent s div {

padding-left:20px;

width : 200px ;

height:32px;

line-height:32px;

font-family: "微軟雅黑" ;

font-size: 14px;

font-weight:bold;

cursor:pointer;

}

-hover {

background:#3385ff;

color:#fff;

}

（3），""

複製代碼 代碼如下:

function ItemSelector(elem,opts){

= elem ;

= opts ;

} ;

var ISProto = otype ;

lem = function(){

return ;

} ;

pts = function(){

return ;

} ;

/* data manip*/

ISProto._setCurrent = function(current){

pts()["current"] = current ;

} ;

urrentValue = function(current){

return pts()["current"] ;

} ;

/* data manip*/

= function(){

var that = this ;

pts()["current"] = null ; // 數據遊標

this._setItemValue(pts()["currentText"]) ;

var itemsElem = lem()("ent s") ;

lem()("e div")("click",function(){

le() ;

}) ;

lem()("e span")("click",function(){

le() ;

}) ;

$(pts()["items"],function(i,item){

item["id"] = (new Date()ime())ring() ;

that._render(item) ;

}) ;

} ;

ISProto._setItemValue = function(value){

lem()("e div")(value)

} ;

ISProto._render = function(item){

var that = this ;

var itemElem = $("

")

(item["text"])

("id",item["id"]) ;

if("0" == item["disabled"]){

("click",function(){

var onChange = pts()["change"] ;

lem()("ent s")() ;

that._setItemValue(item["text"]) ;

that._setCurrent(item) ;

onChange && onChange(item) ;

})

eover(function(){

$(this)lass("item-hover") ;

})

eout(function(){

$(this)veClass("item-hover") ;

}) ;

}

else{

("color","#ccc")("click",function(){

lem()("ent s")() ;

that._setItemValue(item["text"]) ;

}) ;

}

ndTo(lem()("ent s")) ;

} ;

（四），最後總結

（1），面向對象的思考方式合理分析功能需求。

（2），以類的方式來組織我們的插件邏輯。

（3），不斷重構上面的實例，如何進行合理的重構那？不要設計過度，要遊刃有餘，推薦的方式是過程化設計與面向對象思想設計相結合。

（4），下篇文章中會擴展相關功能，比如“mode”這個屬性，為"1"時支持checkbox多選模式，現在只是默認下拉模式。

本文先到這裏了，後續我們再繼續討論，希望小夥伴們能夠喜歡本系列文章。