Javascript-Front-End-UI-Framework Kit-Nutzungshandbuch – kitjs Event Management_Javascript-Kenntnisse

Ab dem heutigen Kapitel werde ich mich auf die Einführung des Event-Managements von KitJs konzentrieren und versuchen, Ihnen in einfacher Sprache zu zeigen, wie das Mainstream-JS-Framework seine eigene unabhängige Event-Management-Funktion intern implementiert.

(1) Gewöhnliche Domveranstaltungen

Über den Support können wir im Allgemeinen Ereignisse in HTML schreiben

Test

Oder holen Sie sich das Dom-Objekt und binden Sie es

document.getElementById(‘a’).onclick=function(){alert(1)}

oder Nebenveranstaltung

document.getElementById(‘a’).addEventListener(‘click’,function(){alert(1)},flase)

oder per Skript-Tag

Der W3C-Standard empfiehlt die dritte Bindungsmethode oben, die sekundäre Ereignismethode. Der Zweck besteht darin, die starke Abhängigkeit zwischen HTML und Js zu entkoppeln.

(2) Fragen

Wenn wir jedoch nur Methode 3 direkt für unsere Js-Programmierung verwenden, reicht dies nicht aus, da wir auf die folgenden Probleme stoßen werden

1. Browserkompatibilität, von der IE-Serie und W3C unterstützte Browser stimmen nicht mit den Methodennamen und Parametern der sekundären Ereignisbindung überein

2. Nach der Ereignisbindung der Stufe 2 können Sie nicht wissen, ob andere Ereignisse an dasselbe Element gebunden haben, welche Ereignisse gebunden wurden und welchen Inhalt das Ereignis hat.

3. Nachdem die Ereignisbindungsmethode der Stufe 2 ausgelöst wurde, ist die Reihenfolge nicht in der Reihenfolge vor der Bindung, sondern wird zufällig ausgeführt. Manchmal müssen wir die Methode jedoch in der Reihenfolge auslösen

4. Wenn ein Ereignis desselben Elements ausgelöst wird, gibt es keine W3c-Standard-API, die das Stoppen und weitere Auslösen anderer Ereignisse unterstützt, die an dasselbe Element gebunden sind

5. Oftmals registrieren wir Ereignisse der Stufe 2 über anonyme Funktionen und lassen der registrierten Ereignisausführungsmethode kein Handle, sodass es schwierig ist, das Ereignis über „removeEventListener“ abzubrechen

(3) So lösen Sie es mit Kit

OK, das js-Framework existiert, um die oben genannten Probleme zu lösen. Lassen Sie uns sehen, wie das Kit die oben genannten Probleme behebt.

In der API von kit.js gibt es eine ev(config)-Methode

Diese Methode akzeptiert ein Objekt vom Typ Map, das 4 wichtige Parameter enthält,

el-Element, das gebunden werden muss

String-Ereignistyp

FN-Methode zum Auslösen der Ausführung

Der Gültigkeitsbereich kann weggelassen werden. Müssen Sie diesen Zeiger angeben? Wenn nicht, übergeben Sie ihn bei der Registrierung als diesen Zeiger

(4) Code-Analyse

Sehen wir uns die Code-Implementierung genauer an

Schauen Sie direkt vom Kernteil aus

Wenn der eingehende Parameter nicht leer ist, erstellen Sie ein Objekt auf der El des eingehenden Parameters, um die Ereignisregistrierung evReg von KitJs zu speichern

Es gibt zwei Unterobjekte im evReg-Objekt, eines heißt evRegEv und speichert registrierte Ereignisse

Speichern Sie im evRegEv-Objekt einen Schlüssel als aktuelles Registrierungsereignis und den Wert als Array. Die von der Methode ev übergebenen Konfigurationsparameter werden im Array in der Reihenfolge „Wer zuerst kommt, mahlt zuerst“ platziert ist ein Array! ! ! Da Arrays die Reihenfolge beibehalten können, ist dies sehr wichtig

Es gibt auch eine anonyme Methode namens evRegFn, die das ausgelöste Ereignis speichert,

Wir können sehen, dass evRegFn zu Beginn ein anonymes Ereignis ist. Es bestimmt, ob die globale Variable window[me.CONSTANTS.KIT_EVENT_STOPIMMEDIATEPROPAGATION] == true ist, und die Ausführung wird nicht fortgesetzt.

Wenn er nach unten schaut, empfängt er das durch das Ereignis ausgelöste EV-Objekt und hängt mithilfe von mergeIf viele Objekte an dieses EV an, z. B. target, currentTarget und relatedTarget, um Browserkompatibilitätsprobleme zu lösen

Und stopNow, stopDefault, stopGoOn sind Methoden, die erstellt wurden, um zu verhindern, dass Ereignisse weiterhin ausgelöst werden.

Der folgende Absatz ist der Schlüssel zu evRegFn. Wir werden das Ereignisarray im zuvor erstellten evRegEv durchlaufen, um die von der vorherigen ev-Methode übergebenen Konfigurationsparameter herauszunehmen und die Methode im Konfigurationsparameter auszuführen. Wenn die Methode zurückgibt: Wenn der Wert nicht leer ist, geben Sie ihren Rückgabewert

zurück

Machen Sie endlich einen browserkompatiblen Browser und binden Sie unsere anonyme evRegFn-Methode mithilfe von Level-2-Ereignissen.

(5) Zusammenfassung

Um es einfach auszudrücken: Kit verwendet eine eigene anonyme Methode, um Ereignisregistrierungshandles in einem Array zwischenzuspeichern, sodass es sich die Reihenfolge der Ereignisse merken und einen Zugang zum Herausfinden zuvor registrierter Ereignisse, Parameter und Methoden usw. bereitstellen kann. Gleichzeitig wird auf Kompatibilität mit Browsern geachtet.

(6) Abmeldeereignis

Da Kit dabei hilft, Ereignishandles zwischenzuspeichern, wird das Abmelden einfacher

Sie können sehen, dass Kit die entsprechende Ereigniskonfiguration durch direkten Vergleich, fn.toString-Vergleich und fn.toString().trim()-Vergleich findet und sie aus dem Array löscht

(7) Ereignisverbesserung

Jeder sollte gerade bemerkt haben, dass Kit eine mergeIf-Operation für das Event-Objekt des Systems durchgeführt hat. Zunächst einmal: Warum müssen wir megerIf ausführen, weil die Event-Objektattribute des Systems schreibgeschützt sind und nicht überschrieben werden können? Attribute, die es nicht hat

Kit kann also nur megerIf. Wir alle wissen, dass es eine Inkompatibilität im Ereignisobjekt verschiedener Browser gibt, daher muss Kit diese Inkompatibilität beheben. IE hat beispielsweise kein Zielattribut, sondern nur srcElement, und wir können Fügen Sie es hinzu, um die W3c-Standardkompatibilität zu erreichen

Natürlich kann eine bloße Reparatur unsere Bedürfnisse nicht erfüllen. Oft müssen wir auch das Event-Objekt ein wenig mästen

Wenn wir beispielsweise Touchdown und Touchmove auf dem iPhone entwickeln, müssen wir oft den Versatz eines einzelnen Fingers ermitteln, und um den Versatz eines einzelnen Fingers zu ermitteln, benötigen wir Code wie ev.targetTouches[0].clientX, aber sobald es anonym ist Die Funktion sieht so aus und ist auf dem PC nicht kompatibel,

Was zu tun ist, spielt keine Rolle, wir können Event Object mergeWenn unsere eigenen Attribute

firstFingerClientX usw., damit wir den auf der mobilen Seite und der PC-Seite entwickelten Code problemlos vereinheitlichen können.

Der nächste Artikel befasst sich außerdem mit HTML5-Drag & Drop, und erweiterte Gestenereignisse basieren alle auf dieser Grundlage.

Und warum erstellen Sie nicht Ihr eigenes Event wie ExtJs?

1. Die nativen Objekte des Systems haben eine bestimmte Vererbungsbeziehung und möchten nicht zerstört werden

2. Wenn Sie Ihr eigenes neues Objekt verwenden, kann dies dazu führen, dass der Code nach Verlassen des Frameworks nicht mehr portierbar ist und der Codeinhalt erneut geändert werden muss