Zusammenfassung der Schreibtechniken zur Verbesserung der Effizienz von jQuery-Code

Cache-Variablen

DOM-Traversierung ist teuer, also versuchen Sie, wiederverwendete Elemente zwischenzuspeichern.

// 糟糕h = $('#element').height();
$('#element').css('height',h-20);// 建议$element = $('#element');
h = $element.height();
$element.css('height',h-20);

Vermeiden Sie globale Variablen

Bei jQuery ist es wie bei JavaScript im Allgemeinen am besten, sicherzustellen, dass Ihre Variablen innerhalb des Funktionsumfangs liegen.

// 糟糕$element = $('#element');
h = $element.height();
$element.css('height',h-20);// 建议var $element = $('#element');var h = $element.height();
$element.css('height',h-20);

Verwenden Sie die ungarische Nomenklatur

, um der Variablen $ voranzustellen, um das jQuery-Objekt leicht zu identifizieren.

// 糟糕var first = $('#first');var second = $('#second');var value = $first.val();// 建议 - 在jQuery对象前加$前缀var $first = $('#first');var $second = $('#second'),var value = $first.val();

Var-Kette verwenden (Einzel-Var-Modus)

Kombinieren Sie mehrere Var-Anweisungen in einer Anweisung. Ich empfehle, nicht zugewiesene Variablen am Ende einzufügen.

var
  $first = $('#first'),
  $second = $('#second'),
  value = $first.val(),
  k = 3,
  cookiestring = 'SOMECOOKIESPLEASE',
  i,
  j,
  myArray = {};

Bitte verwenden Sie „On“

In der neuen Version von jQuery wird das kürzere on("click") verwendet, um Funktionen wie click() zu ersetzen . In früheren Versionen war on() bind(). Seit jQuery Version 1.7 ist on() die bevorzugte Methode zum Anhängen von Event-Handlern. Aus Gründen der Konsistenz können Sie jedoch einfach die gesamte on()-Methode verwenden.

// 糟糕$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});

$first.hover(function(){
    $first.css('border','1px solid red');
})// 建议$first.on('click',function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
})

$first.on('hover',function(){
    $first.css('border','1px solid red');
})

Javascript optimieren

Im Allgemeinen ist es am besten, Funktionen nach Möglichkeit zu kombinieren.

// 糟糕$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});// 建议$first.on('click',function(){
    $first.css({'border':'1px solid red','color':'blue'});
});

Verkettete Operationen

Es ist sehr einfach, verkettete Operationen von Methoden in jQuery zu implementieren. Nutzen Sie dies unten.

// 糟糕$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
});
$second.fadeIn('slow');
$second.animate({height:'120px'},500);// 建议$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);

Aufrechterhaltung der Lesbarkeit des Codes

Zusammen mit der Optimierung des Codes und der Verwendung von Verkettungen kann es dazu führen, dass der Code schwer lesbar ist. Das Hinzufügen von Quetschungen und Zeilenumbrüchen kann wahre Wunder bewirken.

$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);// 建议$second.html(value);
$second
    .on('click',function(){ alert('hello everybody');})
    .fadeIn('slow')
    .animate({height:'120px'},500);

Kurzschlussauswertung auswählen

Kurzschlussauswertung ist ein Ausdruck, der von links nach rechts mit && (logisches UND) oder || ausgewertet wird (Logischer ODER)-Operator.

// 糟糕function initVar($myVar) {if(!$myVar) {
        $myVar = $('#selector');
    }
}// 建议function initVar($myVar) {
    $myVar = $myVar || $('#selector');
}

Wählen Sie Verknüpfungen

Eine Möglichkeit, Ihren Code zu optimieren, besteht darin, Codierungsverknüpfungen zu nutzen.

// 糟糕if(collection.length > 0){..}// 建议if(collection.length){..}

Elemente bei schweren Vorgängen trennen

Wenn Sie vorhaben, viele Vorgänge an DOM-Elementen durchzuführen (mehrere Attribute oder CSS-Stile nacheinander festzulegen), sollten Sie dies tun Es wird empfohlen, sie zuerst zu trennen. Anschließend wird das Element hinzugefügt.

// 糟糕var$container = $("#container"),
    $containerLi = $("#container li"),
    $element = null;

$element = $containerLi.first();//... 许多复杂的操作// bettervar$container = $("#container"),
    $containerLi = $container.find("li"),
    $element = null;

$element = $containerLi.first().detach();//... 许多复杂的操作$container.append($element);

Speichertipps

Möglicherweise fehlt Ihnen die Erfahrung in der Verwendung von Methoden in jQuery. Schauen Sie sich unbedingt die Dokumentation an. Möglicherweise gibt es eine bessere oder schnellere Methode um es zu benutzen.

// 糟糕$('#id').data(key,value);// 建议 (高效)$.data('#id',key,value);

Zwischenspeichern des übergeordneten Elements mithilfe einer Unterabfrage

Wie bereits erwähnt, ist die DOM-Durchquerung ein teurer Vorgang. Ein typischer Ansatz besteht darin, übergeordnete Elemente zwischenzuspeichern und diese zwischengespeicherten Elemente bei der Auswahl untergeordneter Elemente wiederzuverwenden.

// 糟糕var$container = $('#container'),
    $containerLi = $('#container li'),
    $containerLiSpan = $('#container li span');// 建议 (高效)var$container = $('#container '),
    $containerLi = $container.find('li'),
    $containerLiSpan= $containerLi.find('span');

Vermeiden Sie universelle Selektoren

Das Einfügen universeller Selektoren in Nachkommenselektoren hat eine schreckliche Leistung.

// 糟糕$('.container > *');// 建议$('.container').children();

Vermeiden Sie implizite Universalselektoren

Universelle Selektoren sind manchmal implizit und schwer zu erkennen.

// 糟糕$('.someclass :radio');// 建议$('.someclass input:radio');

Selektoren optimieren

Beispielsweise sollte der Id-Selektor eindeutig sein, sodass keine Notwendigkeit besteht, zusätzliche Selektoren hinzuzufügen.

// 糟糕$('div#myid');
$('div#footer a.myLink');// 建议$('#myid');
$('#footer .myLink');

Vermeiden Sie mehrere ID-Selektoren

Ich betone hier, dass der ID-Selektor eindeutig sein sollte und es nicht erforderlich ist, zusätzliche Selektoren hinzuzufügen, geschweige denn mehrere Nachkommen ID-Selektoren.

// 糟糕$('#outer #inner');// 建议$('#inner');

Bleiben Sie bei der neuesten Version

Neuere Versionen sind normalerweise besser: leichter und effizienter. Natürlich müssen Sie die Kompatibilität des Codes berücksichtigen, den Sie unterstützen möchten. Version 2.0 unterstützt beispielsweise IE 6/7/8 nicht.

Veraltete Methoden aufgeben

Es ist sehr wichtig, bei jeder neuen Version auf die veralteten Methoden zu achten und zu versuchen, die Verwendung dieser Methoden zu vermeiden.

// 糟糕 - live 已经废弃$('#stuff').live('click', function() {
  console.log('hooray');
});// 建议$('#stuff').on('click', function() {
  console.log('hooray');
});// 注：此处可能不当，应为live能实现实时绑定，delegate或许更合适

Verwendung von CDN

Googles CND kann sicherstellen, dass der Cache ausgewählt wird, der dem Benutzer am nächsten liegt, und schnell reagiert. (Bitte suchen Sie die Adresse selbst, wenn Sie Google CND verwenden. Die Adresse hier kann nicht verwendet werden. Wir empfehlen das CDN, das von der offiziellen Website von jquery bereitgestellt wird.)

Kombinieren Sie bei Bedarf jQuery und nativen Javascript-Code

Wie oben erwähnt, ist jQuery Javascript, was bedeutet, dass alles, was Sie mit jQuery tun können, auch mit nativem Code erledigt werden kann. Nativer Code (oder Vanilla) ist möglicherweise nicht so lesbar und wartbar wie jQuery und der Code ist länger. Aber es bedeutet auch effizienter (normalerweise gilt: Je näher am zugrunde liegenden Code, desto weniger lesbar, desto höher die Leistung, zum Beispiel erfordert die Montage natürlich leistungsfähigere Personen). Bedenken Sie, dass kein Framework kleiner, leichter und effizienter sein kann als nativer Code (Hinweis: Der Testlink ist nicht mehr gültig, Sie können online nach dem Testcode suchen).

Angesichts der Leistungsunterschiede zwischen Vanilla und jQuery empfehle ich dringend, das Beste aus beiden Welten zu nutzen und (wenn möglich) nativen Code zu verwenden, der jQuery entspricht.

JQuery-Schreibprinzipien:

1. Verwenden Sie jQuery nicht zu oft.

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

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.

Das obige ist der detaillierte Inhalt vonZusammenfassung der Schreibtechniken zur Verbesserung der Effizienz von jQuery-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!