扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识，最佳做法和常见的陷阱。

一、入门

编写一个jQuery插件开始于给jQuery.fn加入​​新的功能属性，此处添加的对象属性的名称就是你插件的名称：

. 代码如下:

jQuery.fn.myPlugin = function(){

  //你自己的插件代码

};

用户非常喜欢的$符号哪里去了？ 它仍然存在，但是，为了避免和其他JavaScript库冲突，我们最好将jQuery传递给一个自我执行的封闭程序，jQuery在此程序中映射为$符号，这样可以避免$号被其他库覆写。

. 代码如下:

(function ($) {
    $.fn.m​​yPlugin = function () {
        //你自己的插件代码
    };
})(jQuery);

在这个封闭程序中，我们可以无限制的使用$符号来表示jQuery函数。

二、环境

现在，我们可以开始编写实际的插件代码。 但是，在这之前，我们必须得对插件所处的环境有个概念。 在插件的范围里， this关键字代表了这个插件将要执行的jQuery对象， 这里容易产生一个普遍的误区，因为在其他包含callback的jQuery函数中，this关键字代表了原生的DOM元素。这常常会导致开发者误将this关键字无谓的包在jQuery中，如下所示。

. 代码如下:

(function ($) {
    $.fn.m​​yPlugin = function () {

        //此处没有必要将this包在$号中如$(this)，因为this已经是一个jQuery对象。
        //$(this)等同于 $($('#element'));

        this.fadeIn('normal', function () {

            //此处callback函数中this关键字代表一个DOM元素

        });

    };
})(jQuery);

$('#element').myPlugin();

三、基础知识

现在，我们理解了jQuery插件的基础知识，让我们写一个插件，做一些事情。

. 代码如下:

(function ($) {

    $.fn.m​​axHeight = function () {

        var max = 0;

        this.each(function () {
            max = Math.max(max, $(this).height());
        });

        return max;
    };
})(jQuery);

var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度

这是一个简单的插件，利用.height()返回页面中高度最大的div元素的高度。

四、维护Chainability

很多时候，一个插件的意图仅仅是以某种方式修改收集的元素，并把它们传递给链中的下一个方法。 这是jQuery的设计之美，是jQuery如此受欢迎的原因之一。 因此，要保持一个插件的chainability，你必须确保你的插件返回this关键字。

. 代码如下:

(function ($) {

    $.fn.lockDimensions = function (type) {

        return this.each(function () {

            var $this = $(this);

            if (!type || type == 'width') {
                $this.width($this.width());
            }

            if (!type || type == 'height') {
                $this.height($this.height());
            }

        });

    };
})(jQuery);

$('div').lockDimensions('width').CSS('color', 'red');

由于插件返回this关键字，它保持了chainability，这样jQuery收集的元素可以继续被jQuery方法如.css控制。 因此，如果你的插件不返回固有的价值，你应该总是在其作用范围内返回this关键字。 此外，你可能会推断出，传递给插件的参数将会在插件的作用范围内被传递。 因此，在前面的例子，字符串'width'变成了插件的类型参数。

五、默认值和选项

对于比较复杂的和提供了许多选项可定制的的插件，最好有一个当插件被调用的时候可以被拓展的默认设置(通过使用$.extend)。 因此，相对于调用一个有大量参数的插件，你可以调用一个对象参数，包含你了你想覆写的设置。

. 代码如下:

(function ($) {

    $.fn.tooltip = function (options) {

        //创建一些默认值，拓展任何被提供的选项
        var settings = $.extend({
            'location': 'top',
            'background-color': 'blue'
        }, options);

        return this.each(function () {

            // Tooltip插件代码

        });

    };
})(jQuery);

$('div').tooltip({
    'location': 'left'
});

在这个例子中，调用tooltip插件时覆写了默认设置中的location选项，background-color选项保持默认值，所以最终被调用的设定值为：

. 代码如下: