javascript - jQuery 插件回调 - jQuery Boilerplate

Question

我正在使用jquery boilerplate我的插件的模板。我需要从这个插件传递一些回调。该回调需要是一些带有偏移坐标的变量。

var coordinates = {
    x: x2, y: y2
};

我尝试像这样委托(delegate)此回调:

;(function ($, window, document) {

/* 'use strict'; */

// default options
var name = "plugin",
    defaults = {};

// constructor
function plugin (options, callback) {
    this.settings = $.extend({}, defaults, options);
    this.init();
    this.callback = callback;
}

plugin.prototype = {
    init: function () {
        var offset = $(this).offset(),
            x2 = (e.pageX - offset.left),
            y2 = (e.pageY - offset.top);

        $(document).on('mouseup', function() {
            var coordinates = {
                x: x2, y: y2
            };
            this.callback(coordinates);
        });
    }
};

// initialize
$.fn[name] = function (options, callback) {
    return this.each(function() {
        if (!$.data(this, "plugin_" + name)) {
            $.data(this, "plugin_" + name, new plugin(options, callback));
        }
    });
};

})(jQuery, window, document);

我有一个错误，回调不是该对象的方法。有人可以帮忙吗？

Answer 1

重点关注如何调用回调，尤其是在何处调用回调:

plugin.prototype = {
    init: function () {
        var offset = $(this).offset(),
            x2 = (e.pageX - offset.left),
            y2 = (e.pageY - offset.top);

        $(document).on('mouseup', function() {
            var coordinates = {
                x: x2, y: y2
            };
            this.callback(coordinates);
        });
    }
};

您正在创建一个匿名嵌套函数。匿名函数默认有 this === window。

<小时/>

编辑:感谢 KevinB 的评论，我注意到我之前的陈述并不适用于所有情况，仅仅是因为可以通过调用 .apply() 和 .call()，jQuery 这样做的目的是让您只需使用 $(this) 即可访问触发事件的元素。

我的想法是，如果在没有这两个方法的情况下调用匿名函数，那么this === window。但对于直接作为函数而不是方法调用的方法也是如此。以下内容也不起作用。

var obj = { foo : 'foo', bar : function(){console.log(this.foo);} };
$(document).on('mouseup', obj.bar);

首先是因为前面提到的 jQuery 在调用回调时所做的上下文更改，第二是因为一个简单的经验法则:上下文是点左侧的任何内容。当调用这样的回调时:callback()，点的左边没有任何东西，即this === null(别打我)，这不会不存在，因此默认为 this === window。

<小时/>

解决这个问题相当简单:只需引入一个引用插件实例的新变量即可。该变量通常称为 that。微小的改变应该可以实现您的目标:

init: function() {
    var offset = $(this).offset(),
        x2 = (e.pageX - offset.left),
        y2 = (e.pageY - offset.top),
        that = this;

    $(document).on('mouseup', function(){
        var coordinates = {
            x: x2, y: y2
        };
        that.callback(coordinates);
    });
}

但请注意:按照您的插件当前的工作方式，它会在每次运行时将监听器附加到 mouseup 事件。你不需要那么多......特别是因为如果你经常运行插件，它会导致滞后。我建议连接一次事件监听器，并在事件触发后一一调用所有回调。