Ausführliche Erläuterung der JavaScript-Ereignis-Proxys und Delegate_Javascript-Fähigkeiten

In JavaScript erscheinen häufig Agent und Delegat.

Unter welchen Umständen wird es verwendet? Was ist sein Prinzip?

Hier stellen wir die Verwendung und das Prinzip des Javascript-Delegaten sowie die Delegate-Schnittstelle in Dojo, jQuery und anderen Frameworks vor.

JavaScript-Ereignis-Proxy
Ereignis-Proxys sind eine sehr nützliche und interessante Funktion in der JS-Welt. Wenn wir vielen Elementen Ereignisse hinzufügen müssen, können wir die Handler-Funktion auslösen, indem wir das Ereignis zu ihrem übergeordneten Knoten hinzufügen und das Ereignis an den übergeordneten Knoten delegieren.

Dies ist hauptsächlich auf den Event-Bubbling-Mechanismus des Browsers zurückzuführen. Lassen Sie uns ein konkretes Beispiel geben, um die Verwendung dieser Funktion zu erläutern.

Dieses Beispiel stammt hauptsächlich aus dem verwandten Artikel von David Walsh (How JavaScript Event Delegation Works).

Angenommen, es gibt einen übergeordneten Knoten von UL, der viele untergeordnete Knoten von Li enthält:

<ul id="list">
 <li id="li-1">Li 1</li>
 <li id="li-2">Li 2</li>
 <li id="li-3">Li 3</li>
 <li id="li-4">Li 4</li>
 <li id="li-5">Li 5</li> 
</ul>

Wenn sich unsere Maus über Li bewegt, müssen wir die relevanten Informationen zu diesem Li abrufen und ein schwebendes Fenster öffnen, um detaillierte Informationen anzuzeigen. Wenn ein Li angeklickt wird, muss das entsprechende Verarbeitungsereignis ausgelöst werden.

Unsere übliche Schreibweise besteht darin, jedem Li einige Ereignis-Listener wie onMouseOver oder onClick hinzuzufügen.

function addListenersLi(liElement) {
  liElement.onclick = function clickHandler() {
   //TODO
  };
  liElement.onmouseover = function mouseOverHandler() {
   //TODO
  }
 }

 window.onload = function() {
  var ulElement = document.getElementById("list");
  var liElements = ulElement.getElementByTagName("Li");
   for (var i = liElements.length - 1; i >= 0; i--) {
    addListenersLi(liElements[i]);
   } 
 }

Wenn die Li-Unterelemente in diesem UL häufig hinzugefügt oder gelöscht werden, müssen wir jedes Mal, wenn Li hinzugefügt wird, die Methode addListenersLi aufrufen, um einen Ereignishandler für jeden Li-Knoten hinzuzufügen.

Dadurch wird der Vorgang des Hinzufügens oder Löschens komplex und es besteht die Möglichkeit von Fehlern.

Die Lösung des Problems besteht darin, den Ereignis-Proxy-Mechanismus zu verwenden. Wenn das Ereignis an den oberen übergeordneten Knoten geworfen wird, ermitteln und erhalten wir die Ereignisquelle Li, indem wir das Zielobjekt (Ziel) des Ereignisses überprüfen.

Der folgende Code kann den gewünschten Effekt erzielen:

/ 获取父节点，并为它添加一个click事件
document.getElementById("list").addEventListener("click",function(e) {
 // 检查事件源e.targe是否为Li
 if(e.target && e.target.nodeName.toUpperCase == "LI") {
 // 
 //TODO
 console.log("List item ",e.target.id," was clicked!");
 }
});

Fügen Sie ein Klickereignis zum übergeordneten Knoten hinzu. Wenn auf den untergeordneten Knoten geklickt wird, wird das Klickereignis vom untergeordneten Knoten aus angezeigt. Nachdem der übergeordnete Knoten das Ereignis erfasst hat, bestimmt er anhand von e.target.nodeName, ob es sich um den Knoten handelt, den wir verarbeiten müssen. Und erhalten Sie den angeklickten Li-Knoten über e.target. Auf diese Weise können die entsprechenden Informationen gewonnen und verarbeitet werden.

Event sprudeln und einfangen
Browser-Ereignis-Bubbling-Mechanismus. Verschiedene Browser-Hersteller verfügen über unterschiedliche Verarbeitungsmechanismen zum Erfassen und Verarbeiten von Ereignissen. Hier stellen wir die vom W3C für DOM2.0 definierten Standardereignisse vor.

Das DOM2.0-Modell unterteilt den Ereignisverarbeitungsprozess in drei Phasen:

1. Ereigniserfassungsphase,

2. Ereigniszielphase,

3. Sprudelnde Bühne des Ereignisses.

Wie unten gezeigt:

Ereigniserfassung: Wenn ein Element ein Ereignis auslöst (z. B. onclick), gibt das Objektdokument der obersten Ebene einen Ereignisstrom aus, der zusammen mit den Knoten des DOM-Baums zum Zielelementknoten fließt, bis er den erreicht Zielelement, in dem das Ereignis tatsächlich auftritt. Während dieses Vorgangs wird die entsprechende Abhörfunktion des Ereignisses nicht ausgelöst.

Ereignisziel: Führen Sie nach Erreichen des Zielelements die entsprechende Verarbeitungsfunktion des Ereignisses des Zielelements aus. Wenn keine Listening-Funktion gebunden ist, wird sie nicht ausgeführt.

Ereignis-Bubbling: ausgehend vom Zielelement und Ausbreitung zum Element der obersten Ebene. Wenn es unterwegs Knoten gibt, die an entsprechende Ereignisverarbeitungsfunktionen gebunden sind, werden diese Funktionen sofort ausgelöst. Wenn Sie verhindern möchten, dass Ereignisse sprudeln, können Sie e.stopPropagation() (Firefox) oder e.cancelBubble=true (IE) verwenden, um das Sprudeln von Ereignissen zu verhindern.

Delegationsfunktion in jQuery und Dojo
Schauen wir uns an, wie Sie die in Dojo und jQuery bereitgestellte Ereignis-Proxy-Schnittstelle verwenden.

jQuery:

$("#list").delegate("li", "click", function(){
 // "$(this)" is the node that was clicked
 console.log("you clicked a link!",$(this));
});

Die Delegate-Methode von jQuery erfordert drei Parameter, einen Selektor, einen Zeitnamen und einen Ereignishandler.

Dojo ähnelt jQuery, der einzige Unterschied besteht im Programmierstil:

require(["dojo/query","dojox/NodeList/delegate"], function(query,delegate){

 query("#list").delegate("li","onclick",function(event) {
 // "this.node" is the node that was clicked
 console.log("you clicked a link!",this);
 });
})

Das Delegate-Modul von Dojo befindet sich in dojox.NodeList. Es bietet dieselbe Schnittstelle wie jQuery und dieselben Parameter.

Durch die Delegation können Sie mehrere Vorteile der Verwendung der Ereignisdelegation für die Entwicklung nutzen:

1. Es gibt weniger Verwaltungsfunktionen. Es ist nicht erforderlich, für jedes Element eine Listener-Funktion hinzuzufügen. Für ähnliche untergeordnete Elemente unter demselben übergeordneten Knoten können Ereignisse behandelt werden, indem sie an die Überwachungsfunktion des übergeordneten Elements delegiert werden.

2. Sie können Elemente problemlos dynamisch hinzufügen und ändern, und es ist nicht erforderlich, Ereignisbindungen aufgrund von Elementänderungen zu ändern.

3. Es gibt weniger Verbindungen zwischen JavaScript- und DOM-Knoten, was die Wahrscheinlichkeit von Speicherverlusten durch Zirkelverweise verringert.

Verwendung von Proxys in der JavaScript-Programmierung
Die obige Einführung besteht darin, den Browser-Bubbling-Mechanismus zu verwenden, um bei der Verarbeitung von DOM-Ereignissen Ereignis-Proxys zu DOM-Elementen hinzuzufügen. Tatsächlich können wir in der reinen JS-Programmierung dieses Programmiermodell auch verwenden, um Proxy-Objekte zu erstellen, um Zielobjekte zu betreiben.

var delegate = function(client, clientMethod) {
  return function() {
   return clientMethod.apply(client, arguments);
  }
 }
 var Apple= function() {
  var _color = "red";
  return {
   getColor: function() {
    console.log("Color: " + _color);
   },
   setColor: function(color) {
    _color = color;
   }
  };
 };

 var a = new Apple();
 var b = new Apple();
 a.getColor();
 a.setColor("green");
 a.getColor();
 //调用代理
 var d = delegate(a, a.setColor);
 d("blue");
 //执行代理
 a.getColor();
 //b.getColor();

Dalam contoh di atas, pengubahsuaian a dilakukan dengan memanggil fungsi proksi d yang dibuat oleh fungsi delegate().

Walaupun kaedah ini menggunakan aplikasi (panggilan juga boleh digunakan) untuk merealisasikan pemindahan objek panggilan, ia menyembunyikan objek tertentu daripada mod pengaturcaraan dan boleh melindungi objek ini daripada diakses dan diubah suai secara santai.

Konsep delegasi digunakan dalam banyak rangka kerja untuk menentukan skop kaedah yang dijalankan.

Yang biasa termasuk dojo.hitch(skop, kaedah) dan createDelegate(obj, args) ExtJS.

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan javascript.