一，開篇分析
Hi，大家好！大熊君又和大家見面了，還記得前兩篇文章嗎。主要講述了以“jQuery的方式如何開發插件”，以及過程化設計與面向對象思想設計相結合的方式是
如何設計一個插件的，兩種方式各有利弊取長補短，本系列文章是以學習為導向的，具體場景大家自己定奪使用方式。那么今天從這篇文章開始，我們就以實例
的方式帶着大家由淺入深的開發屬於自己的插件庫。嘿嘿嘿，廢話少說，進入正題。直接上實際效果圖：
大家看到了吧，這是一個進度條插件，在我們日常開發中，有時我們會有一個裝載數據的進度提示，如果無任何響應勢必造成用戶
的體驗形式以及用戶的可交互性不是很好，所以今天模擬一個嘿嘿嘿。下面就具體分析一下吧。
（二），實例分析
（1），首先確定這個插件做什么事。下面看一下插件的調用方式，以及配置參數說明。如下代碼：
new ProcessBar($("#pb"),{
callback : function(){
alert("裝載數據完成！") ;
}
}).init() ;
我這里只是一個簡單的實例，所以就一個參數，那就是進度加載完要做的事，在回調中做實現部分的邏輯處理，例如跳轉到相關的頁面：
new ProcessBar($("#pb"),{
callback : function(){
window.location = "xxx.html" ;
}
}).init() ;
第一個是dom節點對象，這里以jQuery的方式獲取，第二個是插件參數選項，"callback"代表進度加載完要做的事，在回調中做實現部分的邏輯處理。
三，完整代碼以供學習，本代碼已經過測試，包括目錄結構以及相關的文件。
（1），html代碼：
<div id="pb"> <span></span> <div class="pc"></div> </div>
（2），css代碼：
#pb {
padding:2px;
margin: 0 auto;
width: 560px;
height: 32px;
position:relative;
border:1px solid #777;
text-align: center;
color: #ff3300;
font-family: "微軟雅黑" ;
font-size: 24px;
font-weight:bold;
}
#pb span {
position:absolute;
top:0;
left:45%;
}
#pb .pc {
background-color: #00008B;
width:0px;height: 32px;
}
（3），js代碼：
new ProcessBar($("#pb"),{ // 調用代碼在jQuery ready 中完成
callback : function(){
alert("裝載數據完成！") ;
}
}).init() ;
function ProcessBar(elem,opts){
this.elem = elem ;
this.opts = opts ;
this.tid = null ;
this.tnum = 10 ;
this.precent = 1 ;
this.currentWidth = 0 ;
} ;
var pbProto = ProcessBar.prototype ;
pbProto.getElem = function(){
return this.elem ;
} ;
pbProto.getOpts = function(){
return this.opts ;
} ;
pbProto.init = function(){
this._fnProcessHandler();
} ;
pbProto._fnProcessHandler = function(){
var that = this ;
var cb = this.getOpts()["callback"] ;
this._setProcessIncWidth(this.currentWidth= this.currentWidth + this._getIncrementNum()) ;
this._setPrecentText(this.precent.toString()) ;
if(this.precent < 100){
this.tid = window.setTimeout(function(){
that._fnProcessHandler.call(that) ;
},this.tnum) ;
}
else{
this._resetTimeout() ;
$.isFunction(cb) && cb() ;
}
this.precent = this.precent + 1 ;
} ;
pbProto._getIncrementNum = function(){
return this.getElem().width() / 100 ;
} ;
pbProto._setPrecentText = function(precent){
this.getElem().find("span").text("%" + precent) ;
} ;
pbProto._setProcessIncWidth = function(width){
this.getElem().find(".pc").css("width",width + "px") ;
} ;
pbProto._resetTimeout = function(){
window.clearTimeout(this.tid) ;
this.tid = null ;
} ;
（四），最后總結
（1），面向對象的思考方式合理分析功能需求。
（2），以類的方式來組織我們的插件邏輯。
（3），不斷重構上面的實例，如何進行合理的重構那？不要設計過度，要游刃有余，推薦的方式是過程化設計與面向對象思想設計相結合。
（4），下篇文章中會擴展相關功能，比如添加“text”這個屬性，用戶自己設置相關的提示文字信息，讓體驗更加完美。
哈哈哈，本篇結束，未完待續，希望和大家多多交流夠溝通，共同進步。。。。。。呼呼呼……(*^__^*)