jQuery 带有插件的插件原型

Question

我创建了一个免费的 jQuery 插件，我想做的是创建一些附加组件，以便我的客户在付款时使用。

所以，假设我免费提供的免费 jQuery 插件将 hello world 附加到 html div 标签中，我想创建一个附加组件使 div 背景颜色变为红色。

免费版插件：

(function(window, $) {
    var example = function(elem, options) {
        this.elem = elem;
        this.$elem = $(elem);
        this.options = options;
        this.metadata = this.$elem.data('example-options');
    };

    example.prototype = {
        defaults: {
            message: 'Hello world!'
        },

        init: function() {
            this.config = $.extend({}, this.defaults, this.options, this.metadata);
            this.displayMessage();
            return this;
        },

        displayMessage: function() {
            this.$elem.append('<h1>'+this.config.message+'</h1>');
        }
    }

    example.defaults = example.prototype.defaults;

    $.fn.example = function(options) {
        return this.each(function() {
            new example(this, options).init();
        });
    };

window.example = example;
})(window, jQuery);

而且我想创建一个插件，它将位于不同的 js 文件中，如下所示：

example.prototype = {
    bgColor: function() {
        this.$elem.css('background-color', '#f00');
    }
};

我该怎么做？

Answer 1

无需替换您创建的默认 prototype，只需添加并覆盖您希望更改的方法即可。例如，您可以将 bgColor 方法添加到 prototype，如下所示：

example.prototype.bgColor = function() {
    this.$elem.css('background-color', '#f00');
};

要覆盖方法以提供增强功能，您可以这样做：

example.prototype.displayMessage = function() {
    this.$elem.append('<h1>This message comes from the add-on</h1>');
}

请注意，要使其正常工作，附加 js 文件包含在默认插件 js 文件之后。

jQuery 带有插件的插件原型

jQuery Plugin prototype with addons

jquery-plugins

add-on