JavaScript | JQuery插件定义方法

参考 http://www.2cto.com/kf/201507/417874.html

—————————————————————————————————————————————————————————

插件开发- 两种

类级别 - 三种

jQuery.extend(object);为扩展jQuery类本身,为类添加新的方法。

添加全局函数

$.foo1 = function() {
    // code
}
$.foo2 = function(param) {
    // code
}
$.foo1();
$.foo2(1);

使用jQuery.extend(object)添加全局函数 ;

禁止使用js的函数名和变量名 , 但仍有可能与其他jquery插件冲突 , 所以使用下面的方式封装到另一个命名空间中

$.extend({
    foo1: function() {
        // code
    },
    foo2: function() {
        // code
    }
});

采用命名空间的方式封装全局函数

$.myPlugin = {
    foo1: function() {
        // code
    },
    foo2: function(param) {
        // code
    }
}
$.myPlugin.foo1();
$.myPlugin.foo2(1);

对象级别

jQuery.fn.extend(object);给jQuery对象添加方法。

jquery本身是一个封装好的类;

$("#myDiv")会生成一个jquery类的实例;

通过jQuery.fn.extend可以对jquery.prototype进行扩展,为jquery类添加成员函数,所有的jquery类实例都可以使用这个成员函数

普通形式

定义了一个jQuery函数,将jQuery实参传递进去并立即调用执行;

好处是在写jQuery插件时也可以使用$这个别名,不会与prototype冲突;

metisMenu侧边栏下拉插件也是以这种形式写的

p.s.尽量在自调用函数前加分号,见文章底部细节说明

(function($) {
    $.fn.pluginName = function() {
        // code
    }
})(jQuery);
$("#mydiv").pluginName();

分解代码为多个函数而不增加命名空间

将函数制定为属性,我们已经声明pluginName为jquery属性对象;

任何其他的属性或函数需要暴露出来时,都可以在pluginName函数中被声明属性;
接受options参数控制插件的行为

(function($) {
    $.fn.pluginName = function(option) {
        var defaults = {
            background: "yello",
            foreground: "red"
        };
    }
    var opts = $.extend(defaults, options);
    // plugin code
})(jQuery);
$("#mydiv").pluginName({
    foreground: "blue"
});

暴露插件的默认设置

$.fn.pluginName = function(options) {
    var opts = $.extend({}, $options);
};
$.fn.pluginName.default = {
    foreground: "red",
    background: "yellow"
};

样例

$.fn.extend({
    plugin: function() {
        $(this).click(function() {
            // click event code
        });
    }
});
$("#input1").plugin();
<input id = "input1" type = "text" / >

—————————————————————————————————————————————————————————

细节

开头使用分号

加引号是为了防止多个js文件合并(脚本压缩)后运行异常,但由于目前(2015.4)普遍基于语法解析来进行压缩(UglifyJs)下,并不是必须的了,但通常作为分号教条;详解见 https://www.zhihu.com/question/29526862

;(function($, window, document, undefined) {
    // code
})(jQuery, window, document);