Share
En tant qu'éditeur de Nettuts +, je peux réviser beaucoup de code à partir de tutoriels. Malgré le fait que jQuery soit disponible depuis des années, il y a toujours une erreur fréquente que je vois plus que toute autre chose.
Considérez le bit de code suivant:
Accentsconagua
$ ('. nav a'). click (function () $ (this) .hide (); $ (this) .css ('color', 'red'); $ (this) .show (); alert ('quelque chose d'autre'); $ (this) .hide (); return false;); Le code ci-dessus est trop compliqué pour diverses raisons. Ne vous inquiétez pas de ce que le code fait réellement (c'est du charabia). Au lieu de cela, je veux que vous regardiez toutes ces références à $ (ceci).
Pensez au DOM comme une piscine.
Pensez au DOM comme une piscine. Tu te souviens quand tu étais enfant et que tu plongeais dans la piscine pour chercher des pièces, alors que tes parents agissaient comme s'ils regardaient? Ce sera notre comparaison dans le monde réel.
Chaque fois que vous utilisez $ ('. uneClasse'), jQuery saute dans le pool (DOM) et recherche cette pièce (ou nœuds). Donc, lorsque vous faites référence à plusieurs fois dans une fonction, cela fait beaucoup de plongée. Ou, pour couper la comparaison du monde réel, c'est un gaspillage et inutile. Pourquoi faire appel à jQuery si vous n'en avez pas besoin? Vous devriez effectuer ce que nous appelons? La mise en cache.?
$ ('. nav a'). click (fonction (e) var ancre = $ (ceci); ancre .hide () .css ('couleur', 'rouge') .show (); alert ('autre chose '); anchor.hide (); e.preventDefault ();); C'est beaucoup plus propre. Bien que les moteurs de navigateur modernes soient incroyablement rapides de nos jours et compensent au mieux vos problèmes de codage, vous devez néanmoins vous efforcer d’écrire du code efficace et de ne pas gaspiller toute cette énergie à sauter dans la piscine. Maintenant, techniquement, si vous passez jQuery à un nœud DOM, comme ce, il ne re-interroge pas le DOM. Il retourne simplement un objet jQuery.
Juste parce que la différence de performance entre les deux sera franchement négligeable, nous écrivons du code en clair pour nous-mêmes.
Prenons un exemple un peu plus compliqué: les onglets.
$ ('. tabs li'). css ('position', 'relative'); $ ('. tabs li'). click (function () $ ('. tabs li'). removeClass ('active'); $ (this) .addClass ('active'); $ (this) .load ( 'someHref', function () ); // exemple $ (this) .css ('top', '1px');); Ce code est partout. C'est moche et inefficace. La solution numéro un est de se débarrasser de tout ce CSS. Vous ne placeriez le style dans votre JavaScript que si les valeurs ont été créées dynamiquement. Par exemple, si vous devez calculer l’emplacement précis d’un élément à l’écran, vous pouvez utiliser .css ('left', calculéeValue). Dans ce cas, tout peut être exporté vers une feuille de style externe. Cela nous laisse avec:
$ ('. tabs li'). click (function () $ ('. tabs li'). removeClass ('active'); $ (this) .load ('someHref', function () ); / / exemple $ (this) .addClass ('active');); Ensuite, encore une fois, pourquoi continuons-nous à interroger le DOM pour .onglets li et $ (ceci)? Arrêtez de sauter dans la piscine. Cachons l'emplacement de .onglets li.
var tabs = $ ('. tabs li'); tabs.click (function () tabs.removeClass ('active'); $ (this) .load ('uneHref', function () ); // exemple $ (this) .addClass ('active'); ); Mieux, mais nous appelons toujours $ (ceci) deux fois, ce qui n'est pas très grave. Mais, d’après mes expériences, si vous ne l’étouffez pas trop tôt, ce nombre augmente rapidement..
var tabs = $ ('. tabs li'); tabs.click (function () var tab = $ (this); tabs.removeClass ('active'); tab.addClass ('active') .load ('someHref', function () ); exemple ); Une autre option (légèrement moins optimisée) consisterait à utiliser le filtrage.
var tabs = $ ('. tabs li'); tabs.click (function () tabs.removeClass ('active') .filter (this) .addClass ('active') .load ('someHref', function () ); exemple //); La différence dans ce cas, est que, plutôt que de faire référence à $ (ceci), nous utilisons le filtre() méthode pour réduire la collection d'éléments de la liste à celle sur laquelle l'utilisateur a cliqué.
Oui, le monde ne finira pas si vous référencez $ ('. tabs) plusieurs fois dans une fonction. Les moteurs JavaScript sont très rapides ces jours-ci. Si vous testiez les performances des milliers de fois, la différence d'exécution pourrait être de quelques centaines de millisecondes. Mais toujours, la question reste: pourquoi voudriez-vous?
Parfois, lorsque nous utilisons des abstractions massives comme jQuery, il est facile d’oublier que $ ('. tabs') est une fonction qui exécute un bon morceau de code. Il convient également de noter que ces concepts s’appliquent à JavaScript en général - pas seulement à jQuery..
Utilisez le mise en cache techniques décrites ci-dessus pour écrire du code plus propre? pour toi.
