jQuery插件开发详解教程

jQuery插件和方法的扩展功能非常强大，并且节省了大量开发时间。

首先，介绍

写一个jQuery插件开始增加新的功能特性，jquery.fn，对象和属性的名称添加到这里是你的插件的名称：
复制代码代码如下所示：
jquery.fn.myplugin =函数（）{

/您自己的插件代码

}；
用户最喜欢的符号在哪里它仍然存在，但是为了避免与其他Javaｓｃｒｉｐｔ库的冲突，我们最好将jQuery传输到一个自执行的关闭程序。jQuery在这个程序中映射到$符号，这样美元数就可以被其他库覆盖。
复制代码代码如下所示：
（函数（$）{）
（美元。fn.myplugin =功能）{
/您自己的插件代码
}；
}（jQuery）；
在这个封闭的程序中，我们可以使用$符号来无限制地表示jQuery函数。
两。环境

现在，我们可以开始编写实际的代码插件。但在那之前，我们必须要有一个概念的环境中，插件的位置。在插件的范围，这个关键词是jQuery对象，插件是要执行的，那里是一个普遍的误解，因为在其他jQuery函数包含回调，this关键字代表原生DOM元素。这往往导致开发商在jQuery的这个关键词没有意义的想念，如下图所示。
复制代码代码如下所示：
（函数（$）{）
（美元。fn.myplugin =功能）{

没有必要将这个包放在$，$（this）上，因为这是一个jQuery对象。
/ / $（这）相当于$（$（' #元））；

This.fadeIn（正常，函数（）{（）{

在这里，回调函数这个关键字表示一个DOM元素。

}）；

}；
}（jQuery）；

$（#元），MyPlugin（）；
三。基本知识

现在，我们了解了jQuery插件的基本知识，让我们编写一个插件并做一些事情。
复制代码代码如下所示：
（函数（$）{）

（美元。fn.maxheight =功能）{

var max＝0；

this.each（函数（）{（）
马克斯= math.max（Max，$（这）。Height（））；
}）；

返回最大值；
}；
}（jQuery）；

VaR（'div美元最高=）。MaxHeight（DIV）； / /返回元素的最大高度

这是一个简单的插件，它使用高度（）返回页面中最高div元素的高度。

四。维护chainability

很多时候，一个插件的目的是修改收集要素以一定的方式传递给链中的下一个方法。这是jQuery的设计之美，一个jQuery是为什么如此受欢迎的原因。所以，保持一个插件chainability，你要确保你的插件返回这个关键词。
复制代码代码如下所示：
（函数（$）{）

美元。fn.lockdimensions =功能（型）{

返回this.each（函数（）{（）

var $ = $（这个）；

如果（类型| |！= = 'width）{
this.width美元（美元this.width（））；
}

如果（类型| |！= = 'height）{
this.height美元（美元this.height（））；
}

}）；

}；
}（jQuery）；

$（'div）。LockDimensions（'width '）.css（色彩，'）；

因为插件返回这个关键词，它使chainability使jQuery收集的元素可以继续通过jQuery的方法，控制as.css.therefore，如果你的插件不返回的内在价值，你应该总是在其行动范围返回这个关键词。此外，你可以推断出，通过该插件的参数将在行动的插件的范围了。因此，在前面的例子中，该string'width'becomes插件的类型参数。

五。默认值和选项

对于可以定制的更复杂和多个插件，最好有一个默认的设置，当插件被调用时（使用扩展名）可以扩展。因此，不调用具有大量参数的插件，可以调用对象参数，包括要重写的设置。
复制代码代码如下所示：
（函数（$）{）

美元。fn.tooltip =功能（选项）{

创建一些默认值，展开任何可用的选项
var设置=扩展（{
位置：最重要的，
背景颜色：蓝色的
}，选项）；

返回this.each（函数（）{（）

工具提示插件代码

}）；

}；
}（jQuery）；

$（'div提示（{）。
位置：右
}）；

在这个例子中，当调用工具提示插件时，默认设置中的位置选项被覆盖，而背景颜色选项保留默认值，所以最后的设置值是：
复制代码代码如下所示：
{
位置：右，
背景颜色：蓝色的
}
这是一种非常灵活的方式，可以提供高度可配置的插件，而不需要开发人员定义所有可用的选项。
六。命名空间

正确的命名空间插件的插件开发的一个重要组成部分。正确的命名空间可以确保您的插件将被覆盖在同一页上的其他插件或其他代码的几率非常低。命名空间使你活得像一个插件开发者更容易，因为它可以帮助你更好地跟踪你的方法，事件和数据。

七、插件方法

在任何情况下，一个单独的插件不应该在jquery.fnjquery.fn对象有多个命名空间。
复制代码代码如下所示：
（函数（$）{）

美元。fn.tooltip =功能（选项）{

}；
（美元。fn.tooltipshow =功能）{

}；
（美元。fn.tooltiphide =功能）{

}；
美元。fn.tooltipupdate =功能（内容）{
！！！
}；

}（jQuery）；
这是不受鼓励的，因为它使$命名空间变得混乱。为了解决这个问题，您应该收集对象文本中的所有插件，并通过传递该方法的字符串名称将它们发送到插件。
复制代码代码如下所示：
（函数（$）{）

var方法= {
函数（选项）{

}，
显示：函数（）{

}，
隐藏：函数（）{
/好的
}，
更新：函数（内容）{
！！！
}
}；

美元。fn.tooltip =函数（方法）{

方法调用
如果（方法{方法}）{
回归方法{方法}。应用（这array.prototype.slice.call（参数1））；
如果（typeof方法}方法{ 'object ' = | |！）
返回methods.init.apply（这个参数）；
{人}
美元。误差（表现+方法+ '不在jQuery。提示的存在）；
}

}；

}（jQuery）；

调用init方法
$（'div）。Tooltip（）；

调用init方法
$（'div提示（{）。
福：'bar
}）；

调用隐藏方法
$（'div）。提示（'hide）；

调用更新方法
$（'div）。提示（更新，这是新的提示内容！）；

这种类型的插件架构允许你将所有的方法在父包，通过该方法和额外的参数要求，采用这种方法调用它们的字符串名称。这种方法的封装和建筑类型的jQuery插件社区的标准，这是由众多的插件使用，包括JQueryUI插件和部件。

八。事件

一个新的已知函数绑定的方法是让事件命名空间被束缚。如果你的插件是绑定到一个事件，一个好办法就是给这一事件命名空间。这样，你不干扰同一类型的事件，可能是当你解脱束缚。你可以通过命名空间来你需要绑定的事件。
复制代码代码如下所示：
（函数（$）{）

var方法= {
函数（选项）{

返回this.each（函数（）{（）
$（窗口），Bind（'resize。提示的方法。复位）；
}）；

}，
销毁：函数（）{

返回this.each（函数（）{（）
$（窗口），Unbind（'提示'）；
}）

}，
重新定位：函数（）{
…
}，
显示：函数（）{
…
}，
隐藏：函数（）{
…
}，
更新：函数（内容）{
…
}
}；

美元。fn.tooltip =函数（方法）{

如果（方法{方法}）{
回归方法{方法}。应用（这array.prototype.slice.call（参数1））；
如果（typeof方法}方法{ 'object ' = | |！）
返回methods.init.apply（这个参数）；
{人}
美元。误差（表现+方法+不在jQuery。提示的存在）；
}
}；

}（jQuery）；

$（#乐趣'）Tooltip（）；
过了一段时间……
$（#乐趣'）提示（'destroy）；

在这种情况下，当提示是由init方法初始化，它将重新调整大小事件的方法并给出了空间定位非法，通过appending.tooltip.later，当开发者需要破坏的提示，我们可以同时释放之间的复位方法和调整大小事件的结合，并通过命名空间回到使我们安全插件。解散事件绑定不影响结合超越这个插件。

九。数据

通常，当插件开发，你可能需要记录或检查你的插件已经被初始化为一个元素。使用jQuery的数据记录方法是基于元变量的一个好方法。然而，大量的单独的数据相比，这是一种更好的方式，通过使用一个单一的对象保存所有的变量和读取这个对象通过一个单一的命名空间。
复制代码代码如下所示：
（函数（$）{）

var方法= {
函数（选项）{

返回this.each（函数（）{（）

var $ = $（这个），
数据this.data美元（'tooltip），
工具提示= $（''，{
正文：this.attr美元（标题）
}）；

如果插件还没有初始化
如果（！数据）{

*
在这里做更多的设置
* /

$（这）。数据（'tooltip，{
目标：美元，
提示：提示
}）；

}
}）；
}，
销毁：函数（）{

返回this.each（函数（）{（）

var $ = $（这个），
数据this.data美元（'tooltip）；

命名空间 / / FTW
$（窗口），Unbind（'提示'）；
Data.tooltip.remove（）；
this.removedata美元（'tooltip）；

}）

}，
重新定位：函数（）{
…
}，
显示：函数（）{
…
}，
隐藏：函数（）{
…
}，
更新：函数（内容）{
…
}
}；

美元。fn.tooltip =函数（方法）{

如果（方法{方法}）{
回归方法{方法}。应用（这array.prototype.slice.call（参数1））；
如果（typeof方法}方法{ 'object ' = | |！）
返回methods.init.apply（这个参数）；
{人}
美元。误差（表现+方法+不在jQuery。提示的存在）；
}

}；

}（jQuery）；

通过在对象中的命名空间中封装数据，可以更容易地从集中位置读取所有插件的属性。

十，总结和最佳做法

编写jQuery插件允许您走出库，并将最有用的功能集成到可重用代码中，从而节省开发人员的时间，提高开发效率：

1。总是封装在一个封闭的插件中：
复制代码如下：（函数（$）{）
插件在这里运行
}（jQuery）；
2。不冗余包的这个关键词在插件的功能范围
三.除非插件返回一个特定的值，它将总是返回到这个关键词保持chainability。
4。将扩展的默认对象参数传递给插件，而不是传递大量参数。
5。在插件中不要多次命名不同的方法。
三.总是命名空间方法、事件和数据。