Zerlinda's Blog

jQuery插件机制2:如何写自己的jQuery插件?

JQuery是一个强大的轻量级js库,“write less,do more”,用简洁的代码实现强大的功能:强悍的选择器让我们更灵活的处理DOM元素,方便的事件处理程序让我们摆脱了各种浏览器兼容的苦恼,对Ajax的封装让异步操作更加easy…当然,还有重要的一点必须要提,jQuery允许我们对其进行扩展,开发自己的插件。

其实初学jQuery,单单看到插件的时候就会感到很困惑,更不要提自己写插件有多迷茫了。其实jQuery本身也是一个插件,我们在使用的时候也要写标签将其引入到文档中。它只是把js比较常用的一些操作封装起来,让我们使用的时候更加灵活方便,节省时间。而jQuery插件自然是封装的封装。简言之,jQuery封装的是一些js相对简单的操作,而jQuery的插件封装的便是一些复杂的功能了,现在jquery插件满天飞,相信找几个源码看一下也能知道个大概,所谓插件也是一个个函数堆砌起来的成果。

在这之前,我们要了解jQuery的插件机制:$.extend()、$.fn.extend(),之前一篇文章有详细的介绍,点击这里查看

$.extend(object) 为JQuery 添加一个静态方法,类似于在全局变量中添加了一个静态函数。 $.fn.extend(object) 为JQuery实例添加一个方法,类似于为每一个jQuery对象添加了一个方法。了解了基本的概念,如何来开发自己的插件呢?

一、定义私有作用域。

在开发的JQuery插件时为插件定义私有作用域。能够确保外部的代码不能直接访问插件内部的代码,插件内部的代码也不会污染全局变量。上一篇文章也有详细讲到,具体请移步。定义一个私有作用域,就像下面这样,

;(function($){….})(jQuery, window, document, undified)

二、为jQuery添加扩展的方法。

这是插件的核心。而其代码的质量也决定了插件的质量。我们通常使用$.fn.extend(object)为jQuery添加实例化方法。这样每个jQuery对象都能调用该方法。

举个例子,写一个简单的easyDown插件:

;(function ($) {
   $.fn.easyDown = function () {
      ......
  }
})(jQuery,window,document,undified);

一个简单的插件的框架完成了。但更重要的是后续我们要继续丰富它的内容。

a.设置默认值:写JQuery插件,除了特定的必须要出现的一些常量,其他的都应该是可控制的(长啊高啊字体大小时间速度等都应该可控)。当我们需要更改某些设置的时候不需要再去更改插件的代码,这也是面向对象而不是面向过程编程的精髓。这里我们使用options传递具体参数。

;(function ($) {
  var defaults = {
    threshold: 0,
    failure_limit: 0,
    event: "scroll",
    effect: "show",
    };
  $.fn. easyDown = function (options) {
   var options = $.extend(defaults, options);
  }
})(jQuery,window,document,undified);

小tip:写的时候最好用defaults变量来代表默认参数,options/settings代表用户自定义参数,这样的代码更具有可读性。Options代表用户设置的值,$.extend(defaults, options)合并并覆盖了插件的默认值;当没有设置options时,保留插件的默认值defaults。

b,支持遍历:一个jQuery对象内不可能仅有一个元素。所以实现对jQuery对象进行遍历的功能也是必须的。我们可以使用jQuery现有的遍历函数.each()实现,each() 方法规定为每个匹配元素规定运行的函数:

;(function ($) {   
  var defaults = {
   threshold: 0,
   failure_limit: 0,
   event: "scroll",
     effect: "show",
   };
  $.fn. easyDown = function (options) {
    var options = $.extend(defaults, options);
    return this.each(function () {
      ……
    });
  }
})(jQuery,window,document,undified);

c.支持链接操作:jQuery的链式操作很强大有没有?链式操作解决了异步编程模型的执行流程不清晰的问题。一个不支持链式操作的jQuery插件是有点不完美的。实际上链式操作也很简单,只不过在执行完函数之后再返回当前的对象 return this。

;(function ($) {
  var defaults = {
  threshold: 0,
  failure_limit: 0,
   event: "scroll",
  effect: "show",
  };
  $.fn. easyDown = function (options) {
  var options = $.extend(defaults, options);
   return this.each(function () {
      ……
   });
  }
})(jQuery,window,document,undified);

d.定义私有方法:在插件里定义的方法,外界不能直接调用,也就是私有方法。在编写插件的时候可能一个功能需要重复使用,这时候定义一个私有方法能够减少代码量,也能提高我们的开发速度。

;(function ($) {
  var defaults = {
   threshold: 0,
    failure_limit: 0,
    event: "scroll",
   effect: "show",
  };
   var func1 = function (obj) {
    ……
   }
   $.fn. easyDown = function (options) {
     var options = $.extend(defaults, options);
    return this.each(function () {
     func1();
   });
   }
})(jQuery,window,document,undified);

发表评论

电子邮件地址不会被公开。 必填项已用*标注