Tipps zum Schreiben von besserem jQuery-Code

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, „Best Practices für JavaScript-Anfänger“ zu lesen. Es ist am besten, es zu lesen, bevor Sie jQuery kontaktieren.

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

Variablen zwischenspeichern

DOM-Durchquerung 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

und fügen Sie das Präfix $ vor der Variablen hinzu, 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 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);

Behalten Sie die Lesbarkeit des Codes bei

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

Kurzschlussauswertung auswählen

Die Kurzschlussauswertung ist ein Ausdruck, der von links nach rechts mithilfe der Operatoren && (logisches UND) oder || (logisches ODER) ausgewertet wird .

// 糟糕
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 umfangreichen Vorgängen trennen

Wenn Sie viele Vorgänge an DOM-Elementen durchführen möchten (mehrere Attribute oder CSS-Stile nacheinander festlegen), empfiehlt es sich, die Elemente zu trennen zuerst und fügen Sie sie dann hinzu.

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

Kennen Sie die Tipps

Möglicherweise sind Sie mit der Verwendung von Methoden in jQuery unerfahren. Schauen Sie sich unbedingt die Dokumentation an. Möglicherweise gibt es eine bessere oder schnellere Möglichkeit, sie zu verwenden.

// 糟糕
$('#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 untergeordnete Selektoren 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

Zum Beispiel 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, dass der ID-Selektor eindeutig sein sollte, es keine Notwendigkeit gibt, zusätzliche Selektoren hinzuzufügen und es keine Notwendigkeit für mehrere Nachkommen-ID-Selektoren gibt.

// 糟糕
$('#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或许更合适

Mit 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: Assembler, was natürlich leistungsfähigere Leute erfordert). 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.