Partage d'expérience et de conseils pour éviter l'exécution répétée de code dans JavaScript_javascript tips

J'aime aller sur certains grands sites Web et parcourir leur code d'origine, dans l'espoir de trouver des modèles pouvant être appliqués à mon propre code, ou de découvrir des outils et des techniques dont je n'ai jamais entendu parler auparavant. Cependant, lorsque je regarde le code source de ces grands sites Web, je trouve souvent un problème, c'est-à-dire une exécution répétée de code et des applications fonctionnelles répétées. Vous trouverez ci-dessous quelques problèmes rencontrés lors de la visualisation de leur code source. Je les partage avec vous, en espérant que vous pourrez écrire du code JavaScript de manière plus concise et efficace.
Éléments de collection en double

Le problème le plus courant que je vois dans leur code JavaScript est celui des éléments de collection en double. Bien que la vitesse d'exécution du moteur de sélection jQuery ou querySelectorAll soit très rapide, le travail répété prendra plus de temps et de ressources. Ce problème est très simple, et la solution est la suivante :

Copiez le code Le code est le suivant :

//
$$(".items").addClass("hide");
// ... et plus tard...
$$(".items") .removeClass("hide") ;

//
var items = $$(".items");
// ... Utilisez cette variable de référence à partir de maintenant

Oui Nous condamnons les programmeurs qui écrivent du code répétitif chaque jour, mais nous devons encore le renforcer. Bien sûr, certaines actions répétées sont inévitables (comme le chargement de la page par Ajax), mais dans ces situations, il est préférable d'utiliser des proxys d'événements au lieu d'extraire directement le contenu.
Évaluations conditionnelles en double

Les évaluations conditionnelles en double sont courantes, mais il existe généralement un modèle général pour les éviter. Vous verrez peut-être un morceau de code écrit comme ceci :

Copiez le code Le code est le suivant :

var performMiracle = function() {
// Si le navigateur prend en charge la fonctionnalité A...
if(features.someFeature) {

}
// ... Si il ne prend pas en charge
else {

}
}

Cela fonctionne, mais ce n'est pas le code le plus efficace, la condition ci-dessus peut être évaluée plusieurs fois. Il vaudrait mieux l'écrire ainsi :

Copiez le code Le code est le suivant :

var performMiracle =features .someFeature ? function() {
// Plan A stuff
} : function() {
// Plan B stuff
}

Il n'y a qu'une seule condition, Et lorsque le calcul conditionnel est terminé, la méthode ou la variable a été renvoyée en conséquence !
Création d'objets en double

Par rapport aux opérations répétées, la création répétée d'objets est plus difficile à détecter et se manifeste généralement dans des expressions régulières. Jetez un oeil au code ci-dessous :

Copiez le code Le code est le suivant :

function cleanText(dirty ) {
// Supprimer les balises SCRIPT
clean = dirty.replace(/]*>([sS]*?)/gi, "");

// Faites un peu plus de nettoyage, peut-être des espaces, etc.

return clean
}

Le code ci-dessus sera créé à plusieurs reprises. un nouvel (mais le même) objet d'expression régulière. Dans ce cas, si vous créez cet objet en dehors de cette fonction, vous pouvez éviter cette situation :

Copier le code Le code est le suivant :

var scriptRegex = /]*>([sS]*?)function cleanText(dirty) {
// Supprimez les balises SCRIPT
clean = dirty.replace(scriptRegex, "");// Faites un peu plus de nettoyage, peut-être des espaces. , etc.

return clean;
}


Dans l'exemple ci-dessus, l'objet d'expression régulière n'est créé qu'une seule fois, mais utilisé plusieurs fois - économisez beaucoup de traitement CPU .

Ce ne sont là que quelques-uns des exemples que je vois souvent de problèmes répétés écrits par d'autres programmeurs. Trouvez-vous également cela ?