Question

我使用以下样板创建了一个jQuery插件：

https://github.com/jquery-boilerplate/jquery-boilerplate/blob/master/src/jquery.boilerplate.js

我的问题是，如果我的插件中有其他公共方法，如何从该公共方法中访问插件的设置（以及其他变量）？

;(function ( $, window, document, undefined ) {
    // Create the defaults once
    var pluginName = "myplugin",
    defaults = {
        propertyName: "value"
    };

    // The actual plugin constructor
    function Plugin ( element, options ) {
        this.element = element;
        this.settings = $.extend( {}, defaults, options );
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    var body = $('body');

    Plugin.prototype = {
        init: function () {
            // Init code here
        },
        yourOtherFunction: function () {
            // This is a private method
        }
    };

    // Toggle menu opening
    $.fn.doSomething = function(){
        // How do I access the plugin's settings here?  <<<<<<< Here is the issue
    };

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

        // chain jQuery functions
        return this;
    };

})( jQuery, window, document );

因此，在稍后使用$('.myelement').myplugin();设置我的插件后，我可以执行$('.myelement').doSomething();，并且在该方法中，我需要能够访问插件的设置。我怎么做？ this.settings似乎没有效果。

是否有更好的替代插件样板或者这个非常标准？

Answer 1

这是一个糟糕的设计。您正在创建一个全新的插件。 myplugin和doSomething之间没有联系。

我建议你这样做：

$.fn[ pluginName ] = function ( options ) {
    if(options == 'doSomething'){
       // do something here or call some predefined function here
    }
    else{
    this.each(function() {
        if ( !$.data( this, "plugin_" + pluginName ) ) {
            $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
        }
    });
    }
    // chain jQuery functions
    return this;
};

所以，如果你使用上面的结构，在调用$('.myelement').myplugin();后，你可以这样做：

$('.myelement').myplugin('doSomething');   //this is cool!

如何在公共插件方法中访问jQuery插件设置？

1 个答案: