如何让这个 jquery 插件在没有元素的情况下工作

Question

我刚刚开始尝试编写 jquery 插件。我已经下载了一个“样板”，我只是在试验它以了解它。

样板代码（取自http://jqueryboilerplate.com/）在这里：

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

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

        // window and document are passed through as local variable rather than global
        // as 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 which merges the contents of two or
                // more objects, storing the result in the first object. The first object
                // is generally empty as we don't want to alter the default options for
                // future instances of the plugin
                this.settings = $.extend( {}, defaults, options );
                this._defaults = defaults;
                this._name = pluginName;
                this.init();
        }

        // Avoid Plugin.prototype conflicts
        $.extend(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.settings
                        // you can add more functions like the one below and
                        // call them like so: this.yourOtherFunction(this.element, this.settings).
                        console.log("xD");
                        this.yourOtherFunction();
                },
                yourOtherFunction: function () {
                        // some logic
                        alert("in other function");
                }
        });

        // 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 );

我已经对插件进行了两次调用，如下所示：

$(".form_result_message").defaultPluginName({
          propertyName: "a custom value"
        });

第一个有效...下一个给我一个错误"TypeError: $.defaultPluginName is not a function"....

var testingThis = $.defaultPluginName({
          propertyName: "a custom value"
        });

有人可以向我解释为什么这不起作用以及我必须如何调用它才能在不将其附加到元素的情况下使其工作？

非常感谢。 :-)

Answer 1

当您将插件定义为$.fn[pluginName] 时，这使其成为 jQuery 对象上的方法。如果你希望它是一个普通的函数而不是一个方法，你应该定义$[pluginName]：

$[pluginName] = function (options) {
    ...
};

但是，这对于 this.each(...) 的插件没有意义——如果您不将其应用于任何元素，您希望 this 引用什么？