0

プラグインにjquery ボイラープレートテンプレートを使用しています。このプラグインからコールバックを配信する必要があります。このコールバックは、オフセット座標を持つ変数である必要があります。

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

コールバックがこのオブジェクトのメソッドではないというエラーが発生しました。誰でも助けることができますか？

4

1 に答える 1

2

コールバックを呼び出す方法、特にどこで呼び出すかに注目してください。

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のコメントのおかげで、前のステートメントがすべての場合に当てはまるわけではないことに気付きました.andを呼び出すことで関数のコンテキストを変更できるという理由だけで.apply()、.call()jQueryは単に使用$(this)してイベントをトリガーした要素。

私が念頭に置いていたのは、これら2つのメソッドなしで無名関数が呼び出された場合、this === window. しかし、これは、メソッドとしてではなく関数として直接呼び出されるメソッドにも当てはまります。以下もうまくいきません。

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

まず第一に、コールバックを呼び出すときに jQuery が行う前述のコンテキストの変更が原因で、2 つ目は単純な経験則によるものです。コンテキストはドットの左側にあるものです。このようにコールバックを呼び出す場合: callback()、ドットの左側には何もありません。つまり、this === null存在しない (don't hit me) ため、デフォルトで になり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リスナーがイベントにアタッチされます。それほど多くは必要ありません...特に、プラグインを頻繁に実行すると遅延が発生するため. イベントリスナーを一度接続し、イベントがトリガーされたら、すべてのコールバックを 1 つずつ呼び出すことをお勧めします。

于 2013-11-20T22:33:45.863 に答える