4

this の値を、イベント処理関数でイベントを受け取る要素に変更すると、非常に便利であることを知っています。ただし、要素コンテキストではなく、常にアプリケーション コンテキストで関数が呼び出されるようにしたいと考えています。setTimeoutこのようにして、それらをイベント ハンドラーとして使用したり、呼び出しなどの他の方法で使用したりできます。

したがって、次のようなコード：

window.app = (function () {
    var that = {
        millerTime: function () {},
        changeEl: function (el) {
            el = el || this;
            // rest of code...
            that.millerTime();
        }
    };
    return that;
}());

次のようになります。

window.app = (function () {
    return {
        millerTime: function () {},
        changeEl: function (el) {
            // rest of code...
            this.millerTime();
        }
    };
}());

最初の方法は、私には混乱しているように見えます。イベントを受け取る要素を最初の引数 (できれば jQuery でラップされた要素) としてイベント処理関数に渡し、アプリのコンテキスト内で呼び出す簡単な方法はありますか? jQuery を使用して一連のイベント ハンドラーをバインドするとします。匿名関数を常に含める必要はありません。

$('body').on('click', function (event) {
    app.changeEl.call(app, $(this), event);  // would be nice to get event too
});

これをすべて処理してくれる単一の関数が必要です。この時点で、匿名関数を渡すことはできないように感じますが、誰かが解決策を持っているかどうかを知りたいだけです。

私の試み：

function overrideContext (event, fn) {
   if (!(this instanceof HTMLElement) ||
         typeof event === 'undefined'
   ) {
       return overrideContext;
   }

   // at this point we know jQuery called this function // ??
   var el = $(this);

   fn.call(app, el, event);
}

$('body').on('click', overrideContext(undefined, app.changeEl));

Function.prototype.bind（私は初めてです）を使用しても、まだ要素を取得できません：

window.app = (function () {
    return {
         millerTime: function () {},
         changeEl: function (el) {
            // rest of code...
            console.log(this); // app
            this.millerTime();
         }
    };
}());

function overrideContext (evt, fn) {
    var el = $(this); // $(Window)
    console.log(arguments); // [undefined, app.changeEl, p.Event] 
    fn.call(app, el, event);
}

$('body').on('click', overrideContext.bind(null, undefined, app.changeEl));

代わりに使用$('body').on('click', overrideContext.bind(app.changeEl));すると、 this は関数を指しapp.changeEl、引数の長さは 1 で、 のみが含まれますp.Event。どちらのインスタンスでもまだ要素を取得できません。

4

1 に答える 1

3

このような関数を定義すると、必要なものが得られます。

function wrap(func) {
  // Return the function which is passed to `on()`, which does the hard work.
  return function () {
    // This gets called when the event is fired. Call the handler
    // specified, with it's context set to `window.app`, and pass
    // the jQuery element (`$(this)`) as it's first parameter.
    func.call(window.app, $(this) /*, other parameters (e?)*/);
  }
}

その後、そのように使用します。

$('body').on('click', wrap(app.changeEl));

詳細については、を参照してください。Function.call()

さらに、私はこのアプローチに反対することをお勧めしたいと思います。精通したJavaScriptプログラマーは、タイムアウトとイベントハンドラーでコンテキストが変化することを期待しています。この基本を彼らから遠ざけることは、私があなたをコンパスなしでサハラに落とすようなものです。

于 2013-02-04T23:57:54.743 に答える