Question

我已经看过这个帖子：How to create a jQuery plugin with methods?，虽然有很多关于多功能插件的解决方案，但我很感兴趣是否可以使用一个对象，这样你就没有了像$("selector").plugin().dostuff()这样丑陋的构造，而是可以更像这样使用它：$("selector").plugin.dostuff()，即'plugin'是一个对象而不是一个函数。

我可以像这样编写插件：

$.fn.plugin = {
    dostuff: function() {},
    domorestuff: function(){}
};

然后内部函数将无法访问首先调用它的JQuery对象，因为this返回插件对象。有没有办法构建一个基于一个可以与JQuery一起使用的对象的插件？

Answer 1

不，并且由于您给出的原因：您丢失了this，而this在编写插件时非常重要。要获得this，您的插件必须才能成为一个函数。

您基本上有三种实现方法的方法：

使用字符串参数，例如：
```
$("selector").plugin("dostuff");
```
...在插件函数中调度到处理程序方法的位置。这是到目前为止最流行的方式。这是jQuery UI，Bootstrap和其他人使用的方式。以下是完整的例子。
使用“丑陋的构造”，你的插件是一个函数，它返回一个对象（每次一个新对象，以保留this）你可以调用的函数。 / p>
使用某种类型的前缀向jQuery添加多个插件方法而不是一个，因此它最终成为$("selector").pluginDoThis();和$("selector").pluginDoThat();以及$("selector").pluginDoTheOther();关键是使用前缀来避免名称冲突。很久以前我只看过一次，我有一段时间没见过这个插件。不是一个受欢迎的选择。

我刚刚发布了this other answer，显示了＃1的完整模式（在他们的例子中，方法是callThis和destroy），例如：

// Create the plugin
(function ($) {
    var methods = {
        init: function(options) {
            // Determine options
            var opts = $.extend({
                opacity: 0.5             
            }, options);

            // Remember them
            this.data("pluginname", opts);

            // Initial stuff
            this.css("opacity", opts.opacity);
        },

        callThis: function(opts) {
            // Use 'opts' if relevant
            this.css("display","none");
        },

        destroy: function(opts) {
            this.removeData("pluginame");
            this.css("display", "").css("opacity", "");
        }
    };

    jQuery.fn.pluginname = function (options) {
        var method, args;

        // Method?
        if (typeof options === "string") {
            // Yes, grab the name
            method = options;

            // And arguments (we copy the arguments, then
            // replace the first with our options)
            args = Array.prototype.slice.call(arguments, 0);

            // Get our options from setup call
            args[0] = this.data("pluginname");
            if (!args[0]) {
                // There was no setup call, do setup with defaults
                methods.init.call(this);
                args[0] = this.data("pluginname");
            }
        }
        else {
            // Not a method call, use init
            method = "init";
            args = [options];
        }

        // Do the call
        methods[method].apply(this, args);
    };
})(jQuery);

// Example usage
function doInit() {
  $("#target").pluginname();
  setTimeout(doCallThis, 700);
}
function doCallThis() {
  $("#target").pluginname("callThis");
  setTimeout(doDestroy, 700);
}
function doDestroy() {
  $("#target").pluginname("destroy");
  setTimeout(doInit, 700);
}

setTimeout(doInit, 700);

<div id="target">This is the target</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

你可以使用JS对象作为JQuery插件的接口吗？

1 个答案: