Ab dem heutigen Kapitel werde ich mich darauf konzentrieren, den Inhalt von Kitjs 'Event -Management einzuführen und Ihnen in einer einfachen Sprache, wie der Mainstream JS -Framework seine eigene unabhängige Ereignismanagementfunktion impliziert, intern auszusetzen.
(I) Gewöhnliche DOM -Ereignisse
Wir können im Allgemeinen Ereignisse in HTML schreiben, indem wir unterstützt werden
<a onclick = ”Alert (1)”> Test </a>
Oder binden Sie, nachdem Sie das DOM -Objekt erhalten haben
document.getElementById ('a'). onclick = function () {alert (1)}
Oder sekundäre Ereignisse
document.getElementById ('a'). addEventListener ('klick', function () {alert (1)}, Flase)
Oder über Skript -Tag
<script for = ”a” event = ”onclick”> alert (1) </script>
Der W3C -Standard empfiehlt die oben genannte dritte Bindungsmethode, eine sekundäre Ereignismethode, um die starke Abhängigkeit von HTML und JS zu entkoppeln
(Ii) Frage
Wenn wir jedoch nur den Modus 3 verwenden, um unsere JS -Programmierung direkt durchzuführen, reicht dies nicht aus, da wir auf die folgenden Probleme stoßen werden
1. Browserkompatibilität. Die Parameter des von der IE-Serie und W3C unterstützten Browsers sind für die Namen und Parameter der Ereignisbindungsmethoden der zweiten Ebene nicht konsistent.
2. Nachdem Sie durch Ereignisse der Stufe 2 die Bindung gebunden haben, können Sie nicht wissen, ob andere Ereignisse an dasselbe Element gebunden haben, welche Ereignisse gebunden wurden und wie hoch ist der Inhalt des Ereignisses?
3. Nachdem die Methode zur Bindung von Ereignissen Level 2 ausgelöst wurde, ist die Reihenfolge nicht in der Reihenfolge vor der Bindung, sondern zufällig ausgeführt. Manchmal müssen wir jedoch die ausgelösten Methoden bestellen.
V.
5. Viele Male registrieren wir ein Ereignis der Stufe 2 über die anonyme Funktionsmethode, und es bleibt kein Handle zur Registrierung der Ereignisausführungsmethode. Daher ist es schwierig, das Ereignis über REMENDEVENTLITELER zu stornieren.
(Iii) Wie man das Problem des Kits löst
Ok, das JS -Framework existiert, um die oben genannten Probleme zu lösen. Mal sehen, wie Kit mit den oben genannten Problemen umgeht.
In der Kit.js -API gibt es eine EV (config) -Methode
Diese Methode akzeptiert ein Kartentyp -Objekt, das 4 wichtige Parameter enthält.
EL -Element, das gebunden werden muss
String -Ereignis -Typ
Fn löst die Ausführungsmethode aus
Umfang kann weggelassen werden, ob dieser Zeiger angegeben werden muss, falls keiner der EL zum Zeitpunkt der Registrierung als Zeiger übergeben wird
(Iv) Codeanalyse
Schauen wir uns die Code -Implementierung weiter an
Beginnen Sie direkt vom Kernteil
Wenn der eingehende Parameter nicht leer ist, wird ein Objekt auf dem eingehenden Parameter EL erstellt, um die Ereignisregistrierung von Kitjs evreg zu speichern
Es gibt zwei untergeordnete Objekte im EVREG
Speichern Sie im Evregev -Objekt einen Schlüssel als aktuelles registriertes Ereignis, und der Wert ist ein Array. Stellen Sie im Array die in der Methode EV übergebenen Konfigurationsparameter in der Reihenfolge der Reihenfolge von und dann in der Reihenfolge und dann in der Ankunft. Beachten Sie, dass dies ein Array ist! ! ! Da Arrays Bestellung sparen können, ist dies sehr wichtig
Es gibt auch eine anonyme Methode namens EVEregfn, die Ereignisauslöser rettet.
Wir können sehen, dass Evegfn ein anonymer Ereignis ist. Zu Beginn wird festgelegt, ob das globale Fenster der globalen Variablen [me.constants.kit_event_StopimmediatePropagation] == wahr ist. Wenn es stimmt, wird es zurückkehren und nicht weiter ausführen.
Schauen Sie dann nach unten, es akzeptiert das vom Ereignis ausgelöste EV -Objekt und hängt viele Objekte mit Mergeeif wie Target, CurrentTarget, RelatedTarget an, um das Browser -Kompatibilitätsproblem zu lösen.
Stopnow, StopDefault, StopGoon sind Methoden, um zu verhindern, dass Ereignisse weiterhin ausgelöst werden.
Der folgende Absatz ist der Schlüssel zu Evegfn. Wir werden das Ereignisarray in der zuvor erstellten Evregev durchlaufen, die in der vorherigen EV -Methode übergebenen Konfigurationsparameter in der Reihenfolge ausführen und die Methode im Konfigurationsparameter ausführen. Wenn der Rückgabewert der Methode nicht leer ist, gibt er seinen Rückgabewert zurück.
Schließlich erstellen wir einen Browser kompatibel und binden unsere anonyme Methode der EVEregfn -Anonyme mit einer Ereignismethode Level 2.
(V) Zusammenfassung
Einfach ausgedrückt, Kit verwendet eine eigene anonyme Methode, um das Ereignisregistrierungshandle durchzuspeichern und ein Array einzugeben, damit es sich an die Abfolge der Ereignisse erinnert, sowie einen Eintrag zur Ermittlung der zuvor registrierten Ereignisse, Parameter, Methoden usw. und gleichzeitig mit Browser -Kompatibilität kompatibel ist.
(Vi) Abmeldenereignis
Mit Kit helfen Cache -Event -Handles, wird sich angemeldet
Sie sehen
(Vii) Ereignisverbesserung
Sie sollten gerade bemerkt haben, dass Kit einen Mergeeif -Betrieb im Systemereignisobjekt durchgeführt hat. Warum musst du Megerif machen? Da die Objekteigenschaften des Systemereignisobjekts maßgeblich sind und nicht überschrieben werden können, können Sie nur Eigenschaften hinzufügen, die es nicht hat.
So kann Kit nur Megerif. Wir alle wissen, dass es eine Inkompatibilität des Ereignisobjekts des Ereignisobjekts jedes Browsers gibt. Daher muss Kit diese Inkompatibilität beheben. Zum Beispiel hat der IE kein Zielattribut, nur srcelement. Wir können es ihm ein Zielattribut hinzufügen, um die Kompatibilität des W3C -Standards zu erreichen
Natürlich kann nur Reparaturen unsere Bedürfnisse nicht erfüllen. Oft müssen wir noch eine kleine Gewichtszunahme für das Ereignisobjekt erzielen.
Wenn wir beispielsweise Touchdown und Touchmove auf dem iPhone entwickeln, müssen wir häufig Einzelfinger-Offsets erhalten und Einzelfinger-Offsets, EV.Targettouches [0] .ClientX, solcher Code, aber sobald die anonyme Funktion so ist, ist auf dem PC inkompatibel.
Was zu tun? Es spielt keine Rolle, wir können Ereignisobjekte Mergeif unsere eigenen Attribute geben
FirstfingerClientX usw., damit wir den von Mobile und PC entwickelten einheitlichen Code problemlos implementieren können.
Inklusive im nächsten Artikel wird über HTML5 Drag & Drops gesprochen, und fortgeschrittene Gestenereignisse basieren auf dieser Grundlage.
Hinzu kommt, warum nicht das eigene Ereignis von neuem Ereignis wie ExtJS ist, weil
1. Das native System des Systems hat eine bestimmte Erbschaftsbeziehung und möchte nicht zerstört werden.
2. Wenn Sie Ihr eigenes neues Objekt verwenden, ist der Code möglicherweise nicht portabel, nachdem er aus dem Framework herausgegeben ist und der Codeinhalt erneut geändert werden muss.