jQuery基础：插件开发

2019-02-13 10:32:50

一、使用 $ 别名

在编写jQuery插件时，考虑到 $ 冲突的问题，我们自定义的插件就应该始终都使用jQuery这个名字来调用jQuery方法，或者也可以在内部定义一个$别名。

对于代码比较长的插件来说，很多开发人员都觉得不能使用$别名会导致代码难以理解。为了解决这个问题，我们可以在插件的作用域内定义这个快捷方式，方法就是定义一个函数并马上调用它。这种定义并立即调用函数的语法通常被称为立即调用的函数表达式。

(function ($) {
    //在这里添加代码
})(jQuery);

这个包装函数只接收一个参数，我们通过这个参数传入了jQuery对象。这个参数的名字是$，因此在这个函数内部，使用$别名就不会有冲突了。

二、添加新的全局函数

(1)要向jQuery的命名空间中添加一个函数，只需将这个新函数指定为jQuery对象的一个属性即可。如：

(function ($) {
    $.sum = function (array) {
        //在这里添加 .sum() 代码
    };
    
    $.average = function(array) {
        //在这里添加 .average() 代码
    };
})(jQuery);

于是，我们就可以在使用这个插件的任何代码中，编写如下代码：
$.sum();
$.average();

(2)扩展全局jQuery对象
调用$.extend()就可以给全局jQuery对象添加属性（如果原来有相同的属性，就会替换原来的属性）。这样也定义了相同的$.sum()和$.average()方法。
如下：

(function ($) {
    $.extend({
        sum: function (array) {
            //在这里添加 .sum() 代码
        },
        average: function (array) {
            //在这里添加 .average() 代码
        }
    });
})(jQuery);

(3)使用命名空间隔离函数
在jQuery中进行插件开发时，为了避免冲突，最好的办法是把属于一个插件的全局函数都封装到一个对象中，如：

(function ($) {
    $.mathUtils = {
        sum: function (array) {
            //在这里添加 .sum() 代码
        },
        average: function (array) {
            //在这里添加 .average() 代码
        }
    };
})(jQuery);

这个模式的本质是为所有的全局函数又创建了一个命名空间，叫做jQuery.mathUtils。
虽然我们还称它们为全局函数，但实际上它们已经成了mathUtils 对象的方法了，而mathUtils对象则保存在jQuery对象的属性中。结果，在调用它们时就必须得加上插件的名字了：

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

三、添加 jQuery 对象方法

(1)添加实例方法也与全局函数类似，但扩展的是jQuery.fn对象(jQuery.fn对象是jQuery.prototype的别名，使用别名是出于简洁的考虑)。
如：
jQuery.fn.myMethod = function () {
alert('Nothing happens.');
};

然后，就可以在使用任何选择符表达式之后调用这个新方法了：
$('div').myMethod();

(2)方法连缀
为了使jQuery用户能够正常使用连缀行为，我们必须在插件方法中返回一个jQuery对象，除非相应的方法明显用于取得不同的信息。返回的jQuery对象通常就是this所引用的对象。
如：

(function ($) {
    $.fn.myFunction = function (parameter1,parameter2,...) {
        return this.each(function () {
        //方法体
        });
    };
})(jQuery);

四、灵活的方法参数

当方法的参数逐渐增多，始终指定每个参数并不是必须的。此时，一组合理的默认值可以增强插件接口的易用性。

(function ($) {
    $.fn.myFunction = function (opts) {
        var defaults = {
            a: 5,
            b: 0.1
        };
        var options = $.extend(defaults, opts);
        // ...
    };
})(jQuery);

在这个方法的定义中，我们定义了一个新对象，名为defaults。实用函数$.extend()可以用接受的opts对象参数覆盖defaults中的选项，并保持选项对象中未指定的默认项不变。

方法的参数不可能只是一个简单的类型，可能会比较复杂，如:回调函数。
有时候默认值并不符合用户的需求，那么定制默认值就很好用。
代码如下：

(function ($) {
    $.fn.myFunction = function (opts) {
        var options = $.extend({}, $.fn.myFunction.defaults, opts);
        // ...
    };
    $.fn.myFunction.defaults = {
        // ...
    };
})(jQuery);

默认值被放在了投影插件的命名空间里，可以通过$.fn.myFunction.defaults直接引用。而对$.extend()的调用也必须修改。由于现在所有对.myFunction()的调用都要重用defaults对象，因此不能让$.extend()修改它。我们就在此将一个空对象（{}）作为$.extend()的第一个参数，让这个新对象成为被修改的目标。