Javaｓｃｒｉｐｔ插件开发教程（二）
首先，开放分析嗨，大家好！请记住前面的文章——这个系列的开始（Javaｓｃｒｉｐｔ插件开发教程1），主要是关于如何以jQuery的方式开发插件。
因此，今天我们将讨论昨天的问题，以继续我们的插件开发旅程：
（1）如果这些插件取代了项目技术选择，并且强烈依赖于jQuery机制，我们将无法使用以前编写的插件（假设没有jQuery）。我们如何重建它们
（2）重构插件的关键逻辑，我们将如何组织它
好了，带着这个问题，今天就学习这篇文章吧。
首先，我不是否认jQuery插件的方法，下一步是从不同的角度分析这个问题，例如，jQuery插件具有以下优点：
（1）将所有代码放入闭包（即时执行函数）。此时，闭包相当于一个私有范围，并且不能访问外部信息，并且不会对全局变量造成污染。
（2），A）避免全局依赖；b）为了避免第三方破坏；c）兼容jQuery and'jquery经营者'$'。
那么，重构将以何种方式组织代码，面向对象的思想（OOP）还是最终思考的过程或者这两种设计的结合哈哈哈，继续找。
二、重组昨天的例子
下面是昨天的js源代码的一部分：
复制代码代码如下所示：
（函数（$）{）
美元。fn.bigbear =功能（选择）{
选择（美元。fn.bigbear.defaults，美元。延长= {}，选择）；
返回this.each（函数（）{（）
var elem = $（this）；
Elem.find（跨）。文本（选择{标题））；
美元。获得（选择{URL功能（数据）{ }，
Elem.find（div）。文本（数据{文本））；
}）；
}）；
}；
fn.bigbear.defaults = { {美元。
标题：这是一个简单的测试。
URL
}；
}）（jQuery）；
让我们一行一行地分析它：
首先确定插件的功能。
（1）显示我们设置的标题的文本信息。
（2）它以异步方式动态获取内容信息。
好 uff01the需求是明确的，并且讨论的开始。从上面的代码中可以看出，逻辑组织非常松散，过程思维非常明显。因此，第一步是制定我们的功能要求。
在类中有效地组织：
复制代码代码如下所示：
$（函数（）{（））
$（# BB）。Bigbear（）；
}）；
（函数（$）{）
美元。fn.bigbear =功能（选择）{
选择（美元。fn.bigbear.defaults，美元。延长= {}，选择）；
返回this.each（函数（）{（）
var elem = $（this）；
VaR BB =新只大熊（元素、选择）；
Bb.getElem（），Trigger（数据）；
}）；
}；
fn.bigbear.defaults = { {美元。
标题：这是一个简单的测试。
URL
}；
}）（jQuery）；
功能只大熊（元素、选择）{
this.elem =元；
this.opts =选择；
This.init（）；
}；
无功bbproto = bigbear.prototype；
bbproto.getelem =函数（）{
返回this.elem；
}；
bbproto.getopts =函数（）{
返回this.opts；
}；
bbproto.init =函数（）{
var =；
This.getElem（），（数据
，_settitle（that.getopts（）（标题））；
美元。得到（that.getopts（）（URL功能（结果）}，{）
that.getelem（），发现（div）。文本（结果{文本））；
}）；
}）；
}；
BbProto。_settitle =功能（文本）{
This.getElem（），发现（跨）的文本（text）；
}；
哈哈哈，有很多代码吗实际上，这种方式就是面向对象的问题。首先，我们需要分析功能需求，然后设计我们的类，尽管我们不能很好地设计。
但是观点已经改变了，我们的代码可读性更好，维护得更好，从而达到了我们的目的。
以下是从bootstrapjs段相关的源代码实现，如下：
不难看出，它是通过类维护我们的插件的主要逻辑的类似实现方法。
（三）添加新功能并导致额外的类
随着需求的增加，需要改变经验，在加载数据时加载效果。
其思想是将文本设置为原始内容区域中的加载数据，然后引入一个新类，如下所示：
复制代码代码如下所示：
函数覆盖（）{
}；
无功olproto = overlay.prototype；
olproto.show =函数（）{ }；
olproto.hide =函数（）{ }；
不写/实现
好了，面膜层已经可用了。现在我们如何整合呢我们以一种组合的方式访问它，如下所示：
复制代码代码如下所示：
功能只大熊（元素、选择）{
this.elem =元；
this.opts =选择；
this.overlay =新的覆盖（）；
This.init（）；
}；
无功bbproto = bigbear.prototype；
bbproto.getelem =函数（）{
返回this.elem；
}；
bbproto.getopts =函数（）{
返回this.opts；
}；
bbproto.init =函数（）{
var =；
无功loadingtext =数据加载。；
This.getElem（），（数据
，_settitle（that.getopts（）（标题））；
that.overlay.show（）；
that.getelem（），发现（div）文本（loadingtext）；
美元。得到（that.getopts（）（URL功能（结果）}，{）
that.overlay.hide（）；
that.getelem（），发现（div）。文本（结果{文本））；
}）；
}）；
}；
BbProto。_settitle =功能（文本）{
This.getElem（），发现（跨）的文本（text）；
}；
这只是我们函数的结束。我编写的插件比第一个版本要好得多。当然，这不是最好的实现，它需要从细节中重建，但这种方式是开发插件的可选方法。
下面是完整的代码：
复制代码代码如下所示：
$（函数（）{（））
$（# BB）。Bigbear（）；
}）；
（函数（$）{）
美元。fn.bigbear =功能（选择）{
选择（美元。fn.bigbear.defaults，美元。延长= {}，选择）；
返回this.each（函数（）{（）
var elem = $（this）；
VaR BB =新只大熊（元素、选择）；
Bb.getElem（），Trigger（数据）；
}）；
}；
fn.bigbear.defaults = { {美元。
标题：这是一个简单的测试。
URL
}；
}）（jQuery）；
功能只大熊（元素、选择）{
this.elem =元；
this.opts =选择；
this.overlay =新的覆盖（）；
This.init（）；
}；
无功bbproto = bigbear.prototype；
bbproto.getelem =函数（）{
返回this.elem；
}；
bbproto.getopts =函数（）{
返回this.opts；
}；
bbproto.init =函数（）{
var =；
无功loadingtext =数据加载。；
This.getElem（），（数据
，_settitle（that.getopts（）（标题））；
that.overlay.show（）；
that.getelem（），发现（div）文本（loadingtext）；
美元。得到（that.getopts（）（URL功能（结果）}，{）
that.overlay.hide（）；
that.getelem（），发现（div）。文本（结果{文本））；
}）；
}）；
}；
BbProto。_settitle =功能（文本）{
This.getElem（），发现（跨）的文本（text）；
}；
函数覆盖（）{
}；
无功olproto = overlay.prototype；
olproto.show =函数（）{ }；
olproto.hide =函数（）{ }；
不写/实现
本文暂时在这里，以及合作伙伴是否对插件开发Javaｓｃｒｉｐｔ有了新的了解。