So nutzen Sie JQuery effizient

Als Programmierer werden Sie auf jeden Fall jQuery und Javascript verwenden. Wenn wir also ein gutes Programm entwickeln wollen, wie können wir jQuery und Javascript effizienter nutzen, um Ihren jQuery- und Javascript-Code zu verbessern? Guter Code führt zu Geschwindigkeitsverbesserungen und schnelles Rendern und Ansprechen bedeuten eine bessere Benutzererfahrung. Der Inhalt dieses Abschnitts besteht darin, Ihnen die effiziente Nutzung von jQuery und Javascript näher zu bringen.

Bedenken Sie zunächst, dass es sich bei jQuery um Javascript handelt. Das bedeutet, dass wir die gleichen Codierungskonventionen, Styleguides und Best Practices übernehmen sollten.

Wenn Sie ein Javascript-Neuling sind, empfehle ich Ihnen zunächst, „24 JavaScript-Best Practices für Anfänger“ zu lesen. Es ist am besten, es zu lesen, bevor Sie mit jQuery beginnen.

Wenn Sie bereit sind, jQuery zu verwenden, empfehle ich Ihnen dringend, diese Richtlinien zu befolgen:

1. Cache-Variablen

DOM-Durchquerung ist teuer, also versuchen Sie, Elemente wiederherzustellen so viel wie möglich zwischenspeichern.

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

2. Vermeiden Sie globale Variablen

jQuery Wie bei Javascript ist es 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);

3. 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();

4. Verwenden Sie die Var-Kette (Einzelvar-Modus)

Kombinieren Sie mehrere Var-Anweisungen in einer Anweisung.

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

5. 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 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');})

6. Javascript vereinfachen

Im Allgemeinen ist es am besten, Funktionen so weit wie möglich 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'    });});

7. Verkettete Operationen

Es ist für jQuery sehr einfach, verkettete Operationen von Methoden 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);

8. Achten Sie auf die Lesbarkeit des Codes

Zusammen mit der Optimierung des Codes und der Verwendung von Verkettungen kann dies 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);

9. Kurzschlussauswertung auswählen

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

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

10. 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){..}

11. Trennen Sie Elemente bei umfangreichen Vorgängen

Wenn Sie viele Vorgänge an DOM-Elementen durchführen möchten (kontinuierliches Festlegen mehrerer Attribute oder CSS-Stile), wird empfohlen, diese zu trennen Elemente zuerst und fügen Sie sie dann hinzu.

//糟糕var     $container=$("#container"),    $containerLi=$("#container li"),    $element=null;
$element=$containerLi.first(); //... 许多复杂的操作
//建议var     $container=$("#container"),    $containerLi=$container.find("li"),    $element=null;
$element=$containerLi.first().detach(); //... 许多复杂的操作
$container.append($element);

12. Merken Sie sich Tipps

Es kann sein, dass es Ihnen an Erfahrung in der Verwendung von Methoden mangelt. Möglicherweise gibt es eine bessere oder schnellere Möglichkeit, diese zu verwenden.

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

13. Übergeordnete Elemente mithilfe von Unterabfragen zwischenspeichern

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');

14. Vermeiden Sie universelle Selektoren

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

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

15. Vermeiden Sie implizite Universalselektoren

Universelle Selektoren sind manchmal implizit und schwer zu finden.

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

16. 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');

17. Vermeiden Sie mehrere ID-Selektoren

Es wird hier betont, dass der ID-Selektor eindeutig sein sollte, es keine Notwendigkeit gibt, zusätzliche Selektoren hinzuzufügen und es keine Notwendigkeit für mehrere Nachkommen gibt ID-Auswahl.

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

18. Bleiben Sie bei der neuesten Version

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

19. Veraltete Methoden aufgeben

Es ist sehr wichtig, bei jeder neuen Version auf veraltete 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或许更合适

20. Verwenden Sie 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.)

21. Kombinieren Sie bei Bedarf jQuery und Javascript-nativen 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 weniger lesbar und wartbar als 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 zu nutzen und (wenn möglich) nativen Code zu verwenden, der jQuery entspricht.

Der Zweck dieses Artikels besteht darin, die Leistung von jQuery zu verbessern und einige andere gute Vorschläge zu machen. Wer tiefer in dieses Thema eintauchen möchte, wird viel Spaß haben. Denken Sie daran, dass jQuery nicht erforderlich ist, sondern nur eine Option. Überlegen Sie, warum Sie es verwenden möchten. DOM-Manipulation? Ajax? Schablone? CSS-Animation? Oder eine Selector-Engine? Vielleicht wäre ein Javascript-Mikroframework oder eine benutzerdefinierte Version von jQuery die bessere Wahl.

Das Obige zeigt, wie man jQuery und Javascript effizient nutzt. Nachdem ich diesen Artikel gelesen habe, hoffe ich, dass er für die Entwicklung aller hilfreich sein wird.

Verwandte Empfehlungen:

Was ist der Unterschied zwischen JS und JQUERY

Methoden, die an $, jQuery im JQ-Quellcode gebunden sind

Beispielcode für die JQuery-Formularvalidierung

Das obige ist der detaillierte Inhalt vonSo nutzen Sie JQuery effizient. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!