Maison > Article > interface Web > Comment écrire du code JS de haute qualité_Connaissances de base
Je souhaite écrire une bibliothèque JavaScript efficace mais je ne sais pas par où commencer
J’ai essayé de lire les bibliothèques de classe d’autres personnes, mais il me semblait les comprendre
;Je prévois d'étudier les fonctions avancées de js, mais le contenu du livre faisant autorité est trop dispersé,
Même si je me souviens de "l'usage", je ne pense pas à la "méthode" lorsqu'il s'agit de "l'utiliser".
Peut-être que vous êtes comme moi, il semble y avoir une force invisible qui contraint nos plans, nous faisant penser à plusieurs reprises aux limites de la connaissance, nous obligeant à rester immobiles et à avoir du mal à avancer.
Pendant cette période, la pression a doublé en raison des divers devoirs, conceptions de cours et rapports expérimentaux. Il est rare de prendre un peu de temps, de ne jamais dormir, d'organiser et de résumer les livres que j'ai lus dans le passé, juste pour me rapprocher de l'écriture de ma propre bibliothèque de classe.
Cet article fait référence à "Javascript Language Essence" et "Effective JavaScript". Les exemples ont été débogués, et après les avoir compris, je souhaite simplifier un peu certains principes « profonds ».
1. Portée variable
Scope est comme de l'oxygène pour les programmeurs. Il y en a partout et souvent on n'y pense même pas. Mais lorsqu'il est pollué (par exemple en utilisant des objets globaux), on peut se sentir étouffé (par exemple l'application devient moins réactive). Les règles de portée principales de JavaScript sont simples, bien conçues et puissantes. Utiliser efficacement JavaScript nécessite de maîtriser certains concepts de base de portée variable et de comprendre certains cas extrêmes qui peuvent conduire à des problèmes insaisissables et désagréables.
1.1 Utiliser le moins possible les variables globales
Javascript facilite la création de variables dans l'espace de noms global. La création d'une variable globale se fait sans effort car elle ne nécessite aucune forme de déclaration et est automatiquement accessible par tout le code tout au long du programme.
Pour les débutants comme nous, lorsque nous rencontrons certains besoins (par exemple, les données transmises sont enregistrées, utilisées en attendant qu'une certaine fonction soit appelée à un certain moment ; ou qu'une certaine fonction est fréquemment utilisée), nous ne le faisons pas hésite à penser aux fonctions globales, ou même au langage C que j'ai appris au cours de ma première année, qui est trop profondément enraciné dans la pensée orientée processus, et le système est parfaitement plein de fonctions. La définition de variables globales pollue l'espace de noms public partagé et peut entraîner des conflits de noms inattendus. Les variables globales sont également préjudiciables à la modularité car elles conduisent à un couplage inutile entre les composants indépendants d'un programme. Sérieusement, trop de globaux (y compris des feuilles de style, définissant directement le style de div ou a) deviendront une erreur catastrophique une fois intégrés dans un processus de développement multi-personnes. C'est pourquoi tout le code de jQuery est enveloppé dans une expression anonyme qui s'exécute immédiatement - une fonction anonyme auto-appelante. Lorsque le navigateur charge le fichier jQuery, la fonction anonyme auto-appelante commence immédiatement à s'exécuter et initialise chaque module de jQuery pour éviter d'endommager et de contaminer les variables globales et d'affecter d'autres codes.
De plus, vous pensez peut-être qu'il est plus pratique « d'écrire comme vous voulez d'abord et de l'organiser plus tard », mais les bons programmeurs prêteront constamment attention à la structure du programme, continueront à classer les fonctions associées et sépareront les composants non pertinents. . et incluez ces comportements dans le cadre du processus de programmation.
Étant donné que l'espace de noms global est le seul moyen d'interagir entre les composants indépendants d'un programme JavaScript, l'utilisation de contrôles nommés globalement est inévitable. Les composants ou bibliothèques doivent définir des variables globales. pour être utilisé par d'autres parties du programme. Sinon, il vaut mieux utiliser des variables locales.
L'espace de noms global de JavaScript est également exposé à un objet global accessible dans la portée globale du programme, qui sert de valeur initiale du mot-clé this. Dans les navigateurs Web, les objets globaux sont liés à la variable globale window. Cela signifie que vous avez deux manières de créer une variable globale : la déclarer en utilisant var dans la portée globale ou l'ajouter à l'objet global. L'avantage d'utiliser la déclaration var est qu'elle peut exprimer clairement l'impact des variables globales dans la portée du programme.
Étant donné que les références à des variables globales liées peuvent provoquer des erreurs d'exécution, garder les portées claires et concises permettra aux utilisateurs de votre code de comprendre plus facilement quelles variables globales déclarent le programme.
Étant donné que l'objet global fournit un mécanisme de réponse dynamique pour l'environnement global, vous pouvez l'utiliser pour interroger un environnement en cours d'exécution et détecter quelles fonctionnalités sont disponibles sur cette plate-forme.
eg.ES5 introduit un objet JSON global pour lire et écrire des données au format JSON.
La conception originale du cours sur la structure des données simulait les opérations de base des chaînes, exigeant que les méthodes fournies par le langage lui-même ne puissent pas être utilisées. JavaScript implémente très bien les opérations de base sur les tableaux. Si c'est juste pour des besoins généraux d'apprentissage, l'idée de simuler les méthodes fournies par le langage lui-même est bonne, mais si vous investissez vraiment dans le développement, ce n'est pas nécessaire. pensez à utiliser les méthodes intégrées de JavaScript en premier lieu.
1.2 Évitez d'utiliser avec
L'instruction with fournit toute "commodité" qui rend votre application peu fiable et inefficace. Nous devons appeler une série de méthodes sur un seul objet en séquence. L'utilisation de l'instruction with peut facilement éviter les références répétées aux objets :
Au lieu d'utiliser le langage, le moyen le plus simple consiste à lier l'objet à un nom de variable court.
Dans d'autres cas, la meilleure approche consiste à lier explicitement la variable locale à la propriété appropriée.
1.3 Maîtrise des fermetures
Il existe un seul concept pour comprendre les fermetures :
a) JavaScript vous permet de référencer des variables définies en dehors de la fonction actuelle.
b) Même si la fonction externe est revenue, la fonction actuelle peut toujours référencer les variables définies dans la fonction externe
La fonction make est une fermeture, et son code fait référence à deux variables externes : magicIngredient et fill. Chaque fois que la fonction make est appelée, son code peut référencer ces deux variables car la fermeture stocke ces deux variables.
Une fonction peut référencer n'importe quelle variable dans sa portée, y compris les paramètres et les variables de fonction externes. Nous pouvons en profiter pour écrire une fonction sandwichMaker plus générale.
Les fermetures sont l’une des fonctionnalités les plus élégantes et expressives de JavaScript et sont au cœur de nombreux idiomes.
c) Les fermetures peuvent mettre à jour la valeur des variables externes. En fait, les fermetures stockent des références à des variables externes, pas des copies de leurs valeurs. Par conséquent, des mises à jour peuvent être effectuées pour toute fermeture ayant accès à ces variables externes.
Cet exemple produit un objet contenant trois fermetures. Ces trois fermetures sont des propriétés set, type et get. Elles partagent toutes l'accès à la variable val. La fermeture set met à jour la valeur de val. Appelez ensuite get et tapez pour afficher les résultats mis à jour.
1.4 Comprendre les améliorations de la déclaration des variables
Javascript prend en charge cette méthode de portée (la référence à la variable foo sera liée à la portée la plus proche de la déclaration de la variable foo), mais ne prend pas en charge la portée au niveau du bloc (la portée de la définition de la variable n'est pas la portée englobante la plus proche) ou bloc de code).
Ne pas comprendre cette fonctionnalité entraînera quelques bugs subtils :
1.5 Méfiez-vous de la portée maladroite des expressions de fonctions nommées
Ce programme semble générer null, mais il générera en fait un nouvel objet.
Étant donné que la portée de la variable de fonction nommée hérite de Object.prototype.constructor (c'est-à-dire le constructeur de Object), tout comme l'instruction with, cette portée sera affectée par le changement dynamique de Object.prototype. Le moyen d'éviter que les objets ne polluent la portée des expressions de fonction dans votre système est d'éviter d'ajouter des propriétés à Object.prototype à tout moment et d'éviter d'utiliser des variables locales portant le même nom que les propriétés Object.prototype standard.
Une autre lacune des moteurs JavaScript populaires est la promotion des déclarations d'expressions de fonctions nommées.
Certains environnements JavaScript traitent même les deux fonctions f et g comme des objets différents, ce qui entraîne une allocation de mémoire inutile.
1.6 Méfiez-vous des déclarations de portée maladroites pour les fonctions de bloc locales
Javascript n'a pas de portée au niveau du bloc, donc la portée de la fonction interne f doit être la fonction de test entière. Cela est vrai pour certains environnements JavaScript, mais toutes les implémentations JavaScript ne signalent pas ces fonctions comme des erreurs en mode strict (un programme en mode strict avec une déclaration de fonction de bloc locale le signalera comme une erreur de syntaxe). -code portable et donne une sémantique plus sensible et plus fiable aux déclarations de fonctions de bloc locales pour les futures versions de la norme. Pour cette situation, vous pouvez envisager de déclarer une variable locale dans la fonction de test pointant vers la fonction globale f.