JavaScript插件化开采教程_javascript技术_脚本之家

作者:联系我们

一,开篇分析

一,开篇分析

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

Hi,大家好!前两篇文章我们主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是如何设计一个插件的,两种方式各有利弊取长补短,嘿嘿嘿,废话少说,进入正题。直接上实际效果图:

Js部分的代码,如下:

大家看到了吧,这是一个下拉菜单插件,在我们日常开发中,系统提供的可能有时让我们觉得不是很美观并且功能有限,造成用户

复制代码 代码如下:function ItemSelector{ 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{ this.getOpts()["current"] = current ;} ;ISProto.getCurrentValue = function{ return this.getOpts()["current"] ;} ;/* data manip*/ISProto.init = function(){ var that = this ; this.getOpts()["current"] = null ; // 数据游标 this._setItemValue["currentText"]) ; var itemsElem = that.getElem().find ; this.getElem.on{ itemsElem.toggle ; this.getElem.on{ itemsElem.toggle ; $.each["items"],function{ item["id"] = .toString() ; that._render ;} ;ISProto._setItemValue = function{ this.getElem.text} ;ISProto._render = function{ var that = this ; var itemElem = $ .text .attr ; if("0" == item["disabled"]){ itemElem.on{ var onChange = that.getOpts()["change"] ; that.getElem().find.hide() ; that._setItemValue ; that._setCurrent ; onChange && onChange .mouseover.addClass .mouseout.removeClass ; } else{ itemElem.css.on{ that.getElem().find.hide() ; that._setItemValue ; } itemElem.appendTo.find ;} ;

的体验形式以及用户的可交互性不是很好,所以今天模拟一个嘿嘿嘿。下面就具体分析一下吧。

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

,实例分析

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

,首先确定这个插件做什么事。下面看一下插件的调用方式,以及配置参数说明。如下代码:

,打开思路,进行重构

复制代码 代码如下:${ var itemSelector = new ItemSelector,{ 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{ // put your code here } }) ; itemSelector.init() ; setTimeout{ console.log(itemSelector.getCurrentValue ; // 测试 获取当先选中项 },2000) ;

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

“var itemSelector = new ItemSelector()”里面包含两个参数,第一个是dom节点对象,第二个是插件参数选项,"currentText"代表“ItemSelector“插件中,选中文本显示区域的文字描述。

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

”items“是一个数组,里面包含的是“ItemSelector”项目的属性,包括文字描述,选项值,”disabled“代表列表条目的可显度,0代表显示,1代表不可显示。

复制代码 代码如下:${ var itemSelector = new ItemSelector,{ 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 ;

”change“代表选中时的操作回调函数,选项数据会以参数的形式进行回传。

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

不可显的效果图如下:

接下来是要完成初始化逻辑,如下:

二者的区别是:不可现状态数据不会回传,悬浮上去不会有任何效果。

复制代码 代码如下:ISProto.init = function(){ var that = this ; this.getOpts()["current"] = null ; // 数据游标 this._setItemValue["currentText"]) ; var itemsElem = that.getElem().find ; this.getElem.on{ itemsElem.toggle ; this.getElem.on{ itemsElem.toggle ; $.each["items"],function{ item["id"] = .toString() ; that._render ;} ;

三),完整代码以供学习,本代码已经过测试,包括目录结构以及相关的文件。

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

复制代码 代码如下:

再继续看渲染部分代码:

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

复制代码 代码如下:ISProto._render = function{ var that = this ; var itemElem = $ .text .attr ; if("0" == item["disabled"]){ itemElem.on{ var onChange = that.getOpts()["change"] ; that.getElem().find.hide() ; that._setItemValue ; that._setCurrent ; onChange && onChange .mouseover.addClass .mouseout.removeClass ; } else{ itemElem.css.on{ that.getElem().find.hide() ; that._setItemValue ; } itemElem.appendTo.find ;} ;

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

复制代码 代码如下:/* item-selector */ #item-selector { margin : 0 auto; width : 220px ; overflow:hidden; border:2px solid #ccc;}#item-selector .title { border-bottom:1px solid #ccc; overflow:hidden;}#item-selector .title div { width:190px; border:0px ; color:#999; font-family: arial ; font-size: 14px; height:28px; line-height:28px; float:left; cursor:pointer;}#item-selector .title span { display:block; height:30px; line-height:30px; width:29px; float:left; text-align:center; border-left:1px solid #ccc; cursor:pointer;}#item-selector .content { width : 220px ; overflow:hidden;}#item-selector .content .items { overflow:hidden;}#item-selector .content .items div { padding-left:20px; width : 200px ; height:32px; line-height:32px; font-family: "微软雅黑" ; font-size: 14px; font-weight:bold; cursor:pointer;}.item-hover { background:#3385ff; color:#fff;}

本文由杏彩发布,转载请注明来源

关键词: