コールバックとイベントハンドラーの添付ファイルを実装するためにJavaScriptのクロージャーを使用すると、どのような値が得られますか。jQueryがこのパターンを広範囲に使用していることは知っていますが、その理由を理解したいですか?
3 に答える
クロージャをコールバックとして割り当てると、クロージャが定義されているスコープにアクセスできます。また、名前空間をクリーンに保つのにも役立ちます。他のライブラリでは、オブジェクトメソッドをイベントハンドラーとしてバインドして、イベントにオブジェクトへのアクセスを許可できます。これは、非常に洗練された代替ソリューションです。たとえば、次のようなものかもしれません。
// an object definition
var Accordion = function () {
this.clickCounter = 0;
};
Accordion.prototype.click = function () {
this.clickCounter += 1;
alert( this.clickCounter );
};
// create object
var myAccordion = new Accordion();
// function to bind DOM element events to javascript object methods
function methodBind ( element, eventType, myObject, myMethod ) {
$( element ).bind( eventType, function(e) {
e.preventDefault();
myObject[myMethod ].call(myObject);
} );
}
// bind buttons on an element to activate a correlating object method
$( '.Accordion' ).find( '.button' ).each( function() {
methodBind( this, 'click', myAccordion, 'click' );
} );
私の実装もクロージャを使用していますがハハ。
はい、あなたはEsailijaが説明することに終わるかもしれませんが、あなたはまたいくつかの子猫を救うかもしれません。クロージャのイベントハンドラは、ローカルスコープへのアクセスを提供します。だから代わりに
var uselessMap = {};
function myListener(e) {
alert(uselessMap[e.target.id].foo);
}
items.forEach(function(item) {
var el = document.createElement('div');
el.innerText = item.name;
el.id = item.id;
el.addEventListener('click', myListener, false);
})
これだけが必要です:
items.forEach(function(item) {
var el = document.createElement('div');
el.innerText = item.name;
el.addEventListener('click', function(e) {
alert(item.foo);
}, false);
})
私はあなたが何を必要としているのか本当に理解できません。クロージャはjQueryシステムではなく、メインコアまたはJavascriptです。
Javascriptは言語イベントベースです。ajax呼び出しを行っている間、JavaScriptは実行を継続し、結果を期待して停止しません。したがって、完了したら何かを実行できるようにするには、コールバックメソッドが必要です。
関数を呼び出し、アクションが完了すると以下の行が実行されるPHPのようなブロッキング言語から来ると、イライラするかもしれません。しかし、それはJavascriptの哲学です。他のことができる間待ってはいけません。このイベントまたはこのイベントが呼び出されたときにポップできるようにしてください。
通常、クリック/入力の変更/フォームの送信などのイベントの場合、何らかのアクションが発生するまで、すべてのコードを待ってブロックすることはできません。ですから、聞きたい各イベントにリスナーを付けて、続けてください。