4 Prinzipien und 5 Tipps zum Schreiben effizienter jQuery-Code_jquery

jQuery-Schreibprinzipien:

1. Verwenden Sie jQuery nicht zu häufig

1. Egal wie schnell jQuery ist, es kann nicht mit der nativen Javascript-Methode verglichen werden und das erstellte jQuery-Objekt enthält eine große Menge an Informationen. Versuchen Sie daher, die Verwendung von jQuery zu vermeiden, wenn native Methoden verwendet werden können.

Code kopieren Der Code lautet wie folgt:

$("a").click( function() {
Alert($(this).attr("id"));
});
//Verbessert↓
$("a").click(function() {
warning(this.id);
});

2. Viele jQuery-Methoden haben zwei Versionen, eine für jQuery-Objekte und die andere für jQuery-Funktionen. Da Letzteres nicht über jQuery-Objekte arbeitet, ist der Overhead relativ gering und die Geschwindigkeit höher.

Code kopieren Der Code lautet wie folgt:

var $text = $("#text ");
var $ts = $text.text();
//Verbessert↓
var $text = $("#text");
var $ts = $.text( $text );

Die integrierte Funktion „$.text()“ wird hier verwendet, und andere ähnliche Funktionen umfassen „$.data()“ usw.

2. Zwischenspeichern von jQuery-Objekten

Die Suche nach DOM-Elementen erfordert tatsächlich viel Speicheraufwand. Sie sollten den Selektor so selten wie möglich verwenden und die ausgewählten Ergebnisse so oft wie möglich zwischenspeichern, um eine wiederholte Verwendung in der Zukunft zu erleichtern. Denken Sie daran, dass derselbe Selektor nie mehr als einmal angezeigt werden darf.

Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

$(" #top") .find("p.classA");
$("#top").find("p.classB");
Verbessert↓
var zwischengespeichert = $("#top ");
cached.find("p.classA");
cached.find("p.classB");

3. Nehmen Sie weniger Änderungen an der DOM-Struktur vor

Wenn Sie die DOM-Struktur mehrmals ändern möchten, nehmen Sie zuerst den Teil heraus, den Sie ändern möchten, und setzen Sie ihn dann wieder ein, nachdem die Änderungen abgeschlossen sind. Die Grundidee hier besteht darin, im Speicher das zu erstellen, was Sie wirklich wollen, und dann am Ende den effizientesten Aktualisierungs-DOM-Vorgang durchzuführen.

Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

var top_100_list = [... ], // Hier ist ein Array von 100 Strings
$mylist = $("#mylist");
for (var i=0, l=top_100_list.length; i $mylist.append("

" top_100_list[i] "

"); // 100 DOM-Operationen
}
Nach Verbesserung↓
var top_100_list = [. ..],
$mylist = $("#mylist"),
top_100_li = ""; // Diese Variable wird verwendet, um die geänderte Zeichenfolge zu speichern
for (var i=0, l =top_100_list .length; // Es gibt nur eine DOM-Operation

4. Benennungskonventionen

JQuery-Code wird zwangsläufig mit JS-Code vermischt. Wie Sie den jQuery-Code strenger und geordneter gestalten und Ihre eigenen Benennungsregeln standardisieren können, kann den Code verbessern. Lesbarkeit.

1. Funktionsname: Funktion getResultByUserId(){..}, folgen Sie der Kamel-Benennungsmethode, wobei der erste Buchstabe in Kleinbuchstaben und der erste Buchstabe des Wortes in Großbuchstaben geschrieben werden Zweck der Methode.

kann auch so definiert werden:

Code kopieren Der Code lautet wie folgt: $.flushCartItemList = function() {

isAjaxDate = true;

}

2. Parametername: Funktionsmethode (recordIdx, recordVal){..}, dasselbe wie der Funktionsname, versuchen Sie, Abkürzungen für Parameter zu verwenden.
Namen müssen aussagekräftig sein, und die Abkürzungen einiger Attribute sind ebenfalls sehr spezifisch, wie zum Beispiel: index: idx; value: len etc...

3. Variablennamen: var user_id; var user_list_tr_1;, im Allgemeinen durch Unterstriche getrennt, gemäß den Regeln von „naming_element_index“.

Dem Variablennamen des jQuery-Objekts sollte „$“ vorangestellt werden, um das Javascript-Objekt zu unterscheiden.

jQuery-Schreibfähigkeiten:

1. Selektorauswahl

Selektoren sind die Grundlage von jQuery. Um den effizientesten Selektor auszuwählen, müssen Sie zunächst die Leistungsunterschiede verschiedener Selektoren verstehen.

①ID-Selektor und Tag-Element-Selektor: $("#ID"); $("Tag");

jQuery ruft intern automatisch die nativen Methoden des Browsers auf (getElementById();, getElementByTagName();), sodass die Ausführungsgeschwindigkeit schnell ist.

②Klassenselektor: $(".Class");

jQuery durchläuft alle DOM-Knoten, um DOM-Objekte mit class=Class zu finden, sodass die Ausführungsgeschwindigkeit langsam ist.

③Pseudoklassenselektor und Attributselektor: $(":Type"); $("[Attribute='Value']");

Da der Browser keine nativen Methoden dafür hat, sind diese beiden Selektoren am langsamsten in der Ausführung. Es ist jedoch nicht ausgeschlossen, dass einige Browser von Drittanbietern die Methoden querySelector() und querySelectorAll() hinzugefügt haben, was die Leistung dieses Selektortyps erheblich verbessern wird.

2. Kettenschreiben

　

Code kopieren Der Code lautet wie folgt:

$("div").find("h3" ).eq (2).html("Hallo");

Bei Verwendung der Kettenschreibmethode speichert jQuery die Ergebnisse jedes Schritts automatisch zwischen, was schneller ist als die Nicht-Kettenschreibmethode (manuelles Zwischenspeichern).

3. Effiziente Zirkulation

Schleifen sind immer ein zeitaufwändiger Vorgang. Die nativen Schleifenmethoden for und while von JavaScript sind schneller als „.each()“ von jQuery. Und was die for-Schleife betrifft, ist die folgende Schreibweise die effizienteste.

Code kopieren Der Code lautet wie folgt:

for (var i = 0, len = array.length ; i < len;
Deklarieren Sie zuerst die Variable und führen Sie dann die Schleifenoperation aus. Die Effizienz ist viel höher als das Durchlaufen des Arrays „for (var i in arr)“ und es ist auch effizienter als das Schleifen, um die Array-Länge „for (var i = 0; i < i )“ ist hocheffizient!

4. Saitenspleißen

String-Splicing kommt in der Entwicklung häufig vor. Die Verwendung der Methode „=" zum Spleißen von Strings ist sehr ineffizient. Wir können die Methode „.join()" des Arrays verwenden.

Code kopieren

Der Code lautet wie folgt:var array = []; for(var i = 0; i < 10000; i ){

array[i] = "";

}
document.getElementById("one").innerHTML = array.join("");

Früher habe ich gerne die native Array-Methode „.push()“ verwendet. Tatsächlich ist es schneller, arr[i] oder arr[arr.length] direkt zu verwenden, aber der Unterschied ist nicht groß.

5. Laden der Seite

Obwohl $(function(){}); tatsächlich nützlich ist, ist es abgeschlossen, nachdem alle DOM-Elemente geladen wurden. Wenn Sie feststellen, dass Ihre Seite ständig lädt, liegt dies höchstwahrscheinlich an dieser Funktion. Sie können die CPU-Auslastung beim Laden der Seite reduzieren, indem Sie eine jQuery-Funktion an das Ereignis $(window).load binden.

Code kopieren

Der Code lautet wie folgt:$(window).load(function( ){ // jQuery-Funktion wird initialisiert, nachdem die Seite vollständig geladen wurde (einschließlich aller DOM-Elemente und JS-Code });

Einige Spezialeffektfunktionen wie Drag & Drop, visuelle Effekte und Animationen, Vorladen versteckter Bilder usw. sind für diese Technologie geeignet.