5

我正在使用以下代码作为我正在为一个项目开发的插件的基础 - 它来自 Smashing Magazine 上的一篇文章，位于此处，标题为“轻量级开始”：

http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/

到目前为止，它对我的​​目的一直运行良好，但本文的其余部分偏离了主题，并讨论了我认为我需要 jQuery UI 库的 jQuery UI 小部件，但我真的不想使用这些小部件。

/*!
 * jQuery lightweight plugin boilerplate
 * Original author: @ajpiano
 * Further changes, comments: @addyosmani
 * Licensed under the MIT license
 */

// the semi-colon before the function invocation is a safety
// net against concatenated scripts and/or other plugins
// that are not closed properly.
;(function ( $, window, document, undefined ) {

    // undefined is used here as the undefined global
    // variable in ECMAScript 3 and is mutable (i.e. it can
    // be changed by someone else). undefined isn't really
    // being passed in so we can ensure that its value is
    // truly undefined. In ES5, undefined can no longer be
    // modified.

    // window and document are passed through as local
    // variables rather than as globals, because this (slightly)
    // quickens the resolution process and can be more
    // efficiently minified (especially when both are
    // regularly referenced in your plugin).

    // Create the defaults once
    var pluginName = 'defaultPluginName',
        defaults = {
            propertyName: "value"
        };

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;

        // jQuery has an extend method that merges the
        // contents of two or more objects, storing the
        // result in the first object. The first object
        // is generally empty because we don't want to alter
        // the default options for future instances of the plugin
        this.options = $.extend( {}, defaults, options) ;

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    Plugin.prototype.init = function () {
        // Place initialization logic here
        // You already have access to the DOM element and
        // the options via the instance, e.g. this.element
        // and this.options
    };

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName,
                new Plugin( this, options ));
            }
        });
    }

})( jQuery, window, document );

我现在需要为此添加一个方法，但我对如何做到这一点一无所知。

该方法需要以这样一种方式工作，即插件在页面上创建的实例可以通过控制台调用具有值的方法动态更改属性（最终这将通过其他进程发生，但控制台是现在很好）。

我将如何修改上面的代码以允许这样做？还是我在叫错树？

任何帮助将不胜感激，复杂的 JavaScript 有时会让我在黑暗中迷失方向，但我喜欢尽可能地尝试“最佳实践”。

4

3 回答 3

12

jQuery 文档强烈建议通过将字符串传递给主插件方法来调用插件方法。这是为了防止$.fn命名空间被插件的方法弄得杂乱无章。所以你做这样的事情：

$.fn.yourPlugin = function(options) {
    if (typeof options === "string") {
        //Call method referred to by 'options'
    } else {
        //Setup plugin as usual
    }
};

在您的模式中，您已经有一个完美的地方来定义您的方法：Plugin.prototype. 例如，要添加一个changeColor方法：

Plugin.prototype.changeColor = function(color) {
    $(this.element).css("color", color);
}

注意使用$(this.element). 这是因为在Plugin构造函数element中定义了一个属性，并且将应用插件的元素分配给它：

this.element = element;

那是实际的 DOM 元素，而不是 jQuery 对象，因此需要在其上调用 jQuery。

所以现在你有了一个方法，你需要添加一个机制来调用它。遵循 jQuery 文档的建议：

$.fn[pluginName] = function ( options ) {
    return this.each(function () {
        if (typeof options === "string") {
            var args = Array.prototype.slice.call(arguments, 1),
                plugin = $.data(this, 'plugin_' + pluginName);
            plugin[options].apply(plugin, args);
        } else if (!$.data(this, 'plugin_' + pluginName)) {
            $.data(this, 'plugin_' + pluginName,
            new Plugin( this, options ));
        }
    });
};

然后，您可以changeColor像这样调用该方法：

$("#example").defaultPluginName("changeColour", "red");​​​​​​​​​​​​​​​​​​​​​​​​​​​

这是一个工作示例的小提琴。您可能需要围绕方法调用代码添加一些检查，以确保插件实际上已在您调用它的元素上实例化。

于 2012-06-11T10:34:08.140 回答
0

利用

Plugin.prototype.reset = function () {

};
Plugin.prototype.destroy = function () {

};

等等。添加任意数量的选项

于 2012-06-11T10:10:25.843 回答
0

最好从源头开始，而不是从您难以理解的样板开始：

http://docs.jquery.com/Plugins/Authoring

于 2012-06-11T10:12:24.937 回答