翻译jquery官方的插件制作方法

有时候你想重复使用同一个代码块，举例：你想写一方法，你可以用这个方法，选择做一系列的选择操作，所以你想创造一个插件。

网站建设哪家好，找成都创新互联公司！专注于网页设计、网站建设、微信开发、成都微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了逊克免费建站欢迎大家使用！

jquery怎么样工作：jquery对象方法（jquery Object Methods）

在写自己的插件之前，我们必须明白下面这段代码是如何工作的：

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

这是一段简洁实用的jquery代码段，但是你知道jquery幕后是如何工作的么？当你只用 “$"函数选择元素的时候，它返回了一个

jquery对象。这个对象包含了所有jquery可以调用的方法，例如，你肯定已经使用过这些（.css(), .click()…等等）。

这些方法适用于你用jquery选择器选择出来的所有元素。jquery对象的这些方法是从$.fn object 继承出来的。

$.fn 对象包含了所有jquery的对象方法，如果你想写自己的方法增加到jquery, 你需要把你的自定义方法写在$.fn上。

基本的插件制作方法：

例如我们想制作一个greenify插件，用这个插件来设置一个dom元素的文字为绿色的。所以我们把一个叫greenify得方法增加到

$.fn上，它跟其他jquery对象方法一样。

 
   
  $.fn.greenify = function() {     this.css( "color", "green" ); };  $( "a" ).greenify(); // 使得所有链接颜色为绿色。

注意：这里我们使用的.css()，前边调用它的是this,而不是$(this)对象。这是因为我们的grenify方法和.css()方法被调用的对象一样，

this代表了一个jquery对象。

启用链式：

这一步要做2件事帮助我们的插件可以被实际使用。

***：链式操作是jquery的一个特点，你可以在一个被选出的元素后增加5或者6个操作。这是通过所以jquery对象方法再次返回来原来的jquery对象来完成的，使我们的方法启用链式操作只需要增加一行：

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

这里在使得a标签的文字变成绿色后我们还可以给a标签增加class.

$别名的保护，增加作用域

第二：$符号在javascript库或框架中非常流行，如果你在项目中同时用了其他类库和jquery一起，你不能使得jquery使用$符号，

用jquery.noConflict()方法释放掉$符号，然而我们的插件是假设使用$符号构建的jquery方法。但是我们还是需要继续使用

$符号和其他插件一起共工作。我们必须把我们的代码放在匿名函数表达式中（防止$被污染）。然后我们把jquery作为参数传递进去，

相应的形参用$符号。

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

此外，我们使用匿名函数表达式是为了把变量私有化，加入我们想使用不同的颜色，我们可以用变量缓存。

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

只使用一个$.fn来构建插件：

只使用一个$.fn 会降低你的插件方法被覆盖的几率，下面的例子是不推荐的做法：

 
   
  (function( $ ) {      //不好的例子          $.fn.openPopup = function() {          // Open popup code.      };     $.fn.closePopup = function() {          // Close popup code.      }; }( jQuery ));

***的实践是只使用一个$.fn，然后在内部判断不同的行为，来执行不同的操作：

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

使用each()方法遍历（each() method）

典型的jquery方法包含任意数量的dom元素，这就是为什么jquery对象被称为对象集合。如果你想对一定数量的元素执行

任何操作你肯定要用到each遍历dom树。（操作包括获取元素的属性 get attribute,元素位置 positions）.

 
   
  $.fn.myNewPlugin = function() {      return this.each(function() {          //遍历元素然后do something      }); };

注意：我们返回的是.each()的结果代替了 return this. 因为each()已经是可链式的，each内部已经返回了我们需要return的this.

这是到目前为止让我们应用链式***的方式。

参数的配置使用：

当你的插件越来越复杂，***的方式是让你的插件来接收参数，这样的插件是可定制的。最简单的方法是，把很多个参数用一个对象

字面量装起来。现在我们来让我们的greenify插件接收一些参数：

 
   
  (function ( $ ) {     $.fn.greenify = function( options ) {           // 这里是配置的默认参数          var settings = $.extend({              color: "#556b2f",              backgroundColor: “white"          }, options );          // Greenify 方法基于默认的参数设定          return this.css({              color: settings.color,              backgroundColor: settings.backgroundColor          });      };  }( jQuery ));

实际调用的时候传入参数：

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

默认的的color颜色设定 “#556b2f”,将被 color “orange” 覆盖掉。

把所有东西整合在一起：

下面这个插件用到了我们上面讨论过的技术：

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

// 实际调用

 
   
  $( "a" ).showLinkLocation();

这个插件的工作方式是：把a标签的href属性里的值，增加到a标签的里边

Foo

 
   
  Foo (page.html)

优化我们的插件：

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

我们只用.append()方法接受回调，该回调函数返回的值将追加到遍历的每一个a元素集合中。

注意：我们没有使用.attr()方法来获得元素的属性，这是因为原生的DOM API给了我们简单的获取href属性的方式

（原生的方法要比jquery的方法性能好）

本文来自api.jquery.com的插件制作官方文档，如果文章有翻译错误，请指正。(转载请注明出处，谢谢)

仓库地址：https://github.com/ollieSk8/create_jq_plugins

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

标题名称：翻译jquery官方的插件制作方法
分享路径：http://www.shufengxianlan.com/qtweb/news48/32148.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容