Résumé des techniques d'écriture pour améliorer l'efficacité du code jQuery

Cache les variables

La traversée du DOM coûte cher, alors essayez de mettre en cache les éléments réutilisés.

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

Évitez les variables globales

Avec jQuery, comme JavaScript, en général, il est préférable de s'assurer que vos variables sont dans la portée de la fonction.

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

Utilisez la nomenclature hongroise

pour préfixer la variable avec $ afin d'identifier facilement l'objet jQuery.

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

Utiliser la chaîne Var (mode Var unique)

Combinez plusieurs instructions var en une seule instruction. Je recommande de mettre les variables non attribuées à la fin.

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

Veuillez utiliser 'On'

Dans la nouvelle version de jQuery, le plus court on("click") est utilisé pour remplacer des fonctions comme click() . Dans les versions précédentes, on() était bind(). Depuis la version 1.7 de jQuery, on() est la méthode préférée pour attacher des gestionnaires d'événements. Cependant, par souci de cohérence, vous pouvez simplement utiliser la méthode on() ensemble.

// 糟糕$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');
})

Rationaliser le javascript

En général, il est préférable de combiner les fonctions autant que possible.

// 糟糕$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'});
});

Opérations chaînées

Il est très simple d'implémenter des opérations chaînées de méthodes dans jQuery. Profitez-en ci-dessous.

// 糟糕$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);

Maintenir la lisibilité du code

En plus de rationaliser le code et d'utiliser le chaînage, cela peut rendre le code difficile à lire. L’ajout de pincements et de sauts de ligne peut faire des merveilles.

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

Sélectionner l'évaluation de court-circuit

L'évaluation de court-circuit est une expression qui est évaluée de gauche à droite, en utilisant && (ET logique) ou || ( OU logique).

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

Choisissez des raccourcis

Une façon de rationaliser votre code est de profiter des raccourcis de codage.

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

Séparer des éléments lors d'opérations lourdes

Si vous envisagez de faire beaucoup d'opérations sur des éléments DOM (définir plusieurs attributs ou styles CSS successivement), cela il est recommandé de les séparer d'abord. L'élément est ensuite ajouté.

// 糟糕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);

Conseils de mémoire

Vous manquez peut-être d'expérience dans l'utilisation des méthodes dans jQuery, assurez-vous de consulter la documentation, il peut y avoir une méthode meilleure ou plus rapide pour l'utiliser.

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

Mettre en cache l'élément parent à 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.

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

Évitez les sélecteurs universels

Placer des sélecteurs universels dans des sélecteurs descendants a des performances terribles.

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

Évitez les sélecteurs universels implicites

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

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

Optimiser les sélecteurs

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

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

Évitez plusieurs sélecteurs d'ID

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

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

S'en tenir à la dernière version

Les versions plus récentes sont généralement meilleures : plus légères et plus efficaces. Évidemment, vous devez considérer la compatibilité du code que vous souhaitez prendre en charge. Par exemple, la version 2.0 ne prend pas en charge IE 6/7/8.

Abandonner les méthodes obsolètes

Il est très important de faire attention aux méthodes obsolètes à chaque nouvelle version et d'essayer d'éviter d'utiliser ces méthodes.

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

Utilisation du CDN

Le CND de Google peut garantir que le cache le plus proche de l'utilisateur est sélectionné et répond rapidement. (Veuillez rechercher l'adresse vous-même lorsque vous utilisez Google CND. L'adresse ici ne peut pas être utilisée. Nous recommandons le CDN fourni par le site officiel de jquery).

Combinez jQuery et le code natif javascript si nécessaire

Comme mentionné ci-dessus, jQuery est javascript, ce qui signifie que tout ce que vous pouvez faire avec jQuery peut également l'être avec du code natif. Le code natif (ou vanilla) peut ne pas être aussi lisible et maintenable que jQuery, et le code est 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, bien sûr, cela nécessite 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).

Compte tenu des différences de performances entre vanilla et jQuery, je recommande fortement d'absorber le meilleur des deux mondes et d'utiliser (si possible) du code natif équivalent à jQuery.

Principes d'écriture de JQuery :

1. N'abusez pas de jQuery

1 Peu importe la rapidité de jQuery, il ne peut pas être comparé à la méthode javascript native et à la méthode javascript native. Les objets jQuery intégrés contiennent une énorme quantité d'informations. Par conséquent, lorsqu’il existe des méthodes natives pouvant être utilisées, essayez d’éviter d’utiliser jQuery.

2. De nombreuses méthodes jQuery ont deux versions, une pour les objets jQuery et une autre pour les fonctions jQuery. Étant donné que ce dernier ne fonctionne pas via des objets jQuery, il nécessite relativement moins de temps système et est plus rapide.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!