In Javasript erscheinen häufig Proxy und Delegierter .
Unter welchen Umständen verwendet es also tatsächlich? Was ist sein Prinzip?
Hier stellen wir die Nutzung und Prinzipien des JavaScript -Delegierten sowie die Schnittstelle des Delegierten in Frameworks wie Dojo, JQuery usw. ein
JavaScript Event Proxy
Event Proxying ist eine sehr nützliche und interessante Funktion in der JS -Welt. Wenn wir vielen Elementen Ereignisse hinzufügen müssen, können wir die Verarbeitungsfunktion auslösen, indem wir Ereignisse zu ihrem übergeordneten Knoten hinzufügen und Ereignisse an den übergeordneten Knoten delegieren.
Dies ist hauptsächlich auf den Ereignisblasenmechanismus des Browsers zurückzuführen. Geben wir ein bestimmtes Beispiel an, um zu erklären, wie diese Funktion verwendet wird.
Dieses Beispiel stammt hauptsächlich aus David Walshs verwandten Artikeln (wie die Delegation von JavaScript -Ereignissen funktioniert).
Angenommen, es gibt einen UL -Elternknoten, der viele Li -Kinder 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 unsere Maus zu Li wechselt, müssen wir relevante Informationen zu diesem LI erhalten und aus dem schwimmenden Fenster herausschweben, um detaillierte Informationen anzuzeigen, oder wenn ein LI geklickt wird, muss das entsprechende Verarbeitungsereignis ausgelöst werden.
Unsere übliche Schreibweise ist es, jedem Li einige Ereignisüberwachung wie Onmouseover oder Onclick hinzuzufügen.
Funktion addierenersli (lielement) {lielement.onclick = Funktion ClickHandler () {// Todo}; lielement.onmouseover = function mouseOverHandler () {// Todo}} Fenster.onload = function () {var ulelement = document.getElementById ("list"); var lielements = ulelement.getElementByTagName ("li"); für (var i = lielements.length-1; i> = 0; i--) {addierenersli (lielements [i]); }}Wenn die Li -Kinderelemente in dieser UL häufig hinzugefügt oder gelöscht werden, müssen wir jedes Mal, wenn wir Li hinzufügen, die Ereignisbearbeitungsfunktionen für jeden Li -Knoten hinzufügen.
Dies kann Komplexität und Möglichkeit von Fehlern im Additions- oder Entfernungsprozess erzeugen.
Die Lösung für das Problem besteht darin, den Ereignis -Proxy -Mechanismus zu verwenden. Wenn das Ereignis auf den übergeordneten Knoten der höheren Ebene geworfen wird, beurteilen wir die Ereignisquelle Li, indem wir das Zielobjekt des Ereignisses überprüfen.
Der folgende Code kann den gewünschten Effekt erzielen:
/ Get the parent node and add a click event to it document.getElementById("list").addEventListener("click",function(e) { // Check whether the event source e.targe is Li if(e.target && e.target.nodeName.toUpperCase == "LI") { // //TODO console.log("List item ",e.target.id," was geklickt! ");}});Fügen Sie dem übergeordneten Knoten ein Klickereignis hinzu. Wenn der untergeordnete Knoten angeklickt wird, sprudelt das Klickereignis vom untergeordneten Knoten nach oben. Nachdem der übergeordnete Knoten das Ereignis gefangen hat, bestimmt er, ob es sich um den Knoten handelt, den wir verarbeiten müssen, indem wir e.target.nodename beurteilen müssen. Und der geklickte Li -Knoten wurde über E.Target erhalten. Daher können die entsprechenden Informationen erhalten und verarbeitet werden.
Ereignisblase und Erfassung
Der Ereignisblasenmechanismus des Browsers, verschiedene Browserhersteller, haben unterschiedliche Verarbeitungsmechanismen für die Erfassung und Handhabung von Ereignissen. Hier stellen wir die von W3C für DOM2.0 definierten Standard -Ereignisse ein.
Das DOM2.0 -Modell unterteilt den Ereignisverarbeitungsprozess in drei Phasen:
1. Ereignisaufnahmestufe,
2. Ereigniszielbühne,
3. Die sprudelnde Ereignisstufe.
Wie in der Abbildung unten gezeigt:
Ereigniserfassung: Wenn ein Element ein Ereignis (z. B. Onclick) auslöst, emittiert das Objektdokument auf oberster Ebene einen Ereignisstrom und fließt zum Zielelementknoten mit dem Knoten des DOM-Baumes, bis das Zielelement, in dem das Ereignis tatsächlich auftritt, erreicht ist. In diesem Prozess wird die entsprechende Hörfunktion des Ereignisses nicht ausgelöst.
Ereignisziel: Nachdem das Zielelement erreicht ist, wird die entsprechende Verarbeitungsfunktion des Ereignisses des Zielelements ausgeführt. Wenn es keine gebundene Listener -Funktion gibt, wird sie nicht ausgeführt.
Ereignisblasen: Beginnen Sie mit dem Zielelement und vermehren Sie sich zum oberen Element. Wenn ein Knoten die entsprechende Ereignishandhabungsfunktion unterwegs bindet, werden diese Funktionen sofort ausgelöst. Wenn Sie verhindern möchten, dass das Ereignis sprudelt, können Sie E.StopPropagation () (Firefox) oder E. CancelBubble = True (dh) verwenden, um die Blasenausbreitung des Ereignisses zu organisieren.
Delegierfunktion in JQuery und Dojo
Schauen wir uns an, wie Event -Proxy -Schnittstellen in Dojo und JQuery verwendet werden.
JQuery:
$ ("#list"). delegate ("li", "click", function () {// "$ (this)" ist der Knoten, auf den auf console.log geklickt wurde ("Sie haben auf einen Link geklickt!", $ (this));});Die Jquery -Delegate -Methode erfordert drei Parameter, einen Selektor, einen Zeitnamen und einen Ereignishandler.
DOJOs Ähnlichkeit mit JQuery ist nur der Unterschied in den Programmierstilen zwischen den beiden:
benötigen (["dojo/query", "dojox/nodelist/delegate"], function (query, delegate) {query ("#liste").Das Delegate -Modul von Dojo befindet sich in Dojox.nodelist, und die bereitgestellte Schnittstelle entspricht JQuery und die Parameter sind gleich.
Durch die Delegation können Sie die verschiedenen Vorteile der Verwendung von Ereignisdelegation zur Entwicklung zu schätzen wissen:
1. Es werden weniger Funktionen verwaltet. Für jedes Element müssen keine Hörerfunktion hinzugefügt werden. Für ähnliche untergeordnete Elemente unter demselben übergeordneten Knoten können Ereignisse über eine Hörfunktion behandelt werden, die an das übergeordnete Element delegiert ist.
2. Es ist einfach, Elemente dynamisch hinzuzufügen und zu ändern, und es besteht keine Notwendigkeit, die Ereignisbindung aufgrund von Elementänderungen zu ändern.
A.
Verwenden von Proxy in JavaScript -Programmierung
In der obigen Einführung wird die Verwendung des Browser -Blasenmechanismus verwendet, um DOM -Elemente bei der Verarbeitung von DOM -Ereignissen Ereignisproxy hinzuzufügen. In der reinen JS -Programmierung können wir dieses Programmiermuster auch verwenden, um Proxy -Objekte zu erstellen, um Zielobjekte zu betreiben.
var delegate = function (client, clientMethod) {return function () {return clientMethod.apply (Client, Argumente); }} var Apple = function () {var _color = "rot"; return {getColor: function () {console.log ("Farbe:" + _color); }, setColor: function (color) {_color = color; }}; }; var a = neuer Apple (); var b = neuer Apple (); A.getColor (); A.SetColor ("grün"); A.getColor (); // Proxy var d = delegate (a, A.SetColor) aufrufen; d ("blau"); // Ausführung Proxy A.getColor (); //b.getColor ();Im obigen Beispiel wird die Modifikation von a durch Aufrufen der von der Funktion Delegate () erstellten Proxy -Funktion D betrieben.
Obwohl diese Methode angewendet wird (Call kann auch verwendet werden), um das Anrufobjekt zu übertragen, implementiert sie, dass das Ausblenden bestimmter Objekte aus dem Programmiermodus versteckt wird, wodurch diese Objekte nach Belieben zugegriffen und geändert werden können.
Auf das Konzept des Delegierten wird in vielen Frameworks verwiesen, um den Betriebsumfang einer Methode anzugeben.
Typische Beispiele sind dojo.hitch (Umfang, Methode) und CreateDelegate (OBJ, Argums) von ExtJs.
Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.