Question

我已经构建了一个jQuery插件，但现在我需要在插件外部使用插件中的一个函数。

插件

(function ($) {
    jQuery.fn.vierGewinnt = function () {
 var VierGewinnt = function (config) {
            this.view = config.view;    
            this.dx;
            this.turn = 1;
        }
VierGewinnt.prototype.setToken = function (column) {
            for (var i = this.rows; i > 0; i--) {
                if (this.gamearray[column][i] == 0) {
                    this.gamearray[column][i] = "red";    
                    this.turn++;
                    this.findWinner(column, i);
                    break;
                }
            }

        }})(jQuery);

main.js我试过了：

$.setToken()
$.fn.vierGewinnt.setToken()
$.fn.vierGewinnt.VierGewinnt.setToken()

也许有人有线索！ Thx提前！

Answer 1

您需要做的就是返回函数/插件闭包，并在插件外部创建您想要控制的任何方法作为闭包的属性（$ this）。


    $.fn.vierGewinnt = function(options) {

        var $this = this;

        $this.setToken = function() {
            // setting token
        };

        return $this;
    };

然后保存对插件的引用以便稍后调用该方法。


    var vierPlugin = $('.some-element').vierGewinnt();
    vierPlugin.setToken(); // setting token outside plugin

Answer 2

你做的方式，你不能从外面打电话。

有一些模式可以制作js / jquery小部件。

您正在尝试将“普通”原型与jQuery结合使用。

我认为你有两种选择。

包装jQuery方法以返回构造函数的实例。你可以在上面调用原型方法。类似的东西：
```
$.fn.vierGewinnt = function(config){ 
    return new VierGewinnt (config); 
};
```
然后你可以实例化该插件并调用方法
```
var plugin = $('#someSelector').vierGewinnt();
plugin.setToken(column);
```
在这种情况下，几乎所有代码都可以超出(function ($)块。你只是使用jQuery作为包装器，其他一切只是普通的javascript。据我所知，你的插件不会在任何DOM元素上调用。在那种情况下，我在jQuery插件中看不到很多意义......它是纯粹的javascript。如果是这种情况，只需从您的示例中删除所有jQuery内容，它就会起作用。
使用其他插件模式。我个人喜欢jQueryUI小部件工厂方法，但你必须为它包含jQueryUI。 Docs

Answer 3

注意：使公共setter函数返回'$ this'：

this.setToken1 = function() {
  // setting token
  return $this;
};

this.setToken2 = function() {
  // setting token
  return $this;
};

允许使用jQuery样式的链接：

vierPlugin.setToken1().setToken2();

在插件外部调用jQuery插件函数

3 个答案: