2021SC@SDUSC
Überblick
Das letzte Mal haben wir den letzten Teil von canvasPainter.js in Canvas analysiert und zusammengefasst. Für die Quark Renderer-Rendering-Engine ist es ein Element. In diesen Elementen gibt es viele Attribute, und jedes Element verfügt über visuelle Attribute wie seine aktuelle Position, den Zoomstatus, die Farbe, den Schatten, den Farbverlauf usw. Wir haben in den letzten Studien eine eingehende Analyse der js-Dateien im Canvas durchgeführt und auch einige andere im Canvas aufgerufene Dateien untersucht. Lassen Sie uns dieses Mal den nächsten Teil analysieren und studieren.
Der Teil unserer Studie ist dieses Mal die Ereignissystemverarbeitung. Das Ereignissystem ist auch sehr interessant, da Canvas eine API-Schnittstelle auf sehr niedriger Ebene ist und keine Kapselung auf hoher Ebene bietet, was bedeutet, dass Sie über eine solche verfügen gehen zu Es ist sehr mühsam, einige Ereignisse durchzuführen, und Sie müssen es selbst implementieren. Durch die Gesamtansicht und Analyse des Codeinhalts im Ereignisereignispaket können Sie erkennen, dass das Ereignissystem des gesamten Quark Renderers Ereignisse verarbeitet, indem es das Design von DOM-Ereignissen simuliert.
Analyse des Ereignisverarbeitungsteils
Gesamtkontrolle über Eventful.js
Der wichtigere Teil des Ereignissystems befindet sich im Eventful.js-Paket. Alle Dinge im Zusammenhang mit Ereignissen sind in diesem Paket enthalten, das für eine gewisse globale Steuerung des Ereignissystems verantwortlich ist. Die Funktionen in diesem Paket bieten auch Ereignisunterstützung für Klassen, die keine Ereignismechanismen unterstützen. Der grundlegende Mechanismus ähnelt W3C-DOM-Ereignissen. Klassen, die Ereignismechanismen erfordern, können die Toolfunktionen in dieser Klasse mischen.
Analysieren Sie bestimmte Methoden
Konstrukteur
Der erste ist der Konstruktor, der Parameter benötigt, von denen jeder ein Objekt ist, als Ereignishandler, dh den Bereich des aktuellen Ereignishandlers, wenn die Funktion ausgeführt wird. Es gibt auch eine Funktion, die die Methode benötigt, um true zurückzugeben bevor es ausgeführt wird; es gibt auch eine Methode, die Methode Wird nach dem Aufruf des Ereignishandlers ausgeführt; der letzte Parameter ist auch eine Funktion, die beim Hinzufügen oder Entfernen von Ereignis-Listenern aufgerufen wird.
let Eventful = function (eventProcessor) {
this._$handlers = {
};
this._$eventProcessor = eventProcessor;
this._$suspends = new Set();
};
Die Handlerfunktion wird nur einmal aufgerufen und nach der Verwendung gelöscht. Diese Funktion verfügt über vier Parameter: Ereignis (Ereignisname), Abfrage (Ereignisfilterbedingung), Handler (Ereignisverarbeitungsfunktion), Kontext (Kontext der Ausführung der Ereignisverarbeitungsfunktion) und der in dieser Funktion zurückgegebene Wert ruft die On-Funktion auf. Als nächstes analysieren wir die On-Funktion.
one: function (event, query, handler, context) {
return on(this, event, query, handler, context, true);
},
Die Funktion dieser Methode besteht darin, die Ereignisverarbeitungsfunktion zu binden und vier Parameter zu übergeben: den Ereignisnamen, die bedingte Filterbedingung, die Ereignisverarbeitungsfunktion und den Kontext, in dem die Ereignisverarbeitungsfunktion ausgeführt wird. Die Ein-Funktion bei der Rückkehr.
on: function (event, query, handler, context) {
return on(this, event, query, handler, context, false);
},
auf Funktion
In der Funktion on sehen wir, dass der von ihm übergebene Wert eins mehr als eins ist. Dies ist ein boolescher Wert, der angibt, ob er nur einmal ausgeführt wird. Wir übergeben true und andere Parameter sind gleich. Im folgenden Funktionscode können wir sehen, dass es drei Beurteilungen gibt, die die eingehenden Parameter analysieren bzw. beurteilen. Der erste Parameter dient der Beurteilung, ob die Abfrage eine Funktion ist, und der zweite Parameter dient der Beurteilung, ob der Handler und das Ereignis vorhanden sind nicht. null, das dritte Urteil besteht darin, _h[event] zu beurteilen. Wenn es nicht existiert, setzen Sie den Wert auf ein Array.
let _h = eventful._$handlers;
if (typeof query === 'function') {
context = handler;
handler = query;
query = null;
}
if (!handler || !event) {
return eventful;
}
if (!_h[event]) {
_h[event] = [];
}
Durchlaufen Sie im verbleibenden Teil _h[event], beurteilen Sie, ob ihr ctx und h dem Kontext und dem Handler entsprechen, und geben Sie ereignisbehaftet zurück.
Definieren Sie dann ein Wrap-Objekt und legen Sie die Werte als Parameter fest, die in dieser Methode erhalten werden. Rufen Sie dann ihren lastIndex und lastWrap ab und rufen Sie die Funktion callListenerChanged auf, die hauptsächlich ventful._$eventProcessor.afterListenerChanged eventType zuweist
for (let i = 0; i < _h[event].length; i++) {
if (_h[event][i].ctx === context && _h[event][i].h === handler) {
return eventful;
}
}
let wrap = {
h: handler,
one: isOnce,
query: query,
ctx: context || eventful,
callAtLast: handler.qrEventfulCallAtLast,
};
let lastIndex = _h[event].length - 1;
let lastWrap = _h[event][lastIndex];
lastWrap && lastWrap.callAtLast ? _h[event].splice(lastIndex, 0, wrap) : _h[event].push(wrap);
callListenerChanged(eventful, event);
return eventful;
Ausschaltfunktion
Wenn es eine Ein-Funktion gibt, gibt es eine entsprechende Aus-Methode. Die Funktion dieser Methode besteht darin, die Ereignisverarbeitungsfunktion freizugeben. Es müssen drei Parameter übergeben werden, nämlich der Ereignisname. Wenn der Parameter ist null, alle Ereignis-Listener werden gelöscht; Ereignisverarbeitung Funktionshandle, wenn der Parameter null ist, werden alle Ereignis-Listener gelöscht; der letzte Parameter ist der Kontextkontext, der die Seite anzeigt.
Die Hauptoperation dieser Funktion besteht darin, zu beurteilen, ob die Parameter null sind, und dann die oben genannten Operationen auszuführen, um die zu löschende Ereignisverarbeitungsfunktion zu bestimmen. Im Methodenkörper können wir sehen, dass die for-Schleife zum Durchlaufen der Bindungsereignisse verwendet wird , ermitteln Sie die nicht entfernten Ereignisse, verschieben Sie sie in die neue Liste und löschen Sie dann die ursprüngliche Ereigniswarteschlange.
off: function (event, handler, context) {
let _h = this._$handlers;
if (!event) {
this._$handlers = {
};
return this;
}
if (handler) {
if (_h[event]) {
let newList = [];
for (let i = 0, l = _h[event].length; i < l; i++) {
if (_h[event][i].ctx !== context && _h[event][i].h !== handler) {
newList.push(_h[event][i]);
}
}
_h[event] = newList;
}
if (_h[event] && _h[event].length === 0) {
delete _h[event];
}
} else {
delete _h[event];
}
callListenerChanged(this, event);
return this;
},
isSilene-, Suspend- und Resume-Methoden
Zusätzlich zu diesen Funktionen gibt es einige andere Funktionen, die für das Auslösen von Ereignissen verantwortlich sind, z. B. isSilene, Suspend, Resume usw. Die Funktion von isSilent Fang Afei besteht darin, zu beurteilen, ob die Ereignisverarbeitungsfunktion gebunden ist, und die Länge der Verarbeitungsfunktion zurückzugeben. Wenn sie 0 ist, ist sie ungebunden, dh ungebunden. Die Funktion der Suspend-Funktion besteht darin, ein Ereignis anzuhalten, und das angehaltene Ereignis wird nicht ausgelöst. Während der Interaktion zwischen der Maus und dem Touchscreen ist es häufig erforderlich, ein Ereignis vorübergehend anzuhalten, um eine versehentliche Berührung zu vermeiden. Die Rolle der Resume-Methode besteht darin, die Auslösung fortzusetzen, was der Suspend-Methode entspricht.
isSilent: function (event) {
let _h = this._$handlers;
return !_h[event] || !_h[event].length;
},
suspend: function (eventName) {
this._$suspends.add(eventName);
},
resume: function (eventName) {
this._$suspends.delete(eventName);
},
Trigger-Methode
Die letzte Methode, diese Methode, ist Trigger. Sie löst ein Ereignis aus, wenn sie funktioniert. Sie besteht hauptsächlich darin, den eingehenden Parameter (Ereignisnamen) zu verarbeiten, zuerst zu beurteilen, ob der Ereignisname vorhanden ist, dann das Ereignis herauszufinden und dann den Schalter zur Übereinstimmung zu übergeben.
if (this._$suspends.has(eventName)) {
return;
}
let _h = this._$handlers[eventName];
let eventProcessor = this._$eventProcessor;
Dies dient dazu, die Länge des gefundenen Arglen aus dem Backbone-Netzwerk-Optimierungsvorschlag abzugleichen, um mit der Länge übereinzustimmen.
let args = arguments;
let argLen = args.length;
switch (argLen) {
case 1:
hItem.h.call(hItem.ctx);
break;
case 2:
hItem.h.call(hItem.ctx, args[1]);
break;
case 3:
hItem.h.call(hItem.ctx, args[1], args[2]);
break;
case 4:
hItem.h.call(hItem.ctx, args[1], args[2], args[3]);
break;
case 5:
hItem.h.call(hItem.ctx, args[1], args[2], args[3], args[4]);
break;
default:
hItem.h.apply(hItem.ctx, args);
break;
}
Zusammenfassen
Das Obige sind alle Methoden in Eventful.js. Nach der vollständigen Körperanalyse besprechen wir die tatsächliche Funktion jeder Methode und analysieren den Schlüsselcode im Detail. Insgesamt ist die js-Datei für den Kern der Ereignisverarbeitung verantwortlich, die eine wichtige Rolle bei der Ereignisverarbeitung von canvasRender spielt.