In diesem Artikel wird die Methode addClass() der Interpretation des jQuery-Quellcodes detaillierter analysiert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:
Erweitern Sie die addClass-Funktion auf ein jQuery-Prototypobjekt, jQuery.fn ist jQuery.prototype
jQuery.fn.extend({
/*
Es ist ersichtlich, dass es sich hierbei um eine Plug-in-Methode mit einer Funktion namens addClass handelt.
*/
AddClass: function( value ) {
var-Klassen, elem, cur, clazz, j, finalValue,
i = 0,
/*
Dies stellt das vom Selektor ausgewählte jQuery-Objekt dar, das als Klasse hinzugefügt werden soll, und len ist die Länge des jQuery-Objektarrays.
*/
len = this.length,
//Wenn ein Operand kein boolescher Wert ist, gibt die Operation && nicht unbedingt einen booleschen Wert zurück. Zu diesem Zeitpunkt gelten die folgenden Regeln:
//1. Wenn der erste Operand nicht vom booleschen Typ ist, geben Sie den zweiten Operanden zurück;
//2. Wenn der zweite Operand nicht vom booleschen Typ ist, wird das Objekt nur zurückgegeben, wenn das Auswertungsergebnis des ersten Operanden wahr ist;
//3. Wenn keiner der Operanden vom booleschen Typ ist, wird der zweite Operand zurückgegeben
//4. Wenn einer der Operanden null ist, geben Sie null zurück;
//5. Wenn einer der Operanden NaN ist, gebe NaN zurück;
//6. Wenn einer der Operanden undefiniert ist, geben Sie undefiniert zurück.
//Fall 1: Wenn der Wert null ist, was Regel 4 entspricht, wird null zurückgegeben, d. h. der Fortführungswert ist null;
//Fall 2: Wenn der Wert undefiniert ist, was Regel 6 entspricht, wird undefiniert zurückgegeben, d. h. der Fortführungswert ist undefiniert;
//Fall 3: Wenn der Wert NaN ist, was Regel 5 entspricht, wird NaN zurückgegeben, d. h. der Fortführungswert ist
//Fall 4: Wenn der Wert ein numerischer Typ ist, geben Sie false zurück;
//Fall 5: Wenn der Wert ein boolescher Typ ist, geben Sie false zurück;
//Fall 7: Wenn der Wert vom Typ Array, Objekt oder Funktion ist, entspricht er Regel 2, aber typeof value === 'string' ist falsch, daher wird das Objekt zurückgegeben und false zurückgegeben.
//Fall 8: Wenn der Wert ein Zeichenfolgentyp ist und Regel 2 erfüllt, wird der Wert zurückgegeben.
// Daher kann dieser Satz nur feststellen, ob der Wert ein Zeichenfolgentyp ist, und den Zeichenfolgenwert zurückgeben, um fortzufahren. Jeder andere Typ gibt am Ende „false“ zurück oder ist ein Typ, der implizit in „false“ konvertiert werden kann.
continue = typeof value === "string" && value;
// Da oben nur festgestellt werden kann, ob es sich um einen Zeichenfolgentyp handelt, dient der folgende Satz dazu, festzustellen, ob der Wert ein Funktionstyp ist. Zur Beurteilung wird die globale Funktion isFunction von jQuery verwendet, nämlich $.isFunction().
if ( jQuery.isFunction( value ) ) {
//Wenn der Wert ein Funktionstyp ist, klicken Sie hier.
//JQuery-Objekt für Kettenaufruf zurückgeben.
//Dies hier ist das von Ihrem Selektor ausgewählte jQuery-Objekt.
return this.each(function( j ) {
//Iterieren beginnen. Dies ist kein jQuery-Objekt, sondern das DOM-Objekt der aktuellen Iteration, daher wird es mit jQuery(this) umschlossen und zu einem jQuery-Objekt, sodass Sie jQuery-Methoden verwenden können. j repräsentiert den Index jeder Durchquerung. Übergeben Sie eine Wertfunktion, die einen Wert zurückgibt, um den Klassennamen festzulegen. Die Wertfunktion ruft jedes Mal das aktuelle DOM als ihr Ausführungsobjekt auf und übergibt den aktuellen DOM-Indexwert und den Klassennamen. Der von der Wertfunktion zurückgegebene Wert wird erneut von jQuery(this).addClass (Rückgabewert) aufgerufen ()-Methode wird erneut aufgerufen. Wenn ein String zurückgegeben wird, wird ein weiterer if-Zweig ausgeführt. Wenn die zurückgegebene Funktion immer noch eine Funktion ist, rufen Sie die zurückgegebene Funktion weiterhin auf.
jQuery( this ).addClass( value.call( this, j, this.className ) );
});
}
//Der zuvor erhaltene Wert ist ein String. Hier bestimmen wir, ob es sich um einen leeren String handelt, der implizit in true konvertiert wird. Die leere Zeichenfolge wird implizit in „false“ konvertiert, sodass der if-Anweisungsblock nicht mehr ausgeführt wird. Das Programm springt zum endgültigen Rückgabewert und gibt das jQuery-Objekt zurück und die Ausführung wird abgeschlossen.
if ( fortfahren ) {
//Mit einer nicht leeren Zeichenfolge fortfahren und mit der Ausführung des if-Anweisungsblocks beginnen. Angenommen, der Wert ist „show bd1“.
//rnotwhite ist ein regulärer Ausdruck (/S /g), der bedeutet, dass Nicht-Leerzeichen-Zeichen einmal oder mehrmals global abgeglichen werden.
//(Wert || "") gibt "show bd1" zurück, was sehr einfach ist.
//"show bd1".match((/S /g)) ||. [] gibt ["show", "bd1"] zurück. Wenn Sie nicht wissen, was match tut, schauen Sie sich das bitte an.
classes = ( value || "" ).match( rnotwhite ) ||
//Jetzt ist die Klasse ['show', 'bd1'] ein Array, dem Sie den Klassennamen hinzufügen möchten.
//Beginnen Sie unten mit dem Durchlaufen und fügen Sie Klassen für jedes DOM-Objekt hinzu.
für ( ; i < len; i ) {
//Dies ist das jQuery-Objekt, elem ist das aktuelle DOM-Objekt.
elem = this[i];
/*
Der ===-Operator hat eine höhere Priorität als der &&-Operator. Er bestimmt zunächst, ob der DOM-Knotentyp ein Elementknoten ist.
rclass ist ein regulärer Ausdruck/[trnf]/g;
Der ternäre Operator in Klammern gibt an, ob der aktuelle DOM-Knoten bereits eine Klasse hat. Wenn ja, werden die möglicherweise in der Klasse vorhandenen Tabulatorzeichen, Zeilenvorschubzeichen, Wagenrücklaufzeichen usw. durch eine Zeichenfolge mit einem Leerzeichen „“ ersetzt. und fügen Sie vor und nach der aktuellen Klasse ein Leerzeichen hinzu; wenn der aktuelle DOM-Knoten keine Klasse hat, wird auch eine Zeichenfolge mit einem Leerzeichen „ “ angegeben. Schließlich wird daraus
cur = elem.nodeType === 1 && "show bd1", das ist sehr bekannt, ja, es wird nach den ersten 6 Regeln ausgewertet.
Angenommen, der Knotentyp von elem ist 1, dann ist cur = true && " " und schließlich cur = "show bd1".
Wenn der Knotentyp von elem nicht 1 ist, dann gilt cur = false && " " und schließlich cur = false.
*/
Cur = elem.nodeType === 1 && ( elem.className ?
( " " elem.className " " ).replace( rclass, " " ):" ");
// Jetzt cur = „show bd1“, geben Sie den if-Anweisungsblock zur Ausführung ein.
Wenn (cur) {
j = 0;
/*
Klassen sind ["show bd1"]
Schleife, um zu prüfen, ob die hinzuzufügende Klasse bereits in der Klasse vorhanden ist, die das aktuelle DOM-Element bereits hat.
Wenn nicht, fügen Sie diese Klasse hinzu.
*/
While ((Clazz = Klassen [J]) {
If ( cur.indexOf( " " clazz " " ) < 0 ) {
cur = clazz " ";
}
}
/*
Verwenden Sie abschließend $.trim(), um die Leerzeichen an beiden Enden der Klasse „show bd1“ zu entfernen.
Überprüfen Sie, ob die Klasse des aktuellen DOM-Elements mit der gespleißten Klasse übereinstimmt. Vermeiden Sie unnötige Duplikate beim Rendern derselben Klasse.
*/
finalValue = jQuery.trim( cur );
If ( elem.className !== finalValue ) {
Zu
}
}
}
}
//Dieses jQuery-Objekt für zukünftige Kettenaufrufe zurückgeben.
gib dies zurück;
}
});
Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.
