-
我们今天该怎么说这篇文章呵呵，我们就在文章的最后调整不足逐步分析了它在一个浅的方式，让你有一个逐步完善的过程。少说话，进入点。让我们回到以前。
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（），发现（。内容。项目））；
}；
效果如下图所示：
（a）-非可操作状态
B）----可操作状态
（二）开放思路、结构调整
从代码中可以看出，它通过Js的语法特点，以面向对象的方式有效地组织起来。它比松散的形式化组织方式要好得多，但仍有许多不足之处。
（1）代码中重复的代码太多了。
（2）责任划分不明确。
（3）过程不完善。
我们基于上述要点进行了有效的重构，首先要对这个组件的需求进行排序，其功能点如下：
（1）初始化配置组件。
复制代码代码如下所示：
$（函数（）{（））
无功itemselector =新itemselector（$（#项选择器），{
currenttext：请选择项目
项目：{
{
文本：
值：js
禁用：1
}，
{
文本：CSS
值：CSS
禁用：0
}，
{
文本：
值：html
禁用：0
}
}，
}）；
ItemSelector.init（）；
}）；
此代码非常清晰，无需进行任何修改，但可以根据上述配置扩展功能，例如，添加配置项模式支持多个选项。
下面是完成初始化逻辑，如下所示：
复制代码代码如下所示：
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。_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（），发现（。内容。项目））；
}；
问题是显而易见的，已经找到了可重复的操作，应该进行合理的抽象，并实现重用的目的。
整个构建过程包括初始化、渲染（事件绑定）、相关的数据操作方法以及DOM操作的辅助方法。
总之，在简单梳理后，要确立运行目标函数和主要任务分配过程、职责。
所以我们重构的目的是明确的，对吗！它是抽象的功能点，友好分工的责任，我们如何做到这一点
第一步是建立过程函数方法：（方法接口）
复制代码代码如下所示：
isproto.init =函数（）{
你在这里编码！
}；
ISProto。_render =函数（）{
你在这里编码！
}；
第二部分，界面抽象方法的建立：
复制代码代码如下所示：
ISProto。_fnitemselectordelegatehandler =函数（）{
你在这里编码！
}；
ISProto。_fntriggerhandler =函数（）{
你在这里编码！
}；
ISProto。_addorremoveclass =函数（）{
你在这里编码！
}；
第三步是建立数据操作接口：
复制代码代码如下所示：
ISProto。_setcurrent =函数（）{
你在这里编码！
}；
ISProto。_getcurrent =函数（）{
你在这里编码！
}；
也有一些参考以下完整的源代码，这里只是说的想法。
（三）完整的学习代码，代码已经过测试。
复制代码代码如下所示：
功能itemselector（元素、选择）{
this.elem =元；
this.opts =选择；
this.current = 1； / /数据指针
}；
无功isproto = itemselector.prototype；
*吸气剂API
isproto.getelem =函数（）{
返回this.elem；
}；
isproto.getopts =函数（）{
返回this.opts；
}；
ISProto。_getcurrent =函数（）{
返回this.current；
}；
*吸气剂API
*数据操纵 / *
ISProto。_setcurrent =功能（电流）{
this.current =电流；
}；
ISProto。_setitemtext =功能（文本）{
This.getElem（），发现（。标题div）的文本（text）；
}；
*数据操纵 / *
更新2015 1 / 31 / * * / 23:38
ISProto。_fntriggerhandler =函数（指数、文本值）{
如果（这。_isdisabled（值））{
索引= 1；
文本= this.getopts（）{currenttext}；
}
这_setitemtext（文本）；
这_setcurrent（指数）；
This.getElem（），发现（。内容。项目）藏（）；
}；
ISProto。_addorremoveclass =功能（元素、类名、Addis）{
如果（Addis）{
Elem.addClass（类名）；
}
别的{
Elem.removeClass（类名）；
}
}；
ISProto。_fnitemselectordelegatehandler =函数（）{
var =；
This.getElem（）（），（单击
that.getelem（），发现（。内容。项目）的Toggle（）；
}）；
}；
ISProto。_isdisabled =函数（值）{
返回（1 = value）：false；
}；
Update on 2015 1/31 23:38 / * * /
isproto.init =函数（）{
var =；
这_fnitemselectordelegatehandler（）；
美元。每个（this.getopts（）（项目}，功能（我的项目）{ }
项目{索引= i；
这_render（项目）；
}）；
这个_fntriggerhandler（这个。_getcurrent（），this.getopts（）（currenttext}，1 ）；
}；
ISProto。_render =功能（项目）{
var =；
无功itemelem = $（）。文本（项目{文本}）。Attr（身份
var =活动类一样（0 =项目{禁用）项目将：项禁用悬停；
itemelem.on（单击
，_fntriggerhandler（项目{指数}，{项目文本}，{禁用项目））；
}）
.mouseover（函数（）{（）
，_addorremoveclass（$（this）、活动类一样，真的）；
}）
。mouseout（函数（）{（）
，_addorremoveclass（$（this）、活动类一样，假）；
}）；
ItemElem.appendTo（this.getelem（），发现（。内容。项目））；
}；
U3000 U3000
（四）最后摘要
（1）面向对象的思维方式是对功能需求的合理分析。
（2）以类的方式组织我们的插件逻辑。
（3）不断重构上述例子，如何进行合理的重构不要过分设计，要能轻松，推荐的方法是流程设计和面向对象设计的结合。
（4），下一篇文章将拓展相关功能，如模式属性，复选框支持多选模式是1
为了看看我是否比上一个代码好得多，我的合作伙伴应该更多地考虑他们自己的项目，并努力使他们的代码更加合理。