Conseils destinés aux débutants : ne plongez pas trop profondément dans jQuery

En tant qu'éditeur pour Nettuts+, je peux réviser beaucoup de code dans les tutoriels soumis. Même si jQuery existe depuis de nombreuses années, il y a une erreur courante que je vois encore le plus souvent.

---

Exemple #1

Considérez le code suivant :

$('.nav a').click(function() {
  $(this).hide();
  $(this).css('color', 'red');
  $(this).show();

  alert('something else');

  $(this).hide();

  return false;
});

Le code ci-dessus est trop complexe pour plusieurs raisons. Ne vous inquiétez pas de ce que fait réellement le code (c'est du charabia). Au lieu de cela, je veux que vous regardiez toutes les références à $(this).

Pensez au DOM comme à une piscine.

Pensez au DOM comme à une piscine. Vous vous souvenez quand vous étiez enfant et que vous sautiez dans la piscine à la recherche de pièces de monnaie pendant que vos parents faisaient comme s'ils vous regardaient ? Ce sera notre comparaison dans le monde réel.

Chaque fois que $('.someClass') est utilisé, jQuery sautera dans le pool (DOM) et recherchera cette pièce (ou nœud). Ainsi, lorsque vous le référencez plusieurs fois dans une fonction, vous aurez besoin de beaucoup de plongée. Ou, d’après une comparaison avec le monde réel, inutile et inutile. Pourquoi appeler jQuery si ce n'est pas nécessaire ? Vous devriez faire ce que nous appelons la « mise en cache ».

$('.nav a').click(function(e) {
   var anchor = $(this);

   anchor
      .hide()
     .css('color', 'red')
     .show();

   alert('something else');

   anchor.hide();

   e.preventDefault();

});

C'est beaucoup plus propre de cette façon. Même si les moteurs de navigation modernes sont désormais incroyablement rapides et feront de leur mieux pour compenser votre mauvais codage, vous devez toujours vous efforcer d’écrire un code efficace et éviter de gaspiller toute votre énergie à sauter dans la piscine. Maintenant, techniquement parlant, si vous transmettez à jQuery un nœud DOM, comme this, il ne réinterrogera pas le DOM. Il renvoie simplement un objet jQuery.

Honnêtement, puisque la différence de performances entre les deux est négligeable, nous écrivons nous-mêmes du code propre.

Exemple 2

Prenons un exemple un peu plus complexe : les onglets.

$('.tabs li').css('position', 'relative');

$('.tabs li').click(function() {
   $('.tabs li').removeClass('active');
   $(this).addClass('active');
   $(this).load('someHref', function() {} ); // example
   $(this).css('top', '1px');
});

Ce code est partout. C'est moche et inefficace. La première solution consiste à supprimer tous les CSS. Les styles ne peuvent être placés en JavaScript que si la valeur est créée dynamiquement. Par exemple, si vous devez calculer la position précise d'un élément sur l'écran, vous pouvez utiliser .css('left',calculatedValue). Dans ce cas, vous pouvez exporter le tout vers une feuille de style externe. Cela nous laisse avec :

$('.tabs li').click(function() {
   $('.tabs li').removeClass('active');
   $(this).load('someHref', function() {} ); // example
   $(this).addClass('active');
});

Ensuite, pourquoi continuons-nous à interroger le DOM pour .tabs li et .tabs li 和 $(this)？别再在泳池里跳了。让我们“缓存” .tabs li ? Arrêtez de sauter dans la piscine. "Mettons en cache" l'emplacement de .tabs li.

var tabs = $('.tabs li');

tabs.click(function() {
   tabs.removeClass('active');
   $(this).load('someHref', function() {} ); // example
   $(this).addClass('active');
});

c'est mieux, mais on appelle quand même $(this) deux fois, ce n'est pas grave. Cependant, d’après mon expérience, si ce problème n’est pas étouffé tôt dans l’œuf, ce nombre peut rapidement augmenter.

var tabs = $('.tabs li');

tabs.click(function() {
   var tab = $(this);
   tabs.removeClass('active');
   tab.addClass('active')
     .load('someHref', function() {} ); // example
});

Filtre

Une autre option (moins optimisée) consiste à utiliser le filtrage.

var tabs = $('.tabs li');

tabs.click(function() {
   tabs.removeClass('active')
       .filter(this)
       .addClass('active')
       .load('someHref', function() {} ); // example
});

La différence dans cet exemple est qu'au lieu de référencer $(this)，而是使用 filter(), nous utilisons la méthode filter() pour réduire la collection d'éléments de la liste aux seuls éléments cliqués.

---

Que devez-vous prendre

Oui, le monde ne s'arrête pas si vous référencez $('.tabs) plusieurs fois dans une fonction. Les moteurs JavaScript sont très rapides de nos jours. Si vous deviez tester les performances de cette opération des milliers de fois, la différence d'exécution pourrait être de quelques centaines de millisecondes. Mais la question demeure : pourquoi feriez-vous cela ?

Parfois, lorsque nous travaillons avec de nombreuses abstractions comme jQuery, il est facile d'oublier que $('.tabs') est une véritable fonction qui exécute beaucoup de code. Il convient également de noter que ces concepts s'appliquent à JavaScript en général, et pas seulement à jQuery.

Écrivez-vous un code plus propre en utilisant les caching techniques ci-dessus.

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!