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引用什么？

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

1 个答案: