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事件。你不需要那麼多......尤其是因爲如果你運行插件的話會導致延遲。我建議連接事件監聽器一次，並在事件觸發後逐個調用所有的回調函數。