Interpretation des Quellcodes des jQuery-Selektors (5): Analyseprozess von tokenize

Die folgende Analyse basiert auf der Version jQuery-1.10.2.js.

Im Folgenden wird $("div:not(.class:contain('span')):eq(3)") als Beispiel verwendet, um zu erklären, wie die tokenize- und preFilter-Codes koordiniert werden, um die Analyse abzuschließen. Wenn Sie die detaillierte Erklärung jeder Codezeile der tokenize-Methode und der preFilter-Klasse erfahren möchten, lesen Sie bitte die folgenden beiden Artikel:

http://www.jb51.net/article/63155.htm
http://www.jb51.net/article/63163.htm

Das Folgende ist der Quellcode der Tokenize-Methode. Der Einfachheit halber habe ich alle Codes im Zusammenhang mit Caching, Komma-Matching und relationalem Zeichen-Matching entfernt, sodass nur der Kerncode für das aktuelle Beispiel übrig bleibt. Der entfernte Code ist sehr einfach. Bei Bedarf können Sie den obigen Artikel lesen.

Zusätzlich wird der Code über dem Beschreibungstext geschrieben.

Code kopieren Der Code lautet wie folgt:

Funktion tokenize(selector, parseOnly) {
var matched, match, tokens, type, soFar, groups, preFilters;

soFar = Selektor;
Gruppen = [];
preFilters = Expr.preFilter;

während (bisher) {
if (!matched) {
groups.push(tokens = []);
}

matched = false;

für (Geben Sie Expr.filter ein) {
If ((match = matchExpr[type].exec(soFar))
&& (!preFilters[type] || (match = preFilters[type]
(Match)))) {
Matched = match.shift();
tokens.push({
Wert: übereinstimmend,
Typ: Typ,
Übereinstimmungen: Übereinstimmung
});
SoFar = soFar.slice(matched.length);
}
}

if (!matched) {
Pause;
}
}

return parseOnly ? soFar.length : soFar.error(selector) :
tokenCache(selector, groups).slice(0);
}

Zunächst wird tokenize zum ersten Mal von der Select-Methode während der jQuery-Ausführung aufgerufen und „div:not(.class:contain('span')):eq(3)“ als Selektorparameter an die Methode übergeben.

Code kopieren Der Code lautet wie folgt:

soFar = Selektor;

soFar = "div:not(.class:contain('span')):eq(3)"
Da matched zum ersten Mal kein Wert zugewiesen wurde, wird der folgende Anweisungstext im if ausgeführt. Diese Anweisung initialisiert die Variable tokens und schiebt Token in das Array groups.

Code kopieren Der Code lautet wie folgt:

groups.push(tokens = []);

Geben Sie anschließend die for-Anweisung ein.
Die erste for-Schleife: Nehmen Sie das erste Element „TAG“ aus Expr.filter, weisen Sie es der Typvariablen zu und führen Sie den Schleifenkörpercode aus.

Code kopieren Der Code lautet wie folgt:

If ((match = matchExpr[type].exec(soFar))

&& (!preFilters[type] || (match = preFilters[type]

(Match)))) {

Das Ausführungsergebnis von match = matchExpr[type].exec(soFar) ist wie folgt:

match =["div", "div"]

Der erste Selektor im Beispiel ist div, der mit dem regulären Ausdruck von matchExpr["TAG"] übereinstimmt, und preFilters["TAG"] existiert nicht, daher wird der Anweisungshauptteil innerhalb des if ausgeführt.

Code kopieren Der Code lautet wie folgt:

matched = match.shift();

Entfernen Sie das erste Element div im Match und weisen Sie das Element der passenden Variablen zu. Zu diesem Zeitpunkt matched="div", match = ["div"]

Code kopieren Der Code lautet wie folgt:

tokens.push({

Wert: übereinstimmend,

Typ: Typ,

       Übereinstimmungen: Übereinstimmung

}

Erstellen Sie ein neues Objekt { Wert: "div", Typ: "TAG", Übereinstimmungen: ["div"] } und verschieben Sie das Objekt in das Token-Array.

Code kopieren Der Code lautet wie folgt:

SoFar = soFar.slice(matched.length);

Die soFar-Variable löscht das div. Zu diesem Zeitpunkt ist soFar=":not(.class:contain('span')):eq(3)"
Die zweite for-Schleife: Nehmen Sie das zweite Element „CLASS“ aus Expr.filter, weisen Sie es der Typvariablen zu und führen Sie den Schleifenkörpercode aus.

Code kopieren Der Code lautet wie folgt:

If ((match = matchExpr[type].exec(soFar))

&& (!preFilters[type] || (match = preFilters[type]

(Match)))) {

Da das aktuelle soFar=":not(.class:contain('span')):eq(3)" nicht mit dem regulären Ausdruck vom Typ CLASS übereinstimmt, endet diese Schleife.
Die dritte for-Schleife: Nehmen Sie das dritte Element „ATTR“ aus Expr.filter, weisen Sie es der Typvariablen zu und führen Sie den Schleifenkörpercode aus.
Da die aktuell verbleibenden Selektoren keine Attributselektoren sind, endet dieser Zyklus ebenfalls.

Die vierte for-Schleife: Nehmen Sie das vierte Element „CHILD“ aus Expr.filter, weisen Sie es der Typvariablen zu und führen Sie den Schleifenkörpercode aus.
Da der aktuell verbleibende Selektor kein CHILD-Selektor ist, endet dieser Zyklus ebenfalls.

Die fünfte for-Schleife: Nehmen Sie das fünfte Element „PSEUDO“ aus Expr.filter, weisen Sie es der Typvariablen zu und führen Sie den Schleifenkörpercode aus.

Code kopieren Der Code lautet wie folgt:

If ((match = matchExpr[type].exec(soFar))

&& (!preFilters[type] || (match = preFilters[type]

(Match)))) {

Das Ausführungsergebnis von match = matchExpr[type].exec(soFar) ist wie folgt:
[":not(.class:contain('span')):eq(3)", "not", ".class:contain('span')):eq(3", undefiniert, undefiniert, undefiniert, undefiniert , undefiniert, undefiniert, undefiniert, undefiniert]

Da preFilters["PSEUDO"] existiert, wird der folgende Code ausgeführt:

Code kopieren Der Code lautet wie folgt:

match = preFilters[type](match)

preFilters["PSEUDO"]-Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

„PSEUDO“ : Funktion(Übereinstimmung) {
Var-Überschuss, ohne Anführungszeichen = !match[5] && match[2];

if (matchExpr["CHILD"].test(match[0])) {
return null;
}

if (match[3] && match[4] !== undefiniert) {
match[2] = match[4];
} else if (ohne Anführungszeichen
&& rpseudo.test(ohne Anführungszeichen)
&& (excess = tokenize(unquoted, true))
&& (excess = unquoted.indexOf(")", unquoted.length
- Überschuss)
- unquoted.length)) {

match[0] = match[0].slice(0, überschüssige);
match[2] = unquoted.slice(0, überschüssige);
}

return match.slice(0, 3);
}

Der übergebene Übereinstimmungsparameter ist gleich:

Code kopieren Der Code lautet wie folgt:

[":not(.class:contain('span')):eq(3)", "not", ".class:contain('span')):eq(3", undefiniert, undefiniert, undefiniert, undefiniert , undefiniert

Code kopieren Der Code lautet wie folgt:

unquoted = !match[5] && match[2]

unquoted = ".class:contain('span')):eq(3"

Code kopieren Der Code lautet wie folgt:

if (matchExpr["CHILD"].test(match[0])) { 

Rückgabe null; 

}

match[0] = ":not(.class:contain('span')):eq(3)", stimmt nicht mit dem regulären Ausdruck matchExpr["CHILD"] überein und führt die Return-Null-Anweisung nicht aus .

Code kopieren Der Code lautet wie folgt:

if (match[3] && match[4] !== undefiniert) { 

Match[2] = match[4];
} 

Da match[3] und match[4] beide gleich undefiniert sind, wird der Rumpf der else-Anweisung ausgeführt.

Code kopieren Der Code lautet wie folgt:

else if (ohne Anführungszeichen 

              && rpseudo.test(ohne Anführungszeichen)  

​​​​&& (excess = tokenize(unquoted, true)) 

​​​​&& (excess = unquoted.indexOf(")", unquoted.length - überschüssige) - unquoted.length)

Zu diesem Zeitpunkt ist unquoted = ".class:contain('span')):eq(3" wahr, und weil unquoted enthält:contain('span'), entspricht es dem regulären Ausdruck rpseudo, also rpseudo. test(unquoted) ist wahr, und rufen Sie dann tokenize erneut auf, um erneut unquoted zu analysieren, wie folgt:

Code kopieren Der Code lautet wie folgt:

Überschuss = tokenize(unquoted, true)

Wenn Sie diesmal die Tokenize-Funktion aufrufen, ist der eingehende Selektorparameter gleich „.class:contain('span')):eq(3“ und parseOnly ist gleich true. Der Ausführungsprozess im Funktionskörper ist wie folgt:

Code kopieren Der Code lautet wie folgt:

soFar = Selektor;

soFar = ".class:contain('span')):eq(3"

Da matched zum ersten Mal kein Wert zugewiesen wurde, wird der folgende Anweisungstext im if ausgeführt. Diese Anweisung initialisiert die Variable tokens und schiebt Token in das Array groups.

Code kopieren Der Code lautet wie folgt:

groups.push(tokens = []);

Geben Sie nach

die for-Anweisung ein.

Die erste for-Schleife: Nehmen Sie das erste Element „TAG“ aus Expr.filter, weisen Sie es der Typvariablen zu und führen Sie den Schleifenkörpercode aus.

Code kopieren Der Code lautet wie folgt:

if ((match = matchExpr[type].exec(soFar))

          && (!preFilters[type] || (match = preFilters[type] 

(Übereinstimmung)))) { 

Da der aktuell verbleibende Selektor kein TAG-Selektor ist, endet dieser Zyklus. Die zweite for-Schleife: Nehmen Sie das zweite Element „CLASS“ aus Expr.filter, weisen Sie es der Typvariablen zu und führen Sie den Schleifenkörpercode aus.

Das Ausführungsergebnis von match = matchExpr[type].exec(soFar) ist wie folgt:

match = ["class" , "class"]

Da preFilters["CLASS"] nicht existiert, wird der Anweisungshauptteil innerhalb des if ausgeführt.

Code kopieren Der Code lautet wie folgt:

matched = match.shift();

Entfernen Sie die erste Elementklasse in match und weisen Sie das Element der passenden Variablen zu. Zu diesem Zeitpunkt ist matched="class", match = ["class"]

Code kopieren Der Code lautet wie folgt:

tokens.push({

Wert: übereinstimmend,
Typ: Typ,
Übereinstimmungen: Übereinstimmung
}

Erstellen Sie ein neues Objekt { Wert: „Klasse“, Typ: „KLASSE“, Übereinstimmungen: [„Klasse“] } und verschieben Sie das Objekt in das Token-Array.

Code kopieren Der Code lautet wie folgt:

soFar = soFar.slice(matched.length);

Die soFar-Variable löscht die Klasse. Zu diesem Zeitpunkt ist soFar = ":contain('span')):eq(3"
Die dritte for-Schleife: Nehmen Sie das dritte Element „ATTR“ aus Expr.filter, weisen Sie es der Typvariablen zu und führen Sie den Schleifenkörpercode aus.
Da die aktuell verbleibenden Selektoren keine Attributselektoren sind, endet dieser Zyklus ebenfalls.

Die fünfte for-Schleife: Nehmen Sie das fünfte Element „PSEUDO“ aus Expr.filter, weisen Sie es der Typvariablen zu und führen Sie den Schleifenkörpercode aus.

Code kopieren Der Code lautet wie folgt:

if ((match = matchExpr[type].exec(soFar)) 

          && (!preFilters[type] || (match = preFilters[type] 

(Übereinstimmung)))) { 

Das Ausführungsergebnis von match = matchExpr[type].exec(soFar) lautet wie folgt:
[":contain('span')", "contain", "'span'", "'", "span", undefiniert, undefiniert, undefiniert, undefiniert, undefiniert, undefiniert]

Da preFilters["PSEUDO"] existiert, wird der folgende Code ausgeführt:

Code kopieren Der Code lautet wie folgt:

match = preFilters[type](match)

Der preFilters["PSEUDO"]-Code wird oben angezeigt und wird hier nicht aufgeführt.

Code kopieren Der Code lautet wie folgt:

„PSEUDO“ : function(match) { 

var überschüssige, unquoted = !match[5] && match[2];

If (matchExpr["CHILD"].test(match[0])) { 

         null zurückgeben;                               
}  

If (match[3] && match[4] !== undefiniert) { 

         match[2] = match[4];  

} else if (ohne Anführungszeichen 

                               && (excess = tokenize(unquoted, true))                                 
                                        && (excess = unquoted.indexOf(")", unquoted.length 

                                                                                                                                                                                                                 - Überschuss) 

- unquoted.length)) { 

         match[0] = match[0].slice(0, überschüssige);
         match[2] = unquoted.slice(0, überschüssiges);
}  

Rückgabe match.slice(0, 3);
} 

 Der eingehende Übereinstimmungsparameter ist gleich: 

[":contain('span')", "contain", "'span'", "'", "span", undefiniert, undefiniert, undefiniert, undefiniert, undefiniert, undefiniert]

Code kopieren

Der Code lautet wie folgt:

unquoted = !match[5] && match[2]; unquoted = "span"

Code kopieren

Der Code lautet wie folgt:

if (matchExpr["CHILD"].test(match[0])) { return null; }

Da „:contain('span')“ nicht mit dem regulären Ausdruck matchExpr["CHILD"] übereinstimmt, wird der interne Anweisungshauptteil nicht ausgeführt.

Code kopieren Der Code lautet wie folgt:

if (match[3] && match[4] !== undefiniert) {

match[2] = match[4];

}

Da match[3] = „'“ und match[4] = „span“, wird der interne if-Anweisungskörper ausgeführt und „span“ wird match[2] zugewiesen

Code kopieren Der Code lautet wie folgt:

return match.slice(0, 3);

Gibt eine Kopie der ersten drei Elemente von match zurück

Kehren Sie zu diesem Zeitpunkt zur for-Schleife der tokenize-Methode zurück, um die Ausführung fortzusetzen. Zu diesem Zeitpunkt lauten die Werte jeder Variablen wie folgt:

match = [":contain('span')", "contain", "span"]

soFar = ":contain('span')):eq(3"

Code kopieren Der Code lautet wie folgt:

matched = match.shift();

Entfernen Sie „:contain('span')“ aus dem Match-Array und weisen Sie es der passenden Variablen zu

Code kopieren Der Code lautet wie folgt:

tokens.push({ 

Wert: übereinstimmend, 

Typ: Typ, 

Übereinstimmungen: Übereinstimmung 

}

Erstellen Sie ein neues Objekt {Wert:
":contain('span')", type:"PSEUDO", matches: ["contain", "span"] }, und verschieben Sie das Objekt in das Token-Array.

Code kopieren Der Code lautet wie folgt:

soFar = soFar.slice(matched.length);

Die soFar-Variable löscht zu diesem Zeitpunkt soFar="):eq(3)", bis die for-Schleife endet und die while-Schleife erneut ausgeführt wird Kein gültiger Selektor. Verlassen Sie also die while-Schleife.

Code kopieren Der Code lautet wie folgt:

return parseOnly ? soFar.length : soFar ? Sizzle.error(selector) : 

tokenCache(selector, groups).slice(0);

Da parseOnly zu diesem Zeitpunkt = true ist, wird die Länge von soFar zu diesem Zeitpunkt zurückgegeben, 6, und der Code von preFilters["PSEUDO"] wird weiterhin ausgeführt

Code kopieren Der Code lautet wie folgt:

else if (ohne Anführungszeichen

              && rpseudo.test(ohne Anführungszeichen)  

​​​​&& (excess = tokenize(unquoted, true)) 

​​​​&& (excess = unquoted.indexOf(")", unquoted.length - überschüssige) - unquoted.length) 

Weisen Sie der überschüssigen Variablen 6 zu und dann den Code

Code kopieren Der Code lautet wie folgt:

Überschuss = unquoted.indexOf(")", unquoted.length - Überschuss) - unquoted.length

Berechnen: nicht Endposition des Wählers (d. h. rechte Klammerposition) 22

Code kopieren Der Code lautet wie folgt:

match[0] = match[0].slice(0, überschüssige); match[2] = unquoted.slice(0, Überschuss);

Berechnen Sie die vollständige :not-Selektorzeichenfolge (match[0]) bzw. die Zeichenfolge in ihren Klammern (match[2]), die gleich sind: 

match[0] = ":not(.class:contain('span'))"

match[2] = ".class:contain('span')"

Code kopieren

Der Code lautet wie folgt: return match.slice(0, 3);

Gibt eine Kopie der ersten drei Elemente im Match zurück.
Kehren Sie zur Tokenisierungsfunktion zurück und passen Sie jetzt = [":not(.class:contain('span'))", "not", ".class:contain('span')"]
an

Code kopieren Der Code lautet wie folgt:

matched = match.shift();

Entfernen Sie das erste Element „:not(.class:contain('span'))“ in match und weisen Sie das Element der übereinstimmenden Variablen zu. Zu diesem Zeitpunkt ist matched="":not(.class:contain( '. span'))"",
match = ["not", ".class:contain('span')"]

Code kopieren Der Code lautet wie folgt:

tokens.push({ 

Wert: übereinstimmend, 

Typ: Typ, 

Übereinstimmungen: Übereinstimmung 

}

Erstellen Sie ein neues Objekt { value: ":not(.class:contain('span'))"", Typ: "PSEUDO", Treffer: ["not", ".class:contain('span') "] } und schieben Sie das Objekt in das Token-Array. Zu diesem Zeitpunkt haben Token zwei Elemente, nämlich div und nicht selector.

Code kopieren Der Code lautet wie folgt:

soFar = soFar.slice(matched.length);

SoFar-Variable löscht „:not(.class:contain('span'))“. Zu diesem Zeitpunkt, soFar=":eq(3)", kehren Sie nach dem Beenden dieser for-Schleife erneut zur while-Schleife zurück Um den eq-Selektor des dritten Elements des Tokens zu erhalten, stimmt der Prozess nicht überein, und ich werde hier nicht auf Details eingehen. Die Ergebnisse der Finalgruppen lauten wie folgt:
group[0][0] = {Wert: „div“, Typ: „TAG“, Übereinstimmungen: [„div“] }

group[0][1] = {value: ":not(.class:contain('span'))", Typ: "PSEUDO", Treffer: ["not", ".class:contain(' span')"] }

group[0][2] = {Wert: „:eq(3)“, Typ: „PSEUDO“, Übereinstimmungen: [„eq“, „3“] }

Code kopieren Der Code lautet wie folgt:

return parseOnly ? soFar.length : soFar ? Sizzle.error(selector) : 

tokenCache(selector, groups).slice(0);

Da parseOnly = undefiniert ist, wird tokenCache(selector, groups).slice(0) ausgeführt. Diese Anweisung schiebt Gruppen in den Cache und gibt ihre Kopie zurück.

Damit ist die gesamte Analyse abgeschlossen. Einige Leute fragen sich möglicherweise, dass das zweite Element hier nicht analysiert werden muss. Ja, dies muss im tatsächlichen Betrieb erneut analysiert werden. Wenn Sie natürlich das Ergebnis des gültigen Selektors im Cache speichern können, wenn Sie gerade „class:contain('span')):eq(3“ analysiert haben, können Sie ein erneutes Parsen vermeiden und die Ausführungsgeschwindigkeit verbessern. Aber das ist es Verbessert nur die aktuelle Ausführungsgeschwindigkeit, da „.class:contain('span')“ während der Ausführung, wenn es erneut zur Analyse übermittelt wird, im Cache gespeichert wird.
Zu diesem Zeitpunkt ist der gesamte Ausführungsprozess beendet.

Interpretation des Quellcodes des jQuery-Selektors (5): Analyseprozess von tokenize_jquery