Javaｓｃｒｉｐｔ插件开发教程（三）
首先，开放分析在前两篇文章中，我们主要讨论了如何用jQuery开发插件，以及流程设计与面向对象思想设计相结合的方法。
设计插件有两种方法。各有优缺点。这一系列的文章是以学习为导向的，我们决定如何使用特定的场景。所以今天，从这篇文章中，我们以自己的插件库为例，进行了一个肤浅而深入的开发：
正如您所看到的，这是一个选项卡式插件。当我们使用单页应用程序时，它可能会被触动。让我们以今天的例子为例。
我们建立了一个基于BS结构的系统。有几个模块。它们都是建筑系统的组成部分。通过这个插件，我们可以有效地管理我们的模块。
以经验的形式和用户的互动性，以下是具体的分析。
（二）案例分析
（1）首先确定这个插件所做的工作：
复制代码代码如下所示：
bigbear.ui.createtab（$（#选项卡），{
按钮上显示的文本：添加模块
结果：{
{
文本：向导提示
URL
showclose：0
状态：1
}，
{
文本：学生信息
URL
showclose：1
状态：1
}，
{
文本：学生分类
网址：catery。HTML
showclose：1
状态：1
}，
{
文本：大熊的{ } }
URL
showclose：1
状态：1
}，
{
文本：beta测试模块
URL
showclose：1
状态：1
}
}
}）；
bigbear.ui.createtab包含两个参数，第一个是DOM节点对象，二是插件的参数选择，以及按钮上显示的文本代表标签插件的操作按钮的文本描述。
结果是一个数组，其中包含选项卡项的属性，包括文本描述。单击选项卡项时，URL用于发出请求。showclose代表标签显示关闭按钮的选项。
状态表示选项的状态，默认是打开状态，并且可能有一个关闭状态，分别为：1打开，0关闭。
（2）涉及的职能是什么
通过可选参数，动态生成相关的选项条目，如下面的示例：
复制代码代码如下所示：
bigbear.ui.createtab（$（#选项卡），{
按钮上显示的文本：添加模块
结果：{
{
文本：jQuery源代码分析
URL
showclose：0
状态：1
}，
{
文本：大熊的{ } }
URL
showclose：1
状态：1
}
}
}）；
结果如下：
可以自由添加和删除条目选项，如下面的结果所示：
上面的图片是在没有模块的情况下提示信息的情况之一。
这是第二种情况，在删除之前可以恢复。
（三）完整的学习代码，代码已经过测试，包括目录结构和相关文件。
（1）HTML
复制代码代码如下所示：
大熊君{ } } { BB -玉兔电子血压计---选项卡界面
+添加学生信息
X的欢迎页面
X的用户管理
xbigbear -->
姓名 uff1a
备注：uff1a
-->
（2）CSS文件代码
复制代码代码如下所示：
{。玉兔电子血压计的UI高清
填料：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.items { BD # UI。
身高：32px；
左：20px保证金；
宽度：540px；
溢出：隐藏；
浮点数：左；
}
。玉兔电子血压计# UI BD tab.title.items div {
填料：0px；
左：10px保证金；
宽度：96px；
身高：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）js代码如下所示：
复制代码代码如下所示：
$（函数（）{（））
bigbear.ui.createtab（$（#选项卡），{
按钮上显示的文本：添加模块
结果：{
{
文本：向导提示
URL
showclose：0
状态：1
}，
{
文本：学生信息
URL
showclose：1
状态：1
}，
{
文本：学生分类
网址：catery。HTML
showclose：1
状态：1
}，
{
文本：大熊的{ } }
URL
showclose：1
状态：1
}，
{
文本：beta测试模块
URL
showclose：1
状态：1
}
}
}）；
}）；
（函数（$）{）
var =窗口；
VaR BB = win.bigbear = win.bigbear { | |
用户界面：{ }
}；
VaR的UI = bb.ui = { }；
Var Tab =功能（元素、选择）{
this.elem =元；
this.opts =选择；
}；
无功tabproto = tab.prototype；
tabproto。_deleteitem =功能（项目）{
var =；
This.getElem（），发现（。title.items div）
EQ（项目{索引）
。淡出（功能（）{（）
这_resetcontent（）；
这_updatestatus（项目）；
，_triggeritem（项目{指数} + 1）；
that.getelem（），发现（称号。加法器）。Trigger（点击）；
}）；
}；
tabproto。_triggeritem =函数（下）{
无功nextstatus =这_getstatus（下）；
可变项目= this.getelem（），发现（。title.items div）；
未来= items.eq（下）；
如果（下。大小）（1 = = nextstatus）{ / / DOM后继节点
Next.trigger（点击）；
}
别的{
items.eq（0），Trigger（点击）；
}
}；
tabproto。_getstatus =函数（指数）{
var状态；
美元。每个（this.getopts（）（结果}，功能（我的项目）{ }
如果（索引项{ = index}）{
状态项状态}；
返回false；
}
}）；
返回状态；
}；
tabproto。_updatestatus =功能（项目）{
var状态=项目{状态}；
项目{状态} =（1=状态）0：1；
}；
tabproto.init =函数（）{
var =；
This.getElem（），发现（。标题。加法）
。文本（++ this.getopts（）{ 按钮上显示的文本}）
在（单击）
，_toggleconsolepanel（函数（）{（）
VaR的根that.getelem（），发现（。控制台面板）空（）；
美元。每个（that.getopts（）（结果}，功能（我的项目）{ }
如果（0=项目状态）
var elem = $（）
数据（）
appendto（根）；
$（）。AppendTo（元）；
$（）。文本（项目{文本}）AppendTo（元素）；
}
}）；
如果（root.find（div）。尺寸（））{
（$）
在（单击）
VaR数据= root.find（输入{类型=广播}：检查）。父（）。数据（项目）；
这_updatestatus（数据）；
that.getelem（），发现（。title.items div）。情商（数据{指数}），FadeIn（），Trigger（点击）；
that.getelem（），发现（称号。加法器）。Trigger（点击）；
}）
appendto（根）；
}
别的{
Root.text（没有项目可以添加！；
}
}）；
}）；
美元。每个（this.getopts（）（结果}，功能（我的项目）{ }
项目{索引= i；
这_render（项目）；
}）；
This.getElem（），发现（。title.items div）
情商（0）
触发器（）；必须具有插件，否则没有多大意义！
}；
tabproto。_toggleconsolepanel =函数（回调）{
This.getElem（），发现（。控制台面板）。SlideToggle（function（）{（）
美元。功能（回调）回调（）；
}）；
}；
tabproto。_resetcontent =函数（）{
This.getElem（），发现（内容），Html（）；
}；
TabProto._setContent = function (HTML) {
This.getElem（），发现（内容），Html（HTML）；
}；
tabproto。_getcontent =功能（URL）{
返回$ ajax（{
网址：网址
}）；
}；
tabproto。_render =功能（数据）{
var =；
var项目= $（ ）
文本（数据{文本）
在（单击）
，_setcurrent（数据{指数））；
，_getcontent（数据{URL}），做（功能（结果）{）
这_setcontent（结果）；
}）
失败（函数（）{（））
抛出新错误（NET错误！；
}）；
}）
。appendto（this.getelem（），发现（称号。项目））；
如果（1 = =数据{ } {showclose ）
$（x ）
在（单击）
如果（确认）（）你删除这个项目吗{）
这_deleteitem（数据）；
返回false；停止泡沫
}
}）
appendto（项目）；
}
}；
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；
}；
ui.createtab =功能（元素、选择）{
var标签=新标签（元素、选择）；
Tab.init（）；
返回标签；
}；
}（jQuery）；
（四）最后摘要
（1）面向对象的思维方式是对功能需求的合理分析。
（2）以类的方式组织我们的插件逻辑。
（3）不断重构上述例子，如何进行合理的重构不要过分设计，要能轻松，推荐的方法是流程设计和面向对象设计的结合。
（4）考虑选项卡中的选项是否可以在上面的示例中分离成一个单独的类。带着疑问思考。
以上是本文的全部内容，后续我们将继续完善插件，像这篇文章一样，给予一些赞扬。