Javaｓｃｒｉｐｔ插件开发教程（五）
首先，开放分析嗨，大家好！前两篇文章主要介绍如何以jQuery插件的形式进行开发，而面向对象的设计思想是一个结合如何设计插件的方法，这两种方法各有优缺点，嘿嘿，废话就下来，直接在实际效果图上：
正如您所看到的，这是一个下拉菜单插件。在我们的日常开发中，系统有时会让我们觉得它不美观，功能有限，造成用户。
体验的形式和用户的交互性不是很好，所以今天模拟一下嘿嘿。
（二）案例分析
（1）首先确定这个插件所做的工作：
复制代码代码如下所示：
$（函数（）{（））
无功itemselector =新itemselector（$（#项选择器），{
currenttext：请选择项目
项目：{
{
文本：
值：js
禁用：1
}，
{
文本：CSS
值：CSS
禁用：0
}，
{
文本：
值：html
禁用：0
}
}，
模式：0
更改：函数（值）{
您的代码在这里
}
}）；
ItemSelector.init（）；
setTimeout（）{（）函数（
Console.log（（itemselector。getcurrentvalue））； / /第一测试获取选定项
}，2000）；
U3000
无功itemselector =新itemselector（）包含两个参数，第一个是DOM节点对象，二是插件的参数选择，currenttext代表itemselector插件，和文本的显示区域的文本描述的选择。
项目是一个数组，其中包含itemselector项目的属性，包括文字描述、选择价值、残疾人代表列表项目的知名度，0个代表，与1个代表无法显示。
当选择时，更改代表操作回调函数，并且选项数据将以参数的形式返回。
（2）涉及的职能是什么
可见结果如下：
以下结果如下：
两者之间的区别是，非当前状态的数据不会返回，对暂停不会有任何影响。
（三），完整的学习代码，代码已经过测试，包括目录结构和相关文件。
（1）HTML
复制代码代码如下所示：
大熊君{ } } { BB -玉兔电子血压计--- itemselector UI
在这里
（2）CSS
复制代码代码如下所示：
项目选择器
{ #项选择器
保证金：0汽车；
宽度：220px；
溢出：隐藏；
边境：2px固体# CCC；
}
# item-selector.title {
底部边框：1px solid # CCC；
溢出：隐藏；
}
# item-selector.title div {
宽度：190px；
边境：0px；
颜色：# 999；
字体家庭：Arial；
字体大小：14px；
身高：28px；
行高：28px；
浮点数：左；
光标：指针；
}
# item-selector.title跨度{
显示块；
身高：30px；
行高：30px；
宽度：29px；
浮点数：左；
文本对齐：中心；
左边界：1px solid # CCC；
光标：指针；
}
# item-selector.content {
宽度：220px；
溢出：隐藏；
}
# item-selector.content.items {
溢出：隐藏；
}
# item-selector.content.items div {
左：20px填充；
宽度：200px；
身高：32px；
行高：32px；
字体微软雅黑；
字体大小：14px；
字体粗细：粗体；
光标：指针；
}
{项目悬停
背景：# 3385ff；
颜色：# FFF；
}
（3）、itemselector .js
复制代码代码如下所示：
功能itemselector（元素、选择）{
this.elem =元；
this.opts =选择；
}；
无功isproto = itemselector.prototype；
isproto.getelem =函数（）{
返回this.elem；
}；
isproto.getopts =函数（）{
返回this.opts；
}；
*数据操纵 / *
ISProto。_setcurrent =功能（电流）{
This.getOpts（）{ } =电流电流；
}；
isproto.getcurrentvalue =功能（电流）{
返回this.getopts（）{电流}；
}；
*数据操纵 / *
isproto.init =函数（）{
var =；
this.getopts（当前）{ } = null； / /数据指针
这个_setitemvalue（this.getopts（）（currenttext ））；
无功itemselem = that.getelem（），发现（。内容。项目）；
This.getElem（），发现（。标题DIV ），（单击
ItemsElem.toggle（）；
}）；
This.getElem（），发现（。标题跨度），（单击
ItemsElem.toggle（）；
}）；
美元。每个（this.getopts（）（项目}，功能（我的项目）{ }
项目{id=（新的日期（）GetTime（）ToString（））；
这_render（项目）；
}）；
}；
ISProto。_setitemvalue =函数（值）{
This.getElem（），发现（。标题div）文本（价值）。
}；
ISProto。_render =功能（项目）{
var =；
无功itemelem = $（）
文本（项目{文本）
attr（身份证。
如果（0=项目=禁用）
itemelem.on（单击
无功的变化= that.getopts（）{改变}；
that.getelem（），发现（。内容。项目）藏（）；
，_setitemvalue（项目{文本））；
这_setcurrent（项目）；
OnChange onChange（项）；
}）
.mouseover（函数（）{（）
$（这）。AddClass（项目悬停）；
}）
。mouseout（函数（）{（）
$（这）。RemoveClass（项目悬停）；
}）；
}
别的{
itemelem.css（颜色
that.getelem（），发现（。内容。项目）藏（）；
，_setitemvalue（项目{文本））；
}）；
}
ItemElem.appendTo（this.getelem（），发现（。内容。项目））；
}；
（四）最后摘要
（1）面向对象的思维方式是对功能需求的合理分析。
（2）以类的方式组织我们的插件逻辑。
（3）不断重构上述例子，如何进行合理的重构不要过分设计，要能轻松，推荐的方法是流程设计和面向对象设计的结合。
（4），下一篇文章将拓展相关功能，如模式属性，复选框支持多选模式是1
本文首先在这里，我们将继续讨论它在未来，希望合作伙伴将能够享受这一系列文章。