Comment écrire du Javascript de haute qualité

Question

Je suis en train d'apprendre le Javascript pour compléter ASP.NET. J'ai une solide expérience en programmation générale et j'ai toujours été partisan de pratiques disciplinées et d'une bonne hygiène pour réduire le nombre d'erreurs dans le code.

Cependant, le langage qu'est Javascript semble rendre cela très difficile. Sa nature dynamique et interprétée semble pousser la détection des erreurs au dernier point possible du cycle. Par exemple, les erreurs de syntaxe peuvent être détectées aussi tard que le moment où le code est effectivement exécuté, plutôt qu'avant son exécution comme ce serait le cas dans un langage plus statique. De la même manière, le système de type logiciel est un champ de mines d'erreurs potentielles cachées. Bien que vous puissiez représenter des modèles de conception orientés objet dans le langage, il semble presque qu'ils aient fait en sorte qu'il soit aussi difficile que possible de le faire avec peu de support syntaxique.

Ceci est aggravé par le fait que Javascript semble attirer un état d'esprit négligé, et beaucoup de programmeurs débutants qui confondent conscision et intelligence avec qualité (et je ne fais pas référence au code minimisé, mais à des exemples de programmation putativement bonne). J'ai parfois l'impression de lire les inscriptions au concours de C obfusqué.

Bien sûr, je reconnais également que Javascript possède de nombreux atouts qui le rendent puissant et extensible. Certaines techniques fonctionnelles fluides, comme celles de Jquery par exemple, sont très attrayantes.

Je suppose que ma question est donc la suivante : comment écrire un javascript de qualité ? Quels outils, pratiques, idiomes, bibliothèques de débogage et de journalisation, etc., intégrez-vous pour réduire le nombre de bogues dans vos applications javascript ? Existe-t-il des sites web ou des groupes de discussion qui se concentrent sur le javascript sans bogues plutôt que sur de jolis trucs de programmation ?

Answer 1

• Apprendre de penser de manière fonctionnelle ( parce que c'est là que se trouve le pouvoir )
• Utilisez le Les bons côtés ( pour bien dormir )
• Utilisez Jslint ( pour valider )
• Évitez le reniflage du navigateur et utilisez détection de caractéristiques à la place ( parce que les navigateurs mentent )
• Gardez le portée mondiale claire ( pour éviter les collisions )
• Espace de nommage votre code ( pour éviter les collisions )
• Ne pas toucher aux objets hôtes ( parce qu'on ne peut pas leur faire confiance )
• Pensez à ES5 Strict mode ( parce que c'est l'avenir )
• Suivez les Blogueurs les mieux notés ( parce qu'ils connaissent des "trucs" )

Bonus : éviter les écueils

Gotchas

• utiliser for in pour les tableaux (utiliser une boucle simple, car les propriétés des tableaux peuvent interférer)
• s'appuie sur undefined global, qui peut être modifié (utilisez typeof à la place ou définissez votre propre type)
• ne pas utiliser var pour les variables locales
• en utilisant plus d'un var pour la même variable (peut être déroutant, source d'erreurs)
• vérifier "if (somevar)" pour voir s'il est défini, alors que somevar peut être 0, faux, ou "" (chaîne vide)
• polluer la portée globale (collisions possibles)
• l'utilisation abusive des closures et les fuites de mémoire (release event listeners !)
• utilisation du reniflage du navigateur (utilisez plutôt la détection des caractéristiques)
• l'augmentation des objets hôtes (ne faites pas ça, on ne peut pas leur faire confiance)
• l'augmentation excessive des objets natifs (n'importe qui peut écraser vos fonctions)
• ne pas utiliser les fonctions intégrées (apprenez la langue !)
• en oubliant d'utiliser nouveau pour les fonctions constucteur (convention : majuscule à la première lettre)
• dactylographier/voir nouveau et se dire : "Je connais ce truc de quelque part (ce n'est pas Java)".
• initialiser inconsciemment des variables à null (ce n'est pas non plus du C/C++)
• ne pas réaliser que les fonctions sont des objets (oui, elles peuvent avoir des propriétés)
• trop de confiance dans l'arithmétique à virgule flottante (vérification : 0,1 + 0,2 == 0,3)
• ne pas comprendre la différence entre == et === (le dernier est sans danger, utilisez == si vous le connaissez bien).
• ne pas se rendre compte que les arguments sont passés par référence (sauf les types primitifs)
• modifier le tableau des arguments
• en s'appuyant sur l'insertion de points-virgules

Apprenez la langue. Faites toujours les choses pour une raison. Si vous n'êtes pas sûr d'une chose, allez lire la spécification .

Answer 2

Mon approche :

• ne pas traiter le langage comme un langage OO basé sur des classes
• explorer les traits fonctionnels (vous pouvez décharger beaucoup d'opérations primitives dans des fonctions prêtes à l'emploi)
• ne pas confondre la langue avec l'environnement du navigateur
• écrire des tests unitaires

Par exemple, les erreurs de syntaxe peuvent être détectées jusqu'au moment où le code est effectivement exécuté, plutôt qu'avant son exécution comme ce serait le cas dans un langage plus statique.

C'est ce qu'on attend d'un langage sans compilation séparée. Rien ne vous empêche d'utiliser un programme de type lint.

Answer 3

Normalement, je ne fais pas cela, mais comme la question a une portée assez large, je vais recommander quelques livres :

Javascript, the Definitive Guide, 5e édition
Javascript, les bonnes parties

J'imagine qu'après avoir lu ces deux ouvrages, vous aurez une très bonne connaissance des meilleures pratiques.

Je ne sais pas trop quoi vous dire à propos des débutants et des programmeurs négligents. Vous ne pouvez que vous contrôler. Vous pourriez essayer de leur recommander ces deux livres.

Answer 4

• Erreurs de syntaxe : Code dans un seul fichier Javascript ou <script> ne sera pas exécutée si elle contient des erreurs de syntaxe. D'autres sources de Javascript seront toujours exécutées, mais c'est le comportement attendu d'un langage interprété dont le code source est chargé sur un réseau à forte latence. Attendre que le moindre morceau de code soit en mémoire serait un gaspillage. Cependant, la plupart des navigateurs ne semblent signaler que la première erreur de syntaxe trouvée (je ne sais pas si c'est normal pour les langages interprétés) dans une même source script.

• Système de type souple : Assurez-vous juste d'utiliser === et !== pour les comparaisons. Comme pour beaucoup d'autres choses en JS, ce n'est un champ de mines que si vous le laissez devenir un.

• OOP : Javascript N'EST PAS (!==) basé sur les classes. "Sortir de son chemin" serait d'ajouter une syntaxe pour les constructions de classes traditionnelles qui ne correspondent pas à un modèle d'objet basé sur des prototypes. Il est vraiment important d'aborder Javascript avec un état d'esprit différent de celui de nombreux autres langages populaires. Si vous venez de Lisp, vous vous sentirez comme chez vous. Il existe beaucoup de documentation sur la façon de réaliser des choses comme les variables/méthodes privées/privilégiées/statiques en JS. Presque tout ceci implique Pantalons, Fonctions comme objets de première classe, et Portée (peut-être les trois mots-clés les plus importants en Javascript). Prenez un peu de temps en amont pour vraiment comprendre ces aspects de Javascript plutôt que de simplement copier du code. Expérimentez également, utilisez la console de Firebug pour créer des exemples de code dont le comportement peut vous dérouter. Une fois que vous aurez compris le pourquoi et le comment des techniques Javascript avancées, vous n'aurez plus l'impression de faire des pieds et des mains pour imiter certaines techniques OOP basées sur des classes. De plus, vous réaliserez que ces techniques ne sont pas toujours la meilleure solution et trouverez de meilleures méthodes qui tirent parti de la flexibilité de Javascript.

  Cette page est une bonne introduction à Javascript et à ses méthodes : http://www.crockford.com/javascript/javascript.html

• Un état d'esprit négligé : Javascript ne vous forcera pas, ni même ne vous incitera à utiliser les bonnes pratiques. Telles sont les conséquences d'un langage qui est à la fois extrêmement flexible et extrêmement indulgent. Acceptez-le. Utilisez ensuite des outils comme jslint pour contrôler votre code, surtout au début. En fin de compte, la meilleure façon d'éviter cet état d'esprit négligé est encore de comprendre le langage. Par exemple, de nombreux codeurs PHP arrivant en Javascript ont fini par traiter les tableaux de ce langage comme les tableaux associatifs de PHP. Dans certains cas, cette mauvaise pratique a fonctionné sans problème, et bien sûr, aucun interpréteur JS n'a émis le moindre avertissement à ce sujet. Mais si vous comprenez les différences entre les propriétés d'un objet et les index d'un tableau en Javascript, vous ne ferez probablement pas cette erreur car vous connaîtrez les problèmes potentiels qui peuvent en résulter.

  Le paradoxe de Javascript est que, par sa nature même, il vous invite à vous lancer dans l'élaboration d'un code superficiellement procédural, tout en exigeant une compréhension fondamentale de la programmation fonctionnelle et des objets basés sur des prototypes pour l'utiliser correctement et exploiter tout son potentiel.

  N'oubliez pas non plus que cette compréhension est tout aussi essentielle lorsque vous utilisez des bibliothèques comme jQuery.

Donc en résumé, comment écrire du Javascript de qualité ? En comprenant fondamentalement comment le langage fonctionne. Ce n'est pas difficile, bien que cela puisse être intimidant car c'est différent . Lisez sur, et expérimentez avec Clous, portée et fonctions en tant qu'objets . Apprendre Javascript, c'est un peu comme apprendre à conduire une voiture à boîte manuelle. Une fois que vous Allez-y. vous verrez que vous l'apprécierez et que vous apprécierez le haut niveau de contrôle qu'il procure, même s'il peut parfois s'avérer pénible.

Quelles sont les pratiques à utiliser ? Une fois que vous aurez compris le langage, vous le saurez déjà.

Des outils pour le débogage ? Eh bien, c'est assez simple, utilisez Firebug. Et pour les tests de compatibilité, utilisez la console intégrée à tous les principaux navigateurs, même IE. Utilisez également n'importe quel éditeur de texte/IDE avec lequel vous êtes à l'aise. J'aime utiliser Vim, mais ce n'est que moi.

Answer 5

Je veux juste ajouter mes deux cents. Ne le combattez pas. . Javascript est un très beau langage, mais les gens (moi y compris) l'abordent initialement avec une vision "similaire à...", et essaient d'y imposer des concepts et des modèles trouvés dans d'autres langages.

J'avais l'habitude de détester JavaScript, mais après un certain temps, j'ai amélioré mes compétences et appris à apprécier le langage pour ce qu'il est, sans essayer de forcer un style de programmation non naturel importé d'une langue étrangère. Ne vous fiez pas aux "bonnes parties" de Crockford comme à un mantra. Son point de vue est, à mon avis, excessif car il essaie de forcer javascript à adopter des conceptions non naturelles et éventuellement complexes empruntées à d'autres langages, en particulier lorsqu'il s'agit de l'héritage des classes et de l'"abus" des fermetures pour obtenir des résultats que le langage ne fournit pas (comme les variables privées).

Cela prend un peu de temps, mais une fois que vous avez compris le fonctionnement de javascript, il apparaît comme un langage agréable à apprendre et à utiliser.