Einige Tipps zum Schreiben von effizientem JSLite-Code, der JQuery_jquery imitiert

Es ist nicht ungewöhnlich, dass in Artikeln die Leistung von jQuery und Javascript thematisiert wird. Ich habe jedoch vor, Ihnen anhand einiger Geschwindigkeitstipps und Vorschläge, die andere für jQuery zusammengestellt haben, beizubringen, wie Sie Ihren JSLite- und JavaScript-Code verbessern können. Guter Code bringt Geschwindigkeitsverbesserungen. Schnelles Rendern und Reaktionsfähigkeit bedeuten eine bessere Benutzererfahrung.

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

Wenn Sie ein Javascript-Neuling sind und noch nie jQuery verwendet haben, empfehle ich Ihnen zunächst, die Syntaxeinführung des offiziellen Dokuments zu lesen. Dies ist ein hochwertiges Javascript-Tutorial, was bedeutet, dass Sie jQuery bereits verwendet haben eine Weile.

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

Cache-Variablen

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

Code kopieren Der Code lautet wie folgt:

// Ups
h = $('#element').height();
$('#element').css('height',h-20);
// Vorschlag
$element = $('#element');
h = $element.height();
$element.css('height',h-20);

Globale Variablen vermeiden

JSLite ist dasselbe wie JavaScript. Im Allgemeinen ist es am besten, sicherzustellen, dass Ihre Variablen innerhalb des Funktionsumfangs liegen.

Code kopieren Der Code lautet wie folgt:

// Ups
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
// Vorschlag
var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);

Verwenden Sie die ungarische Nomenklatur

Fügen Sie vor Variablen das Präfix $ hinzu, um JSLite-Objekte leicht zu identifizieren.

Code kopieren Der Code lautet wie folgt:

// Ups
var first = $('#first');
var second = $('#second');
var value = $first.val();
// Vorschlag – JSLite-Objekten $
voranstellen var $first = $('#first');
var $second = $('#second'),
var value = $first.val();

Var-Kette verwenden (Einzelvar-Modus)

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

Code kopieren Der Code lautet wie folgt:

var $first = $('#first'),
$second = $('#second'),
Wert = $first.val(),
k = 3,
Cookiestring = 'SOMECOOKIESPLEASE',
ich,
j,
MyArray = {};

Bitte verwenden Sie am

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

Code kopieren Der Code lautet wie folgt:

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

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

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

Optimiertes Javascript

Im Allgemeinen ist es am besten, Funktionen wann immer möglich zu kombinieren.

Code kopieren Der Code lautet wie folgt:

// Ups
$first.click(function(){
$first.css('border','1px solid red');
$first.css('color','blue');
});
// Vorschlag
$first.on('click',function(){
$first.css({
         'border':'1px solid red',
         'color':'blue'
});
});

Kettenbetrieb

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

Code kopieren Der Code lautet wie folgt:

// Ups
$second.html(Wert);
$second.on('click',function(){
alarm('Hallo alle zusammen');
});
$second.fadeIn('slow');
$second.animate({height:'120px'},500);
// Vorschlag
$second.html(Wert);
$second.on('click',function(){
alarm('Hallo alle zusammen');
}).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 es sein, dass der Code schwer zu lesen ist. Das Hinzufügen von Quetschungen und Zeilenumbrüchen kann wahre Wunder bewirken.

Code kopieren Der Code lautet wie folgt:

// Ups
$second.html(Wert);
$second.on('click',function(){
alarm('Hallo alle zusammen');
}).fadeIn('slow').animate({height:'120px'},500);
// Vorschlag
$second.html(Wert);
$second
.on('click',function(){ Alert('Hallo alle');})
.fadeIn('slow')
.animate({height:'120px'},500);

Kurzschlussauswertung auswählen

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

Code kopieren Der Code lautet wie folgt:

// Ups
Funktion initVar($myVar) {
If(!$myVar) {
          $myVar = $('#selector');
}
}
// Vorschlag
Funktion initVar($myVar) {
$myVar = $myVar ||. $('#selector');
}

Verknüpfung auswählen

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

Code kopieren Der Code lautet wie folgt:

// Ups
if(collection.length > 0){..}
// Vorschlag
if(collection.length){..}

Elemente bei schwerem Einsatz trennen

Wenn Sie vorhaben, viele Operationen an DOM-Elementen durchzuführen (mehrere Attribute oder CSS-Stile nacheinander festzulegen), empfiehlt es sich, die Elemente zuerst zu trennen und dann hinzuzufügen.

Code kopieren Der Code lautet wie folgt:

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

$element = $containerLi.first();
//... Viele komplexe Operationen
// besser
var
$container = $("#container"),
$containerLi = $container.find("li"),
$element = null;

$element = $containerLi.first().detach();
//... Viele komplexe Operationen
$container.append($element);

Gedächtnisfähigkeiten

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

Code kopieren Der Code lautet wie folgt:

// Ups
$('#id').data(key,value);
// Vorschlag (effizient)
$.data('#id',key,value);

Élément parent mis en cache à l'aide d'une sous-requête

Comme mentionné précédemment, la traversée du DOM est une opération coûteuse. Une approche typique consiste à mettre en cache les éléments parents et à réutiliser ces éléments mis en cache lors de la sélection des éléments enfants.

Copier le code Le code est le suivant :

// Oups
var
$conteneur = $('#conteneur'),
$containerLi = $('#container li'),
$containerLiSpan = $('#container li span');
// Suggestion (efficace)
var
$conteneur = $('#conteneur'),
$containerLi = $container.find('li'),
$containerLiSpan= $containerLi.find('span');

Évitez les sélecteurs universels

Mettre le sélecteur universel dans un sélecteur descendant a des performances terribles.

Copier le code Le code est le suivant :

// Oups
$('.conteneur > *');
// Suggestion
$('.container').children();

Évitez les sélecteurs universels implicites

Les sélecteurs universels sont parfois implicites et difficiles à trouver.

Copier le code Le code est le suivant :

// Oups
$('.une classe :radio');
// Suggestion
$('.someclass input:radio');

Sélecteur d'optimisation

Par exemple, le sélecteur Id doit être unique, il n'est donc pas nécessaire d'ajouter des sélecteurs supplémentaires.

Copier le code Le code est le suivant :

// Oups
$('div#monid');
$('div#footer a.myLink');
// Suggestion
$('#monid');
$('#footer .myLink');

Évitez plusieurs sélecteurs d'ID

J'insiste ici sur le fait que le sélecteur d'ID doit être unique, qu'il n'est pas nécessaire d'ajouter des sélecteurs supplémentaires et qu'il n'est pas nécessaire d'avoir plusieurs sélecteurs d'ID descendants.

Copier le code Le code est le suivant :

// Oups
$('#extérieur #intérieur');
// Suggestion
$('#intérieur');

S'en tenir à la dernière version

Les nouvelles versions sont généralement meilleures : plus légères, plus efficaces, avec plus de méthodes et une couverture plus complète des méthodes jQuery. Évidemment, vous devez considérer la compatibilité du code que vous souhaitez prendre en charge. Par exemple, le projet fonctionne-t-il avec un bon support pour HTML5/CSS3

Combinez le code natif JSLite et javascript si nécessaire

Comme mentionné ci-dessus, JSLite est javascript, ce qui signifie que tout ce que vous pouvez faire avec JSLite peut également l'être avec du code natif. Le code natif peut ne pas être aussi lisible et maintenable que JSLite, et le code peut être plus long. Mais cela signifie aussi plus efficace (généralement plus le code sous-jacent est proche, moins il est lisible, plus les performances sont élevées, par exemple : l'assemblage, qui nécessite bien sûr des personnes plus puissantes). Gardez à l'esprit qu'aucun framework ne peut être plus petit, plus léger et plus efficace que le code natif (remarque : le lien de test n'est plus valide, vous pouvez rechercher le code de test en ligne).

Conseil final

Enfin, j'enregistre cet article dans le but d'améliorer les performances de JSLite et quelques autres bonnes suggestions. Si vous souhaitez approfondir ce sujet, vous y trouverez beaucoup de plaisir. N'oubliez pas que JSLite n'est pas obligatoire, juste une option. Réfléchissez à la raison pour laquelle vous souhaitez l'utiliser. Manipulation du DOM ? ajax ? pochoir? des animations CSS ? Ou un sélecteur ? Développeur jQuery lourd ?