jQuery的插件

还在编辑中

---

插件是jQuery中一个非常重要的部分，对于开发人员了解jQuery插件对于提高工作的效率会有很好的帮助。当我们使用到某种效果，我们不一定要自己编写实现这一效果的代码。很多情况下，我们可以借助jQuery丰富的插件库来简化我们的工作。有时候，我们可能又不满足于仅仅使用插件库中的插件，我们可以把我们所编写的插件封装起来，从而保证后续反复调用。这也就构成jQuery插件的两个非常重要的内容：插件的使用和插件的开发。

插件的使用

调用插件的方法非常简单，只要找到插件的URL，在HTML中引用它，然后在脚本中使用即可。
常见的插件

插件的开发

插件开发可以分成以下内容：编写全局函数插件、编写选择符插件、编写jQuery对象方法插件（编写DOM元素遍历方法插件）、编写事件插件、使用jQuery UI部件工厂编写插件

编写选择符插件

基于选择符的Sizzle模块是jQuery非常重要的核心组件，可以通过代码片段的封装创建选择符表达式。
由于jQuery本身一直在变化更新中，jQuery内部对于选择符的支持方式也一直在变动当中，这也为编写一个可以使用的选择符插件带来很大的不变。在jQuery 1.7.1中，通过添加

(function($) {
  $.extend($.expr[':'], {
    group: function(element, index, matches, set) { var num = parseInt(matches[3], 10); if (isNaN(num)) { return false; } return index % (num * 2) < num; }
  });
})(jQuery);

在1.7.1版本中，选择符解析器的操作原理较为简单，通过使用一组正则表达式来解析选择符，然后针对解析出的每个选择符执行选择器函数。最后根据选择器函数返回值为true还是false来决定是否保留这个元素。这里可以参照jQuery 1.7.1中:eq()选择符的定义源码：

eq: function( elem, i, match ) {
    return match[3] - 0 === i;
}

match是正则表达式的捕获组，其中match[3]包含的内容是选择符中的参数。
到了1.8.1，jQuery修改了选择符的内部定义方法，例如:eq()的定义中使用了.splice() 方法，从而返回筛选后的数组：

"eq": function( elements, argument, not ) {
    var elem = elements.splice( +argument, 1 );
    return not ? elements : elem;
}

1.9.1以及之后版本中定义了一个createPositionalPseudo() 函数，这个函数会返回markFunction()，而markFunction()在修改引入的函数参数的expando属性以后会再次返回作为参数的函数。:eq()源码中调用了这个函数，

"eq": createPositionalPseudo(function( matchIndexes, length, argument ) {
    return [ argument < 0 ? argument + length : argument ];
}),

jQuery内部支持的转变也会印象到

(function($) {
  $.expr.setFilters.group = function(elements, argument, not) {
    var resultElements = [];
    for (var i = 0; i < elements.length; i++) {
      var test = i % (argument * 2) < argument;
      if ((!not && test) || (not && !test)) { resultElements.push(elements[i]); }
    }
    return resultElements;
  };
})(jQuery);

编写全局函数插件

全局函数是jQuery对象的方法，是位于jQuery命名空间内部的函数。可以提供一些常用功能的快捷方式

(function($) {
  $.extend({
    sum: function(array) {
      var total = 0;

      $.each(array, function(index, value) {
        value = $.trim(value);
        value = parseFloat(value) || 0;

        total += value;
      });
      return total;
    },
    average: function(array) {
      if ($.isArray(array)) {
        return $.sum(array) / array.length;
      }
      return '';
    }
  });
})(jQuery);

$.sum();
$.average();

$.extend()可以给全局函数jQuery对象添加属性，通过$.extend()可以定义$.sum()方法
关于$.extend()的实现原理可以参照《jQuery技术内幕》

为了防止全局函数污染命名空间，可以给全局函数创建一个的命名空间。在添加命名空间之后，全局函数实际上已经变成mathUtils对象的方法

(function($) {
  $.mathUtils = {
    sum: function(array) {
      var total = 0;

      $.each(array, function(index, value) {
        value = $.trim(value);
        value = parseFloat(value) || 0;

        total += value;
      });
      return total;
    },
    average: function(array) {
      if ($.isArray(array)) {
        return $.mathUtils.sum(array) / array.length;
      }
      return '';
    }
  };
})(jQuery);

$.mathUtils.sum();
$.mathUtils.average();

编写jQuery实例方法插件

与添加全局函数不同的是，添加实例方法插件扩展的是jQuery.fn对象（在jQuery的源码中，jQuery.fn = jQuery.prototype，即jQuery.fn是jQuery的原型对象的简化）