jQuery插件开发详细教程

2020-05-23 06:07:12易采站长站整理

})(jQuery);
$(‘div’).tooltip({
    ‘location’: ‘left’
});


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

{
    ‘location’: ‘left’,
    ‘background-color’: ‘blue’
}
这是一个很灵活的方式,提供一个高度可配置的插件,而无需开发人员定义所有可用的选项。



六、命名空间


正确命名空间你的插件是插件开发的一个非常重要的一部分。 正确的命名空间,可以保证你的插件将有一个非常低的机会被其他插件或同一页上的其他代码覆盖。 命名空间也使得你的生活作为一个插件开发人员更容易,因为它可以帮助你更好地跟踪你的方法,事件和数据。


七、插件方法


在任何情况下,一个单独的插件不应该在jQuery.fnjQuery.fn对象里有多个命名空间。

(function ($) {
    $.fn.tooltip = function (options) {
        // this
    };
    $.fn.tooltipShow = function () {
        // is
    };
    $.fn.tooltipHide = function () {
        // bad
    };
    $.fn.tooltipUpdate = function (content) {
        // !!!
    };
})(jQuery);
这是不被鼓励的,因为它$.fn使$.fn命名空间混乱。 为了解决这个问题,你应该收集对象文本中的所有插件的方法,通过传递该方法的字符串名称给插件以调用它们。

(function ($) {
    var methods = {
        init: function (options) {
            // this
        },
        show: function () {
            // is
        },
        hide: function () {
            // good
        },
        update: function (content) {
            // !!!
        }
    };
    $.fn.tooltip = function (method) {
        // 方法调用
        if (methods[method]) {