一、开篇分析。

大家好！在前两篇文章中，我们主要讲了“如何用jQuery开发插件”，以及如何将流程设计和面向对象的思想设计结合起来设计一个插件。两种方法各有利弊，取长补短。嘿嘿嘿，废话少说，言归正传。直接实际渲染：

如您所见，这是一个下拉菜单插件。在我们的日常开发中，系统提供的可能性有时会让我们觉得没有吸引力，功能有限，导致用户。

用户的体验形式和互动性都不是很好，所以今天，模拟一个嘿嘿嘿。下面具体分析一下。

(二)、案例分析。

(1)、首先确定插件做什么。让我们看一下插件的调用方法和配置参数的描述。以下代码：

复制代码如下： $(function(){ var item selector=new item selector($(' # item-selector '))，{currenttext: '请选择item '，items :[{ text : ' JavaScript '，值： 'js '，禁用： '1' }，{ text : 'Css '，值： 'Css '，禁用3: ' 0 ' }，{ text 333333330items elector . init()；setTimeout(function(){ console . log(itemselector . getcurrentvalue())；//测试得到第一个选中的项目}，2000)；

“var items elector=new items elector()”包含两个参数，第一个是dom节点对象，第二个是插件参数选项。“currentText”代表“itemselector”插件中所选文本显示区域的文本描述。

“items”是一个数组，包含“ItemSelector”的属性，包括文本描述和选项值。“disabled”表示列表项的可见性，0表示显示，1表示不显示。

“change”代表选中时的操作回调函数，选项数据将以参数的形式返回。

(2)涉及哪些功能？

可见渲染如下：

不可见的渲染如下：

两者的区别在于不可呈现状态的数据不会被返回，暂停不会有任何影响。

3)完整的学习代码。这段代码已经过测试，包括目录结构和相关文档。

(1)、html

复制的代码如下： body div class=' dxj-ui-HD ' Da熊俊{ { bb } }-dxj ui-item selector/div class=' dxj-ui-BD ' div id=' item selector ' div class=' title ' div/div span/span/div class=' content ' div class=' items '/div/div/div/body

(2)、css

复制的代码如下：/*项目选择器*/#项目选择器{ margin : 0 auto宽度： 220px飞越：隐藏；border:2px固体# ccc} #项目选择器。title { border-bottom :1 px solid # CCC；飞越：隐藏；} #项目选择器。title div { width:190pxborder:0pxcolor: # 999font-family : arial；font-size : 14px；高度：28 px；行高：28 px；float:leftcursor:pointer指针；} #项目选择器。title span { display:block高度：30 px；线高：30 px；宽度：29 px；float:left文本对齐：居中；边框-左侧：1px实心# ccccursor:pointer指针；} #项目选择器。内容{ width : 220px飞越：隐藏；} #项目选择器。内容。项目{ overflow:hidden} #项目选择器。内容。items div { padding-left :20 px；宽度： 200pxheight:32px线高：32 px；Font-family: '微软雅黑'；font-size : 14px；font-weight : bold；cursor:pointer指针；}.item-悬停{ background: # 3385ffcolor: # fff}

(3)，' ItemSelector.js '

复制代码代码如下：功能ItemElector(elem，opts){ this。elem=elemthis . opts=opts }；var ISProto=项目选举人。原型；isproto。getelem=function(){返回这个。elem} ;互联网服务提供商协议。GetOpts=function(){返回这个。opts} ;/*数据manip*/ISProto ._ SetCurrent=function(current){ this。GetOpts()[' current ']=current；} ;isProto。GetCurrentValue=function(current){ return this。GetOpts()[' current ']；} ;/* data manip */isproto。init=函数(){ var那=这是。GetOpts()[' current ']=null；//数据游标这个_ SetItemValue(这。GetOpts()[' CurrentText '])；var itemsElem=that.getElem().查找('。内容项目')；this.getElem().查找('。标题div ').on('click '，function(){ item elem。toggle()；}) ;this.getElem().查找('。标题跨度')。on('click '，function(){ item elem。toggle()；}) ;$.每个(this.getOpts()['items']，函数(I，item){ item['id']=(新日期()。getTime()).toString()；那个_render(项目);}) ;} ;互联网协议._setItemValue=函数（值){ this.getElem().查找('。标题div ').文本（值)};互联网协议._渲染=函数（项){ var=thisvar itemElem=$('div/div ').文本（项目['text']).attr('id '，项目[' id '])；if(' 0 '==item[' disabled ']){ item elem。on(' click ')，function(){ var onChange=that。getopts()[' change ']；that.getElem().查找('。内容。项目')。hide()；那个_setItemValue(项[' text '])；那个_setCurrent(项目);onChange onChange(项目);}) .mouseover(函数(){ $(this)).add CLaSS(' item-hover ')；}) .mouseout(函数(){ $(此)).移除CLaSS(' item-hover ')；}) ;} else{ itemElem.css('color '，' #ccc ').on('click ')，function(){ that.getElem().查找('。内容。项目')。hide()；那个_setItemValue(项[' text '])；}) ;} ItemElem。附录(这个。GetElem().查找('。内容项目')；} ;

（四),最后总结

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

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

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

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

本文先到这里了，后续我们再继续讨论，希望小伙伴们能够喜欢本系列文章。