http://learn.jquery.com/plugins/basic-plugin-creation/
如何创建一个基本的插件
有时候你想在整个代码中提供一些功能。 例如，也许你想要一个单一的方法，你可以调用一个jQuery selection来对selection执行一系列操作。 在这种情况下，您可能需要编写一个插件。
jQuery如何工作101：jQuery对象方法
在我们编写自己的插件之前，我们必须先了解一下jQuery的工作原理。 看看这个代码：
1 $( "a" ).css( "color", "red" );
这是一些非常基本的jQuery代码，但是你知道幕后发生了什么吗？ 无论何时使用$函数选择元素，它都会返回一个jQuery对象。 该对象包含所有您使用的方法（.css()，.click()等）以及适合您选择器的所有元素。 jQuery对象从$ .fn对象中获取这些方法。 这个对象包含了所有的jQuery对象方法，如果我们想写我们自己的方法，它也需要包含这些方法。
基本插件创作
假设我们要创建一个插件，使得一组检索元素中的文本呈绿色。 我们所要做的就是将一个名为greenify的函数添加到$ .fn中，并且它将像其他任何jQuery对象方法一样可用。
1 $.fn.greenify = function() {2 ????this.css( "color", "green" );3 };4 ?5 $( "a" ).greenify(); // Makes all the links green.
6 ??????????????????????//使所有的链接变成绿色注意，要使用另一种方法.css()，我们使用 this，而不是$(this)。 这是因为我们的greenify 函数是与.css()相同对象的一部分。
链接
这很有效，但是我们需要为我们的插件在现实世界中生存而做一些事情。 当你将五个或六个动作链接到一个选择器上时，jQuery的一个特性就是链接。 这是通过让所有jQuery对象方法再次返回原始jQuery对象来实现的（有一些例外：调用.width()而不带参数返回所选元素的宽度，并且不可链接）。 使我们的插件方法可链接需要一行代码：
1 $.fn.greenify = function() {2 ????this.css( "color", "green" );3 ????return this;4 }5 ?6 $( "a" ).greenify().addClass( "greenified" );保护$ 别名并添加范围
$变量在JavaScript库中非常受欢迎，如果您使用jQuery另一个库，则必须使jQuery不使用带有jQuery.noConflict()的$。 但是，这会破坏我们的插件，因为它是在假设$是jQuery函数的别名的情况下编写的。 为了与其他插件一起使用，并且仍然使用jQuery $别名，我们需要将所有代码放入立即调用的函数表达式中，然后传递函数jQuery，并将参数命名为$：
1 (function ( $ ) {2 ?3 ????$.fn.greenify = function() {4 ????????this.css( "color", "green" );5 ????????return this;6 ????};7 ?8 }( jQuery ));此外，立即调用函数的主要目的是允许我们拥有自己的私有变量。假设我们想要一个不同的绿色，我们想把它存储在一个变量中。
1 (function ( $ ) { 2 ??3 ????var shade = "#556b2f"; 4 ??5 ????$.fn.greenify = function() { 6 ????????this.css( "color", shade ); 7 ????????return this; 8 ????}; 9 ?10 }( jQuery ));最小化插件封装
编写插件只需占用$ .fn中的一个插槽是一种很好的做法。 这样既减少了插件被覆盖的机会，也减少了插件覆盖其他插件的机会。 换句话说，这很糟糕：
1 (function( $ ) { 2 ??3 ????$.fn.openPopup = function() { 4 ????????// Open popup code. 5 ????}; 6 ??7 ????$.fn.closePopup = function() { 8 ????????// Close popup code. 9 ????};10 ?11 }( jQuery ));拥有一个插槽会更好，并使用参数来控制一个插槽执行的操作。
1 (function( $ ) { 2 ??3 ????$.fn.popup = function( action ) { 4 ??5 ????????if ( action === "open") { 6 ????????????// Open popup code. 7 ????????} 8 ??9 ????????if ( action === "close" ) {10 ????????????// Close popup code.11 ????????}12 ?13 ????};14 ?15 }( jQuery ));使用each()方法
典型的jQuery对象将包含对任意数量DOM元素的引用，这就是为什么jQuery对象通常被称为集合。 如果您想对特定元素进行任何操作（例如获取数据属性，计算特定位置），那么您需要使用.each()来遍历元素。
1 $.fn.myNewPlugin = function() {2 ?3 ????return this.each(function() {4 ????????// Do something to each element here. ?// 在这里为每个元素做点事情。5 ????});6 ?7 };注意，我们返回.each()的结果而不是返回this结果。 由于.each()已经是可链接的，它返回this，然后我们返回。 这是维持可持续性的一种比迄今为止我们所做的更好的方法。
接受选项
随着你的插件变得越来越复杂，通过接受选项让你的插件可定制是一个好主意。 最简单的方法是使用对象字面值，特别是如果有很多选项的话。 让我们改变我们的绿化插件接受一些选项。
1 (function ( $ ) { 2 ??3 ????$.fn.greenify = function( options ) { 4 ??5 ????????// This is the easiest way to have default options. // 这是拥有默认选项的最简单方法。 6 ????????var settings = $.extend({ 7 ????????????// These are the defaults. // 这些是默认设置。 8 ????????????color: "#556b2f", 9 ????????????backgroundColor: "white"10 ????????}, options );11 ?12 ????????// Greenify the collection based on the settings variable. //根据设置变量使集合变绿。13 ????????return this.css({14 ????????????color: settings.color,15 ????????????backgroundColor: settings.backgroundColor16 ????????});17 ?18 ????};19 ?20 }( jQuery ));示例：
1 $( "div" ).greenify({2 ????color: "orange"3 });＃556b2f的颜色默认值被$ .extend()覆盖为橙色。
把它放在一起
下面是使用我们讨论过的一些技巧的一个小插件的例子：
1 (function( $ ) { 2 ??3 ????$.fn.showLinkLocation = function() { 4 ??5 ????????this.filter( "a" ).each(function() { 6 ????????????var link = $( this ); 7 ????????????link.append( " (" + link.attr( "href" ) + ")" ); 8 ????????}); 9 ?10 ????????return this;11 ?12 ????};13 ?14 }( jQuery ));15 ?16 // Usage example:17 $( "a" ).showLinkLocation();这个方便的插件遍历集合中的所有锚，并在括号中追加href属性。
1 <!-- Before plugin is called: -->2 <a href="page.html">Foo</a>3 ?4 <!-- After plugin is called: -->5 <a href="page.html">Foo (page.html)</a>
我们的插件可以优化，但：
1 (function( $ ) { 2 ??3 ????$.fn.showLinkLocation = function() { 4 ??5 ????????this.filter( "a" ).append(function() { 6 ????????????return " (" + this.href + ")"; 7 ????????}); 8 ??9 ????????return this;10 ?11 ????};12 ?13 }( jQuery ));我们使用.append()方法的功能来接受回调，并且该回调的返回值将决定集合中每个元素的附加内容。 另请注意，我们没有使用.attr()方法来检索href属性，因为本地DOM API使我们可以轻松访问具有恰当名称的href属性。
jquery ----> How to Create a Basic Plugin (翻译)
原文地址：https://www.cnblogs.com/mrray1105/p/9150918.html