如何创建一个基础jQuery插件

如何创建一个基础插件

How to Create a Basic Plugin

　　有时你想使一块功能性的代码在你代码的任何地方有效.比如,也许你想调用jQuery对象的一个方法,对该对象进行一系列的操作.可能你写了一个真正有用的实用函数,想它能够轻易的移植到其他项目.在这种情况下,你可能想写一个插件.

　　Sometimes you want to make a piece of functionality available throughout your code. For example, perhaps you want a single method you can call on a jQuery selection that perfroms a series of operations on the selection. Maybe you wrote a really useful utility function that you want to be able to move easily to other projects. In this case, you may want to write a plugin.

jQuery是如何工作的 101:jQuery 对象方法和实用方法
How jQuery Works 101:jQuery Object Methods and Utility Methods

　　在我们写我们自己的插件之前, 我们必须先对jQuery如何工作有一些了解.请看看这段代码:

　　Before we write our own plugins, we must first understand a little about how jQuery works.Take a look at this code:

$.fn.greenify = function(){
this.css("color", "green");
}
$("a").greenify();

注意使用 .css() 和其他类似方法时,我们用 this 而不是 $(this).这是因为我们的 greenify 函数和 .css() 是同一个对象的一部分.

Notice that use .css(), another method, we use this, not $(this). This is because our greenify function is a part of the same object as .css().

连贯性
Chaining

　　它工作了,但是实际上我们会有几件事情要做,jQuery的特性之一就是连贯性,当你链接了四到五个动作到一个选择器.这是通过所有的 jQuery 对象方法再次返回源 jQuery 对象来实现的(这里有一些例外: 无参数调用 .width() 返回选中元素的宽度, 它是没有连贯性的).使我们的插件方法具有连贯性需要一行代码:

　　This works, but there's a couple of things we need to do for our plugin to survive in the reeal world. One of jQuery's features is chaining, when you link five or six actions onto one selector. This is accomplished by having all jQuery object methods return the original jQuery object again(there are few exceptions: .width() called without parameters return the width of the selected element, and is not chainable). Making our plugin method chainable takes one line of code:

　　值得注意的是连贯性的概念在类似 $.trim() 的 jQuery 实用函数上不适用.

　　Note that the notion of chaining is not applicable to jQuery utility methods like $.trim().

保护$别名和添加范围
Protecting $ Alias and Adding Scope

　　变量$在JavaScript库中非常受欢迎,如果你在使用jQuery的同时使用其他的库,你应使用jQuery.noConflict()来使jQuery不使用$.然而,假设$是jQuery函数的别名将损坏我们的插件.我们需要将我们所有的代码放进一个立即调用函数表达式里面, 然后传递函数jQuery,命名为参数$:

　　The $ variable is very popular among JavaScript libraries, and if you're using another library with jQuery, you will have make jQuery not use the $ with jQuery.noConflict(). However, this will break our plugin since it is written with the assumption that $ is an alias to the jQuery function. To work well with other plugins, and still use the jQuery $ alias, we need to put all of our code inside of an Immediately Invoked Function Expression, and then pass the function jQuery, and name the parameter $:

(funtion($){
$.fn.greenify = function(){
this.css("color", "green");
return this;
}
$.ltrim = function(str){
return str.replace(/^\s+/, "");
}
$.rtrim = function(str){
return str.replace(/\s+$/, "");
}
}(jQuery));

　　并且,立即调用函数表达式的主要作用是允许我们拥有自己的私有变量.假设我们想添加一个不同的颜色,而且我们想将它保存在一个变量里面.

　　in addition, the primary purpose of an Immediately Invoked Function is to allow us to have our private variables. Pretend we want a different color, and we want to store it in a variable.

Minimizing Plugin Footprint
　　好的惯例是写一个插件只占用 $.fn 的一个接口,这段代码可能导致你的插件被其他的插件覆盖,也可能导致你的插件覆盖了其他插件,换句话说,这是段糟糕的代码:

　　It's good practice when writing plugins to only take up one slot within $.fn. This reduces both the chance that your plugin will be overridden, and the chance that your plugin will override other plugins. In other words, this is bad:

(function($){
$.fn.openpopup = function(){
//open popup code.
}
$.fn.closepopup = function(){
//close popup code.
}
}(jQuery));

　　使用单接口和使用参数来控制单接口执行什么样的行动将会好得多

　　It would be much better to have one slot, and use parameters to control what action that one slot performs.

$.fn.myNewPlugin = function(){
return this.each(function(){
//Do something to each element here.
});
}

　　注意我们返回 .each() 代替返回 this. 因为 .each() 已经是具有连贯性的,它的返回值是 this.在我们曾经做过的事中,到目前为止,这是一个维护可连续性更好的办法.

　　Notice that we return the results of .each() instead of returning this. Since .each() is already chainable, it returns this, which we then return. This is a better way to maintain chainability than what we've been doing so far.

接受选项
Accepting Options

　　当你的插件越来越复杂,好的主意是通过接受一些选项来使你的插件可定制.最简单的做到这一点的办法是一个字面对象,特别是有很多的选项.让我们修改我们的greenify插件以接受一些选项.

　　As your plugins get more and more complex, it's a good idea to make your plugin customizable by accepting options. The easiest way do this, especially if there are lots of options, is with an object literal. Let's change our greenify plugin to accept some options.

　　color 的缺省值 #556b2f 被 $.extend() 覆盖为 orange.

　　The default value for color of #556b2f gets overridden by $.extend() to be orange.

把它们放在一起
Putting It Together

　　这里是一个使用了一些我们已经讨论过的技巧的小插件例子:

Here's an example of a small plugin using some of the techniques we've discussed:

(function($){
$.fn.showLinkLocation = function(){
return this.filter("a").each(function(){
$(this).append(" (" + $(this).attr("href") + ")");
});
};
}(jQuery));

//Example usage:

$("a").showLinkLocation();

　　这个易用的插件遍历集合中所有的链接然后把href属性放在括弧中添加在元素后面.

　　This handy plugin goes through all anchors in the collection and appends the href attribute in brackets.

　　我们的插件可以通过以下代码优化:

　　Our plugin can be optimized though:

(function($){
$.fn.showLinkLocation = function(){
return this.filter("a").append(function(){
return " (" + this.href + ")";
})
};
}(jQuery));

　　我们使用的是 .append() 方法的接受回调函数的能力,返回值将决定集合中的每个元素的尾部添加什么.注意我们不是使用 .attr() 方法来检索href属性,因为原生的DOM API给了我们适当命名的href属性方便使用.

　　We're using the .append() method's capability to accept a callback, and the return value of that callback will determine what is appended to each element in the collection. Notice also that we're not using the .attr() method to retrieve the href attribute, because the native DOM API gives us easy access with the aptly named href property.