JavaScript插件化开发教程(六)

今天这篇文章我们说点什么那?嘿嘿嘿。我们接着上篇文章对不足的地方进行重构,以深入浅出的方式来逐步分析,让大家有一个循序渐进提高的过程。废话少说,进入正题。让我们先来回顾一下之前的

Js部分的代码,如下:

复制代码 代码如下:


 function ItemSelector(elem,opts){
     this.elem = elem ;
     this.opts = opts ;
 } ;
 var ISProto = ItemSelector.prototype ;
 ISProto.getElem = function(){
     return this.elem ;
 } ;
 ISProto.getOpts = function(){
     return this.opts ;
 } ;
 /* data manip*/
 ISProto._setCurrent = function(current){
     this.getOpts()["current"] = current ;
 } ;
 ISProto.getCurrentValue = function(current){
     return this.getOpts()["current"] ;
 } ;
 /* data manip*/
 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._setItemValue = function(value){
     this.getElem().find(".title div").text(value)
 } ;
 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")) ;
 } ;

  效果如下图所示:

JavaScript插件化开发教程(六)

  a)------非可操作状态

JavaScript插件化开发教程(六)

  b)------可操作状态

JavaScript插件化开发教程(六)

(二),打开思路,进行重构

  大家从代码不难看出,已经通过“Js”中的语法特性,以面向对象的方式进行了有效的组织,比松散的过程化形式的组织方式好多了,但是仍然会发现有很多不足的地方。

  (1),里面重复代码太多

  (2),职责划分不清晰

  (3),流程梳理不健全

  我们基于以上几点进行有效的重构,我们首先要梳理一下这个组件的需求,功能点如下:

  (1),初始化配置组件

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgfsdy.html