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" );
|
$.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.
|
链条（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() 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();
|
我们的插件的最优化结果：
|
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 ));
|
翻译到此结束。有些没有翻译，鉴于本人太菜，请大家手下留情。