Conventions de dénomination Javascript


12

Je viens de Java et je suis nouveau sur JavaScript. J'ai remarqué de nombreuses méthodes JavaScript utilisant des noms de paramètres à caractère unique, comme dans l'exemple suivant.

doSomething(a,b,c)

Je n'aime pas ça, mais un collègue développeur JavaScript m'a convaincu que cela est fait pour réduire la taille du fichier, notant que les fichiers JavaScript doivent être transférés vers le navigateur.

Ensuite, je me suis retrouvé à parler à un autre développeur. Il m'a montré comment Firefox tronquera les noms de variables pour charger la page plus rapidement. Est-ce une pratique standard pour les navigateurs Web?

Quelles sont les meilleures pratiques de conversion de noms à suivre lors de la programmation en JavaScript? La longueur de l'identifiant est-elle importante et, dans l'affirmative, dans quelle mesure?


13
Je doute fortement que les navigateurs changent les noms des variables. En présence de eval, ce n'est pas sûr (oui, evalc'est horrible, mais cela fait partie de la norme et vous ne jetez pas la compilance standard pour une optimisation) et cela n'aide pas du tout à réduire le trafic - vous le feriez toujours envoyer le dossier complet.

4
J'ai souvent vu des développeurs se disputer sur les avantages des noms de variables courts. Ne les écoute pas. C'est presque toujours une excuse pour "je suis trop petit pour inventer un bon nom" ou "je suis trop paresseux pour taper autant de caractères".
Doc Brown

@DocBrown: Même moi, je ne l'aimais pas. Étant donné que je ne suis pas un expert en JavaScript, je voulais connaître les meilleures pratiques.
ManuPK

À la fin de la journée, parliez-vous peut-être de 50 à 100 Ko de données supplémentaires afin d'utiliser des noms de méthode significatifs? Si 100 Ko provoquent un problème de vitesse, cela ne vaut pas la peine d'essayer de le résoudre, car un nombre d'utilisateurs assez faible ne rencontrera pas ce problème.
Ramhound

Réponses:


26

Vous constaterez que les développeurs eux-mêmes n'utilisent pas de noms de variables courts. Lors du développement, ils utilisent des noms de variables significatifs et détaillés.

Ensuite , dans le processus de génération / publication, le code qu'ils ont écrit est exécuté à travers un minifieur / obfuscateur dans le but de minimiser la taille du fichier, comme meilleure pratique pour accélérer un site Web. Ceci est une option pas si vous vous souciez que beaucoup au sujet de la performance. La plupart des petits sites Web ne le font pas.

En tant que développeur, vous ne devriez pas vous soucier du processus de minification / obscurcissement; écrivez votre code afin qu'il soit lisible, significatif, bien documenté et bien structuré. Ensuite, si vous vous souciez tant des performances (facultatif, n'oubliez pas!), Introduisez un minifieur / obfuscateur dans votre processus de publication pour minimiser le code (supprimer les espaces blancs, les nouvelles lignes, les commentaires, etc.) et pour les obscurcir (par exemple, raccourcir la variable des noms). Un bon article qui explique l'obscurcissement vs la minification peut être trouvé ici .

De plus, Desktop FireFox ne tronquera pas la période des noms de variables . La troncature des noms de variables est là pour accélérer le téléchargement des pages. Au moment où FireFox obtient le fichier, il a déjà été téléchargé, il n'est donc pas nécessaire de le faire. Votre ami peut exécuter un plugin qui fait cela; dans ce cas, dites-lui de le désinstaller, car c'est inutile.

Pour terminer, certains navigateurs (mobiles) ont la possibilité d'utiliser des serveurs intermédiaires, qui interceptent les réponses des ressources que vous avez demandées, et les compressent pour vous (ce qui pourrait inclure la minification de fichiers JavaScript). Notez que la compression est effectuée sur le serveur (c'est-à-dire avant d'avoir téléchargé la page), d'où l'avantage potentiel de télécharger un fichier plus petit, plutôt que dans le navigateur une fois que vous avez déjà téléchargé le fichier (comme suggéré dans la question). Ces navigateurs mobiles incluent Opera Mini et les versions plus récentes de Google Chrome (sur iOS au moins; je ne suis pas sûr d'Android). Pour plus d'informations, voir ici .


11

Non, tous les navigateurs ne raccourciront pas automatiquement le JavaScript pour améliorer les performances.

Cependant, dans le cas de JavaScript, vous ne devez pas sacrifier la lisibilité / maintenabilité du code pour des gains de vitesse de traitement ou de sécurité car il existe des outils appelés obfuscateurs et d'autres outils appelés shinkers (ou compresseurs) qui ont été conçus à cet effet.

N'oubliez pas, ne pré-optimisez pas. Si votre page se charge assez rapidement et que vous n'avez pas de contenu trop sensible dans votre JavaScript, ne vous en faites pas. Nommez vos variables avec des noms significatifs. La lisibilité du code est très importante pour la maintenabilité et devrait rarement, voire jamais, être sacrifiée.

Si vous souhaitez une référence à quelques bonnes conventions de codage JavaScript, je recommande d' utiliser ceux - ci .


2

Ne vous inquiétez pas de la taille du fichier prématurément. Bien que ce soit toujours une préoccupation, la lisibilité et la maintenabilité sont plus importantes.

Cela dit, vous devriez probablement utiliser les versions minifiées (par exemple, via YUI Compressor ) de vos scripts de toute façon.

Si vous êtes intéressé par les meilleures pratiques pour le développement Web en général, je vous suggère de lire Qu'est-ce que chaque programmeur doit savoir sur le développement Web?


1

J'ai travaillé en JavaScript pendant très longtemps.

Nous avions une norme de dénomination que vous deviez utiliser la notation hongroise pour toutes les variables.

Cela semblait bien fonctionner. Je sais qu'il y a des cas contre l'utilisation de cela, mais cela a bien fonctionné pour nous. Surtout lorsque vous avez des fichiers JavaScript massifs où vous devez trouver des trucs.

Je mets en garde contre une optimisation prématurée. Vous êtes très susceptible de vous retrouver avec du code en désordre qui ne fonctionne pas vraiment beaucoup plus rapidement.


5
Notation hongroise? C'est la vieille école. La notation hongroise est une ancienne relique de développement et, avec le temps, elle n'est plus recommandée.
Smokefoot

2
J'ai tendance à l'utiliser un peu, mais uniquement pour les valeurs enveloppées par jquery, celles que je vais commencer par un $. Le problème avec la notation hongroise est que les gens vous disaient de taper en "int" vs "String" et non en termes de sémantique d'un programme
Zachary K

"Surtout quand vous avez des fichiers JavaScript massifs où vous devez trouver des trucs." -- Je t'entends. Mais la notation hongroise n'est qu'un plâtre collant ... cela n'aidera pas à long terme, cela ne fera que confondre lorsque vous devez changer le type de quelque chose mais n'avez pas le temps de changer tous les préfixes de variable. Automatiser tout cela est là où GWT entre dans sa propre OMI.
funkybro

1
Je n'achète pas nécessairement en utilisant la notation comme "cassant" les aspects vaguement typés de la langue. Bien sûr, vous devrez changer le nom lorsque vous changez de type, mais ce serait quand même une bonne chose à faire pour pouvoir suivre ce que vous faites. Je sais que certains aspects sont laids. Mais, si vous avez déjà travaillé dans un projet LARGE (je parle de centaines de milliers de lignes de code) dans un langage peu typé, cela peut vous aider à trouver votre chemin plus rapidement dans certains cas. Dire qu'il est daté, etc. ne résout vraiment pas le problème principal que le PO tentait de résoudre.
Alan Delimon

1
La notation hongroise est l'une de ces choses que les gens rejettent immédiatement sans vraiment comprendre pourquoi. On a trouvé que c'était bien dans la même catégorie que gotolorsque les gens répètent sans réfléchir le mantra «n'utilisez pas goto ... n'utilisez pas goto ...» . La réalité est que ce n'est qu'un outil dans votre boîte à outils. Comme tout outil, il a des situations où il est utile et des situations où il n'est pas si utile (ou même nuisible). C'est comme si quelqu'un avait eu une mauvaise expérience en essayant de scier un morceau de bois avec un marteau, puis a proclamé: «N'utilisez jamais de marteaux, scie beaucoup mieux! . Les généralisations
rapides

1

La longueur de l'identifiant n'a pas d'importance. Comme d'autres l'ont dit, en production, la minification peut être utilisée pour réduire le temps de téléchargement des scripts. En fait, une convention de codage / dénomination acceptable doit être suivie, en particulier parce que JavaScript est un langage original et pendant si longtemps, JavaScript a été négligé comme une simple chose pour faire le travail. Si vous recherchez un lieu pour la convention de dénomination, le guide de style Google JavaScript est un bon endroit. Ça suggère,

  • functionNamesLikeThis, par exemple, getCashbackData () {}
  • variableNamesLikeThis, par exemple, var alertInterval = 10;
  • ClassNamesLikeThis, par exemple, var CustomerOrder = {getOrderLines: function () {}}
  • EnumNamesLikeThis, par exemple, var ColorOfChoice = {White: "#FFFFFF"}
  • methodNamesLikeThis, par exemple, var CustomerOrder = {getOrderLine: function () {}}
  • SYMBOLIC_CONSTANTS_LIKE_THIS, par exemple, var EPOCH_UNIX = "01011970"

Avez-vous quelque chose de plus à ajouter alors un tas de liens? Je veux dire que vous n'expliquez même pas qui est Douglas Crockford.
Ramhound

0

Furieux par la philosophie du "développeur de code propre" (et étant donné que vous savez maintenant des messages ci-dessus qu'avec la réduction de la taille de vos noms de variable, cela n'aura aucun impact sur les performances), je ne peux que conseiller:

  1. Trouvez le meilleur IDE pour vos besoins de développement personnel qui possède des fonctionnalités d'auto-complétion et d'intellisense décentes, telles qu'aptana, netbeans, eclipse (tous gratuits) ou l'un des nombreux produits commerciaux (si j'avais un jeu gratuit, je regarder dans les produits JetBrains)
  2. Écrivez votre code d'une manière qui rend tout commentaire superflu. Cela signifie, au lieu d'écrire

    getXy(e) { return [e.pageX, e.pageY ] }

    ce qui pourrait signifier vraiment n'importe quoi (surtout dans un langage fou typé lâche comme js;) vous faites s'exprimer le code

    getPageCoordinatesFromEvent(event) { 
        return [event.pageX, event.pageY ];
    }

    Dans un bon IDE, vous ne tapez généralement jamais de nom de variable aussi long - deux fois que vous tapez quelques lettres et appuyez simplement sur Entrée à partir de la saisie semi-automatique. Si vous insistez pour taper chaque caractère vous-même, un bon IDE vous remarquera quand même une faute de frappe. Ceci est juste un exemple très superficiel, donc je suggère fortement (non pas comme une forme de critique mais comme une recommandation honnête) que vous

  3. Obtenez les livres "Clean Code" de Robert C.Martin et ou "Pragmatic Programmer" de Hunt / Thomas et ne vous posez plus jamais ce genre de questions - vous serez beaucoup trop occupé à travailler sur un serveur d'intégration continue pour automatiser le test ennuyeux -, & construisez des parties du processus de développement (y compris la minification) et concentrez-vous sur la partie amusante, en écrivant du code clairement compréhensible qui fait du bon travail!

PS Si vous avez besoin de vous familiariser avec le développement de code javascript à la pointe de la technologie, jetez un œil au livre de John "Mr. jQuery" Resig sur les "Techniques Javascript Pro" juste après ou avec ce qui précède.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.