JavaScript插件化开发教程（六）(2)

 $(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"
             }
         ] ,
     }) ;
     itemSelector.init() ;
 }) ;

　　这块代码很清晰，不需要做任何修改，但是大家可以基于以上配置扩展功能，比如增加配置项“mode”支持多种选项方式。如：“checkbox勾选模式”。

　　接下来是要完成初始化逻辑，如下：

复制代码 代码如下:

 ISProto.init = function(){
     var that = this ;
     this.getOpts()["current"] = null ; // 数据游标
     this._setItemValue(this.getOpts()["currentText"]) ;
     var itemsElem = that.getElem().find(".content .items") ;
     this.getElem().find(".title div").on("click",function(){
         itemsElem.toggle() ;
     }) ;
     this.getElem().find(".title span").on("click",function(){
         itemsElem.toggle() ;
     }) ;
     $.each(this.getOpts()["items"],function(i,item){
         item["id"] = (new Date().getTime()).toString() ;
         that._render(item) ;
     }) ;
 } ;

　　这段代码问题很多，职责不明确，初始化逻辑包含了功能点的细节实现。

　　再继续看渲染部分代码:

复制代码 代码如下:

 ISProto._render = function(item){
     var that = this ;
     var itemElem = $("<div></div>")
     .text(item["text"])
     .attr("id",item["id"]) ;
     if("0" == item["disabled"]){
         itemElem.on("click",function(){
             var onChange = that.getOpts()["change"] ;
             that.getElem().find(".content .items").hide() ;
             that._setItemValue(item["text"]) ;
             that._setCurrent(item) ;
             onChange && onChange(item) ;
         })
         .mouseover(function(){
             $(this).addClass("item-hover") ;
         })
         .mouseout(function(){
             $(this).removeClass("item-hover") ;
         }) ;
     }
     else{
         itemElem.css("color","#ccc").on("click",function(){
             that.getElem().find(".content .items").hide() ;
             that._setItemValue(item["text"]) ;
         }) ;
     }
     itemElem.appendTo(this.getElem().find(".content .items")) ;
 } ;

　　问题很明显，发现了重复性的操作，应该进行合理的抽象，已达到复用的目的。

　　整个组建的流程包括初始化，渲染（事件绑定），还有就是相关的数据操作方法以及dom操作的辅助方法。

　　综上所述，经过简单的梳理后，我们应该建立起功能的操作目的以及流程主线的任务分配，各负其责。

　　所以我们重构的目的很明确了，对！就是进行功能点的抽象，友好的职责划分，那么我们如何实现那？

　　第一步，建立流程功能方法：（方法接口）

复制代码 代码如下:

ISProto.init = function(){
   // put you code here !
} ;
ISProto._render = function(){
   // put you code here !
} ;

　第二部，建立抽象后的方法接口：

复制代码 代码如下: