Jquery学习之插件开发

1.使用$别名

$.noConflict() 方法可以将$符让渡出来。

立即调用的函数表达式（IIFE， Immediately Invoked Function Expression）：(function($){})(jQuery)

(function ($) {
    $.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)

2.扩展全局jQuery对象

使用$.extend()

(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)

 

缺点：会覆盖掉已存在相同函数名的函数。建议自定义命名空间，第3点。

3.使用命名空间隔离函数

避免函数名冲突。

(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)

 

注意和$.extend()不同，这里使用={}。