jQuery插件回调 - jQuery Boilerplate

Question

我为我的插件使用jquery boilerplate模板。我需要从这个插件提供一些回调。这个回调需要一些带有偏移坐标的变量。

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

我试图委派这个回调是这样的：

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

我有一个arror该回调是不是这个对象的方法。任何人都可以帮忙吗？

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

首先是因为环境的上述变化，调用回调时，第2个是因为一个简单的经验法则的那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事件。你不需要那么多......尤其是因为如果你运行插件的话会导致延迟。我建议连接事件监听器一次，并在事件触发后逐个调用所有的回调函数。