如何编写自己的jQuery插件？
对于那些不知道的人来说，jQuery是一个JavaScript库，它包含了许多特性，非常小而且速度很快。它还包括一个易于使用的API，在所有浏览器上都是兼容的，并且可以很容易的进行HTML遍历、动画、DOM操作和事件处理。它不仅可扩展，而且经久耐用。因此，客户端脚本自开发以来变得容易得多。
什么是jQuery插件？
jQuery由原型对象组成，在某些时候可能需要一些操作和扩展。出于同样的目的，jQuery插件被设计为对象继承添加的任何其他方法的一种方式。不仅如此，在创建jQuery对象时，这些附加方法并不是孤立的，而是在创建jQuery对象时使用其余的方法(已经继承的)调用。jQuery插件可以jQuery库中存在的各种方法的形式单独使用。每个方法都是一个插件。但是，在新的情况下，插件也可以自定义创建，这并不是一项非常困难的任务。
jQuery是如何工作的？
要理解jQuery是如何工作的，你需要遵循以下步骤：
· 创建一个带有所有基本标记的HTML文档，并调用jQuery.js文件。
· 开发人员预先考虑并将代码的可执行命令封装到onload()函数中，以确保在将文档加载到浏览器后立即执行命令。
· 有时，由于图像加载的延迟，文档不会完整加载。为了确保加载后可以处理完整的文档，开发人员在其代码中提供了一个ready事件。
· ready事件的完整脚本（封装在其中的函数）放在前面创建的HTML文档中。保存和运行文档将确保你的代码使用输出执行。
· 此函数可以包含执行特定任务的任何事件(子事件)或命令。
什么是基本插件签名？
$.fn.pluginName = function() {
this.css( "color", "yellow" );
};
$( "a" ).pluginName();如上面所示，插件开始其身份创建。pluginName替换为正在创建的插件的名称，后跟一个函数以及括号中的所有必需参数。接下来，函数中的下一个语句(this.css确保将CSS应用于某些文本，使其颜色变为黄色。最后一行调用插件函数将所有带有a“标签的链接变为黄色。
保护$Alias并添加作用域
编写jQuery插件时总是假定$使用jQuery函数的别名。$在JavaScript库中非常有名。因此，当需要多个jQuery库时，使用$可能会产生冲突。因此，为了使我们能够将jQuery与其他插件一起使用。必须将代码放在立即调用函数的表达式中。这之后是jQuery的传递，然后命名它的参数$.
添加私有方法和变量
在JavaScript中，函数包含多个变量和其他函数，这些变量和函数主要可以在函数内部访问，从而使元素成为私有。立即调用的函数表达式提供了访问私有变量和方法的最佳方法。
在解析了别名($)之后，可以在此处理解添加私有方法或变量：
(function($) {
$.fn.pluginName = function() {
// private variables
var privatevar1 = '';
var privatevar2 = '';
// private methods
var myPrivateMethod = function() {
// do something ...
}
})(jQuery);只能通过立即调用函数才能添加私有变量并启用其使用：
(function($){
var col = “yellow”;$.fn.pluginName = function() {
this.css("color", col);
return this;
};
}(jQuery)); 只能在函数的范围内调用私有方法。只有其他私有方法或公共方法有权调用这些私有方法。这也适用于访问私有变量。
添加公共方法
向jQuery插件添加方法是在私有方法中完成的。唯一的区别是方法的执行。当该方法提供“this”运算符时，该方法变为公共方法。这样，它也可以在函数范围之外访问。添加此类公共方法的目的可以是在范围外执行函数，也可以从范围外访问公共变量和方法。
(function($) {
$.fn.pluginName = function() {
// public methods
this.initialize = function() {
// do something ...
return this;
};
this.myPublicMethod = function() {
// do something ...
};
})(jQuery);接受插件自定义选项
在某些情况下，当你继续添加插件时，插件会变得越来越复杂。因此，最好让你的插件开始接受一些选项并使其可自定义。
(function($) {
$.fn.pluginName = function(options) {
var defaults = {
color: "white",
'background-color': "#556b2f"
};
var settings = $.extend({}, defaults, options);
return this.css({
color: settings.color,
'background-color': settings.background - color
});
};
}(jQuery));结合所有技术，编译了以下示例插件：
(function($) {
$.fn.pluginName = function(options) {
var defaults = {
color: "white",
'background-color': "#556b2f"
};
var settings = $.extend({}, defaults, options);
if (this.length > 1) {
this.each(function() { $(this).pluginName(options) });
return this;
}
// private variables
var privatevar1 = '';
var privatevar2 = '';
// private methods
var myPrivateMethod = function() {
// do something ...
}
// public methods
this.initialize = function() {
// do something ...
return this;
};
this.myPublicMethod = function() {
// do something ...
};
return this.initialize();
}
})(jQuery);
这里，方法'each（）'用于循环遍历元素集合。此外，此方法的返回值是this.append（）方法，该方法接受回调，返回时我们将能够看到集合中要追加的元素。
原文标题《How to Write Your Own jQuery Plugin 》
作者：Rajesh Kumar
译者：lemon
不代表云加社区观点，更多详情请查看原文链接
本文系外文翻译，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系外文翻译，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
