大熊君JavaScript插件化开发------(实战篇之DXJ UI ------ ItemSelector重构完结版)

时间:2022-09-01 07:25:47

一,开篇分析

Hi,大家好!大熊君又和大家见面了,还记得上一篇文章吗。主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是

如何设计一个插件的,两种方式各有利弊取长补短,本系列文章是以学习为导向的,具体场景大家自己定夺使用方式。那么今天这篇文章我们说点什么那?嘿嘿嘿

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

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插件化开发------(实战篇之DXJ UI ------ ItemSelector重构完结版)

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

    大熊君JavaScript插件化开发------(实战篇之DXJ UI ------ ItemSelector重构完结版)

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

   大熊君JavaScript插件化开发------(实战篇之DXJ UI ------ ItemSelector重构完结版)

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

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

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

  (2),职责划分不清晰

  (3),流程梳理不健全

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

  (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"
}
] ,
}) ;
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 !
} ;

 第二部,建立抽象后的方法接口:

  

ISProto._fnItemSelectorDelegateHandler = function(){
   // put you code here !
} ;
ISProto._fnTriggerHandler = function(){
   // put you code here !
} ;
ISProto._addOrRemoveClass = function(){
   // put you code here !
} ;

第三步,建立数据操作接口:

  

 ISProto._setCurrent = function(){
// put you code here !
} ;
ISProto._getCurrent = function(){
// put you code here !
} ;

  还有一些参照下面的完整源码,这里只是说的思路。

(三),完整代码以供学习,本代码已经过测试

  

function ItemSelector(elem,opts){
this.elem = elem ;
this.opts = opts ;
this.current = -1 ; // 数据游标
} ;
var ISProto = ItemSelector.prototype ;
/* getter api*/
ISProto.getElem = function(){
return this.elem ;
} ;
ISProto.getOpts = function(){
return this.opts ;
} ;
ISProto._getCurrent = function(){
return this.current ;
} ;
/* getter api*/
/* data manip*/
ISProto._setCurrent = function(current){
this.current = current ;
} ;
ISProto._setItemText = function(text){
this.getElem().find(".title div").text(text) ;
} ;
/* data manip*/ /* update on 2015 1/31 23:38 */
ISProto._fnTriggerHandler = function(index,text,value){
if(this._isDisabled(value)){
index = -1 ;
text = this.getOpts()["currentText"] ;
}
this._setItemText(text) ;
this._setCurrent(index) ;
this.getElem().find(".content .items").hide() ;
} ;
ISProto._addOrRemoveClass = function(elem,className,addIs){
if(addIs){
elem.addClass(className) ;
}
else{
elem.removeClass(className) ;
}
} ;
ISProto._fnItemSelectorDelegateHandler = function(){
var that = this ;
this.getElem().on("click","[data-toggle]",function(){
that.getElem().find(".content .items").toggle() ;
}) ;
} ;
ISProto._isDisabled = function(value){
return ("1" == value) ? true : false ;
} ;
/* update on 2015 1/31 23:38 */
ISProto.init = function(){
var that = this ;
this._fnItemSelectorDelegateHandler() ;
$.each(this.getOpts()["items"],function(i,item){
item["index"] = i ;
that._render(item) ;
}) ;
this._fnTriggerHandler(this._getCurrent(),this.getOpts()["currentText"],"1") ;
} ;
ISProto._render = function(item){
var that = this ;
var itemElem = $("<div></div>").text(item["text"]).attr("id",item["index"]) ;
var activeClass = ("0" == item["disabled"]) ? "item-hover" : "item-disabled-hover" ;
itemElem.on("click",function(){
that._fnTriggerHandler(item["index"],item["text"],item["disabled"]) ;
})
.mouseover(function(){
that._addOrRemoveClass($(this),activeClass,true) ;
})
.mouseout(function(){
that._addOrRemoveClass($(this),activeClass,false) ;
}) ;
itemElem.appendTo(this.getElem().find(".content .items")) ;
} ;

  

  

(四),最后总结

  (1),面向对象的思考方式合理分析功能需求。

  (2),以类的方式来组织我们的插件逻辑。

  (3),不断重构上面的实例,如何进行合理的重构那?不要设计过度,要游刃有余,推荐的方式是过程化设计与面向对象思想设计相结合。

   (4),下篇文章中会扩展相关功能,比如“mode”这个属性,为"1"时支持checkbox多选模式,现在只是默认下拉模式。

                   哈哈哈,本篇结束,未完待续,希望和大家多多交流够沟通,共同进步。。。。。。呼呼呼……(*^__^*)      

大熊君JavaScript插件化开发------(实战篇之DXJ UI ------ ItemSelector重构完结版)的更多相关文章

  1. 大熊君JavaScript插件化开发------(实战篇之DXJ UI ------ ItemSelector)

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得前两篇文章吗.主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利 ...

  2. 大熊君JavaScript插件化开发------(实战篇之DXJ UI ------ ProcessBar)

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得前两篇文章吗.主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利 ...

  3. 大熊君JavaScript插件化开发------(实战篇之DXJ UI ------ Tab)

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得前两篇文章吗.主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利 ...

  4. 大熊君JavaScript插件化开发------(实战篇之DXJ UI ------ Tab功能扩展完结版)

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得上一篇文章吗.主要讲述了一个“Tab”插件是如何组织代码以及实现的”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方 ...

  5. 大熊君JavaScript插件化开发------(第二季)

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得昨天的那篇文章吗------这个系列的开篇(第一季).主要讲述了以“jQuery的方式如何开发插件”, 那么今天我们带着昨天的疑问来继续我们的插 ...

  6. 大熊君JavaScript插件化开发------(第一季)

    一,开篇分析 Hi,大家!大熊君又来了,今天这系列文章主要是说说如何开发基于“JavaScript”的插件式开发,我想很多人对”插件“这个词并不陌生, 有的人可能叫“组件”或“部件”,这不重要,关键是 ...

  7. JavaScript插件化开发

    大熊君JavaScript插件化开发 一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得昨天的那篇文章吗------这个系列的开篇(第一季).主要讲述了以“jQuery的方式如何开发插件”, 那 ...

  8. 又一开源项目爆火于GitHub,Android高级插件化强化实战

    一.插件化起源 插件化技术最初源于免安装运行 Apk的想法,这个免安装的 Apk 就可以理解为插件,而支持插件的 app 我们一般叫 宿主. 想必大家都知道,在 Android 系统中,应用是以 Ap ...

  9. TinyFrame升级之八:实现简易插件化开发

    本章主要讲解如何为框架新增插件化开发功能. 在.net 4.0中,我们可以在Application开始之前,通过PreApplicationStartMethod方法加载所需要的任何东西.那么今天我们 ...

随机推荐

  1. ASP&period;NET MVC5&plus;EF6&plus;EasyUI 后台管理系统(22)-权限管理系统-模块导航制作

    系列目录 最近比较忙,系统难度独步增加,文章的发布速度明显比以前慢了. 由于我们已经跑通了整个系统,所有东西都回到了简单,接下来我们做模块制作也就是操作SysModule表. 首先我们来回顾一下之前的 ...

  2. Sybase 常用SQL

    http://blog.chinaunix.net/uid-200142-id-3073894.html ===========================使用总结================ ...

  3. PHP function

  4. tabhost使用

    Tabhost用法 使用方法一:使用同一个布局文件 在xml中如此定义tabhost: <RelativeLayout xmlns:android="http://schemas.an ...

  5. UVA 10791 - Minimum Sum LCM&lpar;坑&rpar;

    题目链接 不知道为什么,我用cin,cout就是过不了...改成scanf过了... 还是我居然理解错题意了,已经不能用看错了...至少两个数字,我理解成两个数字了,还写了个爆搜... #includ ...

  6. sass揭秘之变量&lpar;转载&rpar;

    出处:http://www.w3cplus.com/preprocessor/sass-basic-variable.html 因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sas ...

  7. C&num; 集合-并发处理-锁OR线程

    每次写博客,第一句话都是这样的:程序员很苦逼,除了会写程序,还得会写博客!当然,希望将来的一天,某位老板看到此博客,给你的程序员职工加点薪资吧!因为程序员的世界除了苦逼就是沉默.我眼中的程序员大多都不 ...

  8. ASP&period;NET&lpar;C&num;&rpar; GridView (编辑、删除、更新、取消)

    转自:http://my.oschina.net/dldlhrmc/blog/93458 前台代码 view source   print? 01 <%@ Page Language=&quot ...

  9. XML 中可嵌入 cmd命令脚本

    原文要参照代码 1. XML解析 Task逻辑块可相互组合,形成复杂的树状结构,其结构用XML表示,即写成XML文件的形式. 样例如下: <!-- 顺序执行块 --> <seq&gt ...

  10. android应用开发-从设计到实现 3-4 静态原型的状态栏

    静态原型的状态栏 状态栏Symbol 状态栏似乎非常复杂,有wifi信号.手机信号.时间.电量等信息,幸好Sketch原生就自带的现成组件,你能够直接拿过来就用了.当然.你也能够自己一个一个去画,只是 ...