jQuery:如何创建一个最基本的插件（How to Create a Basic Plugin）

PS：红色的部分为我自己添加的扩展

大神请绕路！

这是首篇翻译，英语太水，希望大家见谅！翻译不好的请多多指教，希望口下留情！！！

最近想写一个jQuery插件，于是找到了这篇文章，翻译的目的：一是想学习如何写插件，二是想练习练习英语，提升一下英语水平。希望需要的朋友可以看看。

原文地址：  http://learn.jquery.com/plugins/basic-plugin-creation/

如何向jQuery那样去实现一些效果，或是想拥有自己的方法去实现一系列的操作。或许你可以写一个非常有用的通用方法，并且可以再其他的工程中去使用。接下来，将会带你去实现怎样写一个插件。

jQuery是如何去实现的：JQuery的对象方法和工具类方法（ How jQuery Works 101: jQuery Object Methods and Utility Methods）

在写我们自己的插件之前，我们先了解一下jQuery是如何去实现的。先看看下面这个例子：

1	$( "a" ).css( "color", "red" );

这是一些非常基础的jQuery代码，但是你知道在调用了这个方法后发生了什么吗？不管何处你使用$去选择一些元素，它将会反回一个jQuery对像。这个对象包含所有你要使用的方法（ .css()， .click()等等），和所有符合你选择条件的元素。 如：$('.red')，这个返回的对象就是个jQuery对象，这个对象包含所有html标签元素中类名（class属性）为.red的元素，此时的这个返回对象可以看做是一个数组。 jQuery对象从   $.fn 获得这些方法。这个对象（$.fn）包含所有jQuery的方法，并且我们要是想写自己的方法，最终他也会拥有我们所写的方法。




另外jQuery的工具方法 $.trim() 被用于去除用户出入字符串两边的空格字符，工具类方法是直属于$方法的。当你的jQuery API的扩展无法满足你的需求时，你可能会自己写一个通用的方法插件。




写一个简单的插件（Basic Plugin Authoring）

我们现在是想写一个让选择到的元素的文本颜色变成绿色的插件，所以我们要做的就是在 $.fn 上添加一个greenify方法，并且他就会像其他jQuery对象方法一样可以使用。

1 2 3 4 5

$.fn.greenify = function() { this.css( "color", "green" ); }; $( "a" ).greenify(); // Makes all the links green.

注意那个使用的.css()， 这是jQuery的另一个方法，我们在这是用this而不是$(this)，这是因为我们的方法 greenify和 css一样，都是同一个对象的方法。

链条（Chaining）

这个有作用，但是我们还有一些事要去做才能在这个真实的世界里生存下来。JQuery特性的其中的一个就是链条，当你使用一个选择器的时候，五六个动作都可以通过这个选择器来调用。这个特性的实现方法就是所有的jQuery方法是将原来的jQuery对象再次返回，但是时有些例外，如.width()在不调用人物参数的时候返回的是所选择元素的宽，而不是jQuery对象。使我们的插件变得可重复使用的，只需要添加一行代码：

1 2 3 4 5 6

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

注意链条概念不适用于jQuery的工具类方法，如$.trim().

保护$这个别名和添加作用域（Protecting the $ Alias and Adding Scope）

在javascript的库中，$这个变量是很受欢迎的，如果你在使用jQuery的同时使用了其他库，你就必须使用 jQuery.noConflict() .来代替$来使用jQuery。但是，这样会破坏我们的插件，因为我们使用的是$来当做jQuery方法的别名。为了和其他插件很好的共处，并且还使用jQuery的$这个别名，我们需要将我们的代码放到一个 立即调用方法表达式 中，然后通过传递jQuery参数，将命名参数为$：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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

另外，立即调用函数表达式是允许我们有自己的私有变量，想象我们需要一个不同的颜色--绿色，我们将它保存在一个变量中：

1 2 3 4 5 6 7 8 9 10

(function ( $ ) { var shade = "#556b2f"; $.fn.greenify = function() { this.css( "color", shade ); return this; }; }( jQuery ));

减少插件占用的空间（Minimizing Plugin Footprint）

在写插件的时候只占用$.fn的一个位置是个很好的做法，这样的话会减少你的插件被覆盖和你的插件会覆盖别人插件的机会。换句话说，这样做是不对的：

1 2 3 4 5 6 7 8 9 10 11

(function( $ ) { $.fn.openPopup = function() { // Open popup code. }; $.fn.closePopup = function() { // Close popup code. }; }( jQuery ));

占用一个位置是最好的，这样你可以通过传递参数来控制你的实现：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

(function( $ ) { $.fn.popup = function( action ) { if ( action === "open") { // Open popup code. } if ( action === "close" ) { // Close popup code. } }; }( jQuery ));

使用.each方法（Using the each() Method）

你的jQuery对象将会包含其他引用的DOM元素，这就是为什么jQuery对象经常被当做为一个容器。如果你想做一些其他的操作，如获得一个数据属性、计算位置等等，你就需要使用.each来循环遍历这些元素。

1 2 3 4 5 6 7

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

接受选项（Accepting Options）

不管你的插件有多么的复杂，你也应该使用选项来使得你的插件可定制化。最简单的方法，尤其是由很多的选项，就是使用一个对象。我们来使得我们的插件接受一些选项吧。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

(function ( $ ) { $.fn.greenify = function( options ) { // This is the easiest way to have default options. var settings = $.extend({ // These are the defaults. color: "#556b2f", backgroundColor: "white" }, options ); // Greenify the collection based on the settings variable. return this.css({ color: settings.color, backgroundColor: settings.backgroundColor }); }; }( jQuery ));

示例：

1 2 3

$( "div" ).greenify({ color: "orange" });

颜色的默认值将会被橘色覆盖。

组装（Putting It Together）

这里有个小小的插件例子使用了我们上面提到的技术；

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

(function( $ ) { $.fn.showLinkLocation = function() { this.filter( "a" ).each(function() { var link = $( this ); link.append( " (" + link.attr( "href" ) + ")" ); }); return this; }; }( jQuery )); // Usage example: $( "a" ).showLinkLocation();

这个方便的插件通过容器中的所有锚点，追加href属性值到括号中。

1 2 3 4 5

<!-- Before plugin is called: --> <a href="page.html">Foo</a> <!-- After plugin is called: --> <a href="page.html">Foo (page.html)</a>

我们的插件的最优化结果：

1 2 3 4 5 6 7 8 9 10 11 12 13

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

翻译到此结束。有些没有翻译，鉴于本人太菜，请大家手下留情。