-
您好，请记住最后一篇文章。本文主要介绍了如何组织和实现一个制表符插件，并将流程设计和面向对象设计结合起来。
设计插件有两种方法。各有优缺点。本系列文章是面向学习的，我们决定使用特定场景的方式，
继续扩展相关功能。嘿嘿，少说点，直接输入实际效果图：
你看，添加了一个新的函数，如果我们在初始化时，条目的数量，项目模块的配置信息超过我们指定的，然后显示在更多的模块中。
隐藏的列表操作，初始化参数从新配置也如超过指定数量的条目的displaymax初始化调整，有一个项目属性、状态
在初始化中也去掉了不需要配置，在程序中动态生成配置，增加了程序的灵活性，下面是具体的分析。
（二）案例分析
（1）首先确定这个插件所做的工作：
复制代码代码如下所示：
{
按钮上显示的文本：添加模块
结果：{
{
文本：向导提示
URL
showclose：0
}，
{
文本：学生信息
URL
showclose：1
}，
{
文本：学生分类
网址：catery。HTML
showclose：1
}，
{
文本：大熊的{ } }
URL
showclose：1
}，
{
文本：beta测试模块
URL
showclose：1
}，
{
正文：三胖子
URL
showclose：1
}，
{
正文：四个秃头
URL
showclose：1
}
}，
displaymax：5 / /最显示的项目
}
U3000
bigbear.ui.createtab包含两个参数，第一个是DOM节点对象，二是插件的参数选择，以及按钮上显示的文本代表标签插件的操作按钮的文本描述。
结果是一个数组，其中包含选项卡项的属性，包括文本描述。单击选项卡项时，URL用于发出请求。showclose代表标签显示关闭按钮的选项。
在初始化过程中，状态也会在没有配置的情况下被删除，并在程序中动态生成配置。可能会关闭，分别是：1 -默认显示，0 -关闭，2 -多于默认条目数。
（2）功能步骤介绍
1，可选参数初始化插件：
复制代码代码如下所示：
$（函数（）{（））
bigbear.ui.createtab（$（#选项卡），{
按钮上显示的文本：添加模块
结果：{
{
文本：向导提示
URL
showclose：0
}，
{
文本：学生信息
URL
showclose：1
}，
{
文本：学生分类
网址：catery。HTML
showclose：1
}，
{
文本：大熊的{ } }
URL
showclose：1
}，
{
文本：beta测试模块
URL
showclose：1
}，
{
正文：三胖子
URL
showclose：1
}，
{
正文：四个秃头
URL
showclose：1
}
}，
displaymax：5 / /最显示的项目
}）；
}）；
2，呈现和完成时间绑定和相关的业务逻辑，例如在初始化时验证项目的数量。
复制代码代码如下所示：
tabproto.init =函数（）{
如果（这。_isemptyresult（））{
这_setcontent（没有模块！；
}
var =；
This.getElem（），发现（。标题。加法）
。文本（++ this.getopts（）{ 按钮上显示的文本}）
在（单击）
that.getelem（），发现（。控制台面板）。SlideToggle（function（）{（）
，_renderconsolepanel（0 ）；
}）；
}）；
美元。每个（this.getopts（）（结果}，功能（我的项目）{ }
如果（，_isdisplaymax（i + 1））{
，_saveorupdatestatus（项目，1 ）；
}
别的{
，_saveorupdatestatus（项目，2 ）；
}
这_render（项目）；
}）；
如果（！，_isdisplaymax（this.getopts（）{结果}。长度））{
This.getElem（），发现（。标题。更多的模式）。FadeIn（function（）{（）
$（this）查找（）。
var = $（this）；
Root.empty（）；
美元。每个（，_getitemlistbystatus（2 ），功能（我的数据）{
$（）。文本（数据{文本））
在（单击）
如果（，_getitemlistbystatus（1）。长度＜that.getopts（）{displaymax }）{
that.getelem（），发现（。title.items div）。情商（数据{指数}）。FadeIn（function（）{）
，_saveorupdatestatus（数据，1 ）；
}）；
}
别的{
警报（）不能添加任何模块，现在它是最大的数！；
}
}）
appendto（根）；
}）；
Root.toggle（）；
}）；
}）；
}
This.getElem（），发现（。title.items div）
情商（0）
触发器（）；必须具有插件，否则没有多大意义！
}；
3，TAB开关和数据内容渲染操作。
复制代码代码如下所示：
tabproto。_setcurrent =函数（指数）{
可变项目= this.getelem（），发现（。title.items div）。RemoveClass（主动）；
items.eq（指数），AddClass（主动）；
var内容= this.getelem（），发现（。内容。C）藏（）；
contents.eq（指数）显示（）；
}；
复制代码代码如下所示：
item.on（单击
，_setcurrent（$（this）。指数（））；
，_getcontent（数据{URL}），做（功能（结果）{）
这_setcontent（结果）；
}）
失败（函数（）{（））
抛出新错误（NET错误！；
}）；
}）
复制代码代码如下所示：
tabproto。_setcontent =功能（HTML）{
This.getElem（），发现（内容），Html（HTML）；
}；
tabproto。_getcontent =功能（URL）{
返回$ ajax（{
网址：网址
}）；
}；
4，核心辅助数据处理方法，不涉及DOM。
复制代码代码如下所示：
更新时间2015 1 / 26 / / * 15:36
tabproto。_isdisplaymax =功能（大小）{
无功displaymax = this.getopts（displaymax ）{ 5 } | |；
返回（大小displaymax真）：假；
}；
tabproto。_isemptyresult =函数（）{
如果（！This.getOpts（）{结果} {长度）。
返回false；
}
返回true；
}；
tabproto。_saveorupdatestatus =功能（项目、状态）{
项目{状态=状态；
}；
tabproto。_getitemlistbystatus =功能（状态）{
var列表{ }；
this.getopts（）{ var result =结果}；
每个（结果，函数（i，项目）{）
如果（状态项{状态}）{
List.push（项）；
}
}）；
返回列表；
}；
tabproto。_getstatusbyindex =函数（指数）{
var状态=空；
this.getopts（）{ var result =结果}；
每个（结果，函数（i，项目）{）
如果（索引项{ = index}）{
状态=项目{状态}；
}
}）；
返回状态；
}；
（三）完整的学习代码，代码已经过测试，包括目录结构和相关文件。
1、HTML
复制代码代码如下所示：
大熊君{ } } { BB -玉兔电子血压计---选项卡界面
+添加学生信息
X的欢迎页面
X的用户管理
xbigbear -->
更多的模块
姓名 uff1a
备注：uff1a
-->
2、CSS
复制代码代码如下所示：
{.Dxj-ui-hd
填料：0px；
保证金：0汽车；
边距：30px；
宽度：780px；
身高：60px；
行高：60px；
背景：# 3385ff；
颜色：# FFF；
字体微软雅黑；
字体大小：28px；
文本对齐：中心；
字体粗细：粗体；
}
{。玉兔电子血压计的UI BD
填料：0px；
保证金：0汽车；
宽度：778px；
30px垫上；
座垫：30px；
溢出：隐藏；
边境：1px solid # 3385ff；
}
UI BD { #选项卡。玉兔电子血压计
填料：0px；
保证金：0汽车；
宽度：720px；
溢出：隐藏；
职位：相对；
}
玉兔电子血压计tab.title { BD # UI。
宽度：720px；
溢出：隐藏；
底部边框：2px固体# 3385ff；
}
玉兔电子血压计tab.title.adder { BD # UI。
宽度：160px；
身高：32px；
行高：32px；
背景：# dc143c；
颜色：# FFF；
字体微软雅黑；
字体大小：14px；
文本对齐：中心；
字体粗细：粗体；
浮点数：左；
光标：指针；
}
玉兔电子血压计tab.title.more-mod { BD # UI。
溢出：隐藏；
边境：1px solid # dc143c；
宽度：70px；
位置：绝对；
权利：0；
右边距：6px；
显示：无；
}
。玉兔电子血压计的UI BD #标签。标题标签{。更多的MOD。
身高：32px；
行高：32px；
宽度：70px；
背景：# dc143c；
颜色：# FFF；
字体家庭：Arial；
字体大小：12px；
文本对齐：中心；
光标：指针；
}
玉兔电子血压计tab.title.more-mod.mods { BD # UI。
溢出：隐藏；
宽度：70px；
显示：无；
}
。玉兔电子血压计# UI BD tab.title.more-mod.mods div {
身高：24px；
行高：24px；
宽度：62px；
字体家庭：Arial；
字体大小：12px；
光标：指针；
左：10px填充；
}
玉兔电子血压计tab.title.items { BD # UI。
身高：32px；
宽度：480px；
溢出：隐藏；
浮点数：左；
}
。玉兔电子血压计# UI BD tab.title.items div {
填料：0px；
左：10px保证金；
宽度：84px；
身高：32px；
行高：32px；
背景：# 3385ff；
颜色：# FFF；
字体家庭：Arial；
字体大小：12px；
文本对齐：中心；
职位：相对；
浮点数：左；
光标：指针；
}
。玉兔电子血压计# UI BD tab.title.items div span.del {
宽度：16px；
身高：16px；
行高：16px；
显示块；
背景：# dc143c；
位置：绝对；
权利：0；
顶部：0；
光标：指针；
}
玉兔电子血压计tab.content { BD # UI。
宽度：716px；
30px垫上；
溢出：隐藏；
边境：2px固体# 3385ff；
边境上：0px；
最小高度：130px；
文本对齐：中心；
}
。玉兔电子血压计# UI BD tab.content表{
保证金：0汽车；
}
。玉兔电子血压计# UI BD tab.content div.c {
20px垫上；
左：20px填充；
背景：# Eee；
身高：140px；
}
。玉兔电子血压计# UI BD tab.content div.c.input-content {
边距：10px；
字体家庭：Arial；
字体大小：12px；
}
玉兔电子血压计tab.console-panel { BD # UI。
宽度：716px；
20px垫上；
座垫：20px；
溢出：隐藏；
边境：2px固体# 3385ff；
边境上：0px；
底部边框：2px固体# 3385ff；
背景：# FFF；
显示：无；
}
{活动。
字体粗细：粗体；
}
3、bigbear.js
复制代码代码如下所示：
（函数（$）{）
var =窗口；
VaR BB = win.bigbear = win.bigbear { | |
用户界面：{ }
}；
VaR的UI = bb.ui = { }；
Var Tab =功能（元素、选择）{
this.elem =元；
this.opts =选择；
}；
无功tabproto = tab.prototype；
更新时间2015 1 / 26 / / * 15:36
tabproto。_isdisplaymax =功能（大小）{
无功displaymax = this.getopts（displaymax ）{ 5 } | |；
返回（大小displaymax真）：假；
}；
tabproto。_isemptyresult =函数（）{
如果（！This.getOpts（）{结果} {长度）。
返回false；
}
返回true；
}；
tabproto。_saveorupdatestatus =功能（项目、状态）{
项目{状态=状态；
}；
tabproto。_getitemlistbystatus =功能（状态）{
var列表{ }；
this.getopts（）{ var result =结果}；
每个（结果，函数（i，项目）{）
如果（状态项{状态}）{
List.push（项）；
}
}）；
返回列表；
}；
tabproto。_getstatusbyindex =函数（指数）{
var状态=空；
this.getopts（）{ var result =结果}；
每个（结果，函数（i，项目）{）
如果（索引项{ = index}）{
状态=项目{状态}；
}
}）；
返回状态；
}；
tabproto。_renderconsolepanel =功能（状态）{
var =；
VaR的根that.getelem（），发现（。控制台面板）；
这_resetconsolepanel（）；
美元。每个（，_getitemlistbystatus（状态），功能（我的项目）{
var elem = $（）。AppendTo（根）；
（$）
数据（）
appendto（元素）；
$（）。文本（项目{文本}）AppendTo（元素）；
}）；
如果（root.find（div）。尺寸（））{
（$）
在（单击）
VaR数据= root.find（输入{类型=广播}：检查）。数据（项目）；
如果（，_getitemlistbystatus（1）。长度＜that.getopts（）{displaymax }）{
that.getelem（），发现（。title.items div）。情商（数据{指数}）。FadeIn（function（）{）
，_saveorupdatestatus（数据，1 ）；
}）
触发器（单击）；
}
别的{
，_saveorupdatestatus（数据，2 ）；
}
that.getelem（），发现（称号。加法器）。Trigger（点击）；
}）
appendto（根）；
}
别的{
Root.text（没有项目可以添加！；
}
}；
更新时间2015 1 / 26 / / * 15:36
tabproto。_setcurrent =函数（指数）{
可变项目= this.getelem（），发现（。title.items div）。RemoveClass（主动）；
items.eq（指数），AddClass（主动）；
var内容= this.getelem（），发现（。内容。C）藏（）；
contents.eq（指数）显示（）；
}；
tabproto.getelem =函数（）{
返回this.elem；
}；
tabproto.getopts =函数（）{
返回this.opts；
}；
tabproto。_resetcontent =函数（）{
This.getElem（），发现（内容），Html（）；
}；
tabproto。_setcontent =功能（HTML）{
This.getElem（），发现（内容），Html（HTML）；
}；
tabproto。_getcontent =功能（URL）{
返回$ ajax（{
网址：网址
}）；
}；
tabproto。_deleteitem =功能（元）{
var =；
This.getElem（），发现（。title.items div）
情商（elem.index（））。
。淡出（功能（）{（）
这_resetcontent（）；
，_saveorupdatestatus（elem.data（项目），0 ）；
，_triggeritem（elem.index（）+ 1）；
}）；
}；
tabproto。_triggeritem =函数（下）{
无功nextstatus =这_getstatusbyindex（下）；
可变项目= this.getelem（），发现（。title.items div）；
未来= items.eq（下）；
如果（下。大小）（1 = = nextstatus）{ / / DOM后继节点
Next.trigger（点击）；
}
别的{
items.eq（0），Trigger（点击）；
}
}；
tabproto。_resetconsolepanel =函数（）{
This.getElem（），发现（。控制台面板）空（）；
}；
tabproto.init =函数（）{
如果（这。_isemptyresult（））{
这_setcontent（没有模块！；
}
var =；
This.getElem（），发现（。标题。加法）
。文本（++ this.getopts（）{ 按钮上显示的文本}）
在（单击）
that.getelem（），发现（。控制台面板）。SlideToggle（function（）{（）
，_renderconsolepanel（0 ）；
}）；
}）；
美元。每个（this.getopts（）（结果}，功能（我的项目）{ }
如果（，_isdisplaymax（i + 1））{
，_saveorupdatestatus（项目，1 ）；
}
别的{
，_saveorupdatestatus（项目，2 ）；
}
这_render（项目）；
}）；
如果（！，_isdisplaymax（this.getopts（）{结果}。长度））{
This.getElem（），发现（。标题。更多的模式）。FadeIn（function（）{（）
$（this）查找（）。
var = $（this）；
Root.empty（）；
美元。每个（，_getitemlistbystatus（2 ），功能（我的数据）{
$（）。文本（数据{文本））
在（单击）
如果（，_getitemlistbystatus（1）。长度＜that.getopts（）{displaymax }）{
that.getelem（），发现（。title.items div）。情商（数据{指数}）。FadeIn（function（）{）
，_saveorupdatestatus（数据，1 ）；
}）；
}
别的{
警报（）不能添加任何模块，现在它是最大的数！；
}
}）
appendto（根）；
}）；
Root.toggle（）；
}）；
}）；
}
This.getElem（），发现（。title.items div）
情商（0）
触发器（）；必须具有插件，否则没有多大意义！
}；
tabproto。_render =功能（数据）{
var =；
项目= $（var ）。文本（数据{文本}），AppendTo（this.getelem（），发现（称号。项目）））；
数据{指数} = item.index（）；
item.on（单击
，_setcurrent（$（this）。指数（））；
，_getcontent（数据{URL}），做（功能（结果）{）
这_setcontent（结果）；
}）
失败（函数（）{（））
抛出新错误（NET错误！；
}）；
}）
数据（）
如果（2=数据状态）
item.hide（）；
}
如果（1 = =数据{ } {showclose ）
$（x ）
在（单击）
如果（确认）（）你删除这个项目吗{）
这_deleteitem（项目）；
返回false；停止泡沫
}
}）
appendto（项目）；
}
}；
ui.createtab =功能（元素、选择）{
var标签=新标签（元素、选择）；
Tab.init（）；
返回标签；
}；
}（jQuery）；
U3000 U3000
（四）最后摘要
（1）面向对象的思维方式是对功能需求的合理分析。
（2）以类的方式组织我们的插件逻辑。
（3）不断重构上述例子，如何进行合理的重构不要过分设计，要能轻松，推荐的方法是流程设计和面向对象设计的结合。