JavaScript n'a pas de guide de style de codage faisant autorité, mais il s'agit plutôt de styles de codage populaires:
La copie de code est la suivante:
Guide de style JavaScript de Google (ci-après dénommé Google)
http://google-tyleguide.googlecode.com/svn/trunk/javascriptguide.xml
Style de codage NPM (ci-après dénommé NPM)
https://npmjs.org/doc/coding-style.html
Guide de style Node.js de Felix (ci-après dénommé node.js)
http://nodeguide.com/style.html
JavaScript idiomatique (ci-après dénommé idiomatique)
https://github.com/rwldrn/iiomatic.js/
Guide de style javascript jQuery (ci-après dénommé jQuery)
http://contribute.jquery.org/style-guide/js/
Guide de style JavaScript de Douglas Crockford (ci-après dénommé Crockford), Douglas Crockford est l'une des autorités techniques les plus connues dans le domaine du développement Web et membre du Comité de normalisation de l'ECMA Javascript 2.0
http://javascript.crockford.com/code.html
Bien sûr, il existe également des choix de paramètres par défaut dans les dames de syntaxe JavaScript JSlint et Jshint. La question est de savoir quel est le style de codage JavaScript ultime que la plupart des développeurs peuvent suivre? Faisons quelques styles de consensus de ces 6 guides de style ci-dessous.
1. Comparaison du style de code
1.1 Indentation
Deux espaces, plus d'indentation, pas d'onglet Indentation: Google, NPM, Node.js, idiomatique
Ongle d'onglet: jQuery
4 espaces: Crockford
1.2 Espaces entre les paramètres et les expressions
Utilisez des styles compacts: Google, NPM, Node.js
Copiez le code comme suit: project.myclass = fonction (arg1, arg2) {
Trop d'utilisation des espaces: idiomatique, jQuery
Copiez le code comme suit: pour (i = 0; i <longueur; i ++) {
Pas de commentaires: Crockford
Dans la plupart des guides, il est rappelé aux développeurs de ne pas avoir d'espaces à la fin d'une déclaration.
1.3 Longueur de ligne de code
Jusqu'à 80 caractères: Google, NPM, Node.js, Crockford (lorsqu'il est dans un bloc de code, d'autres retraits, sauf que 2 espaces permettent aux paramètres de fonction d'être alignés sur la position du premier paramètre de fonction. Une autre option consiste à utiliser 4 espaces pour envelopper la ligne au lieu de 2.)
Pas de commentaires: jQuery, idiomatique
1,4 semi-colon
Utilisez toujours des demi-colons, sans compter sur des inserts implicites: Google, Node.js, Crockford
N'utilisez pas d'attente: NPM dans certains cas
Pas de commentaires: jQuery, idiomatique
1.5 commentaires
Suivez les conventions JSDOC: Google, idiomatique
Pas de commentaires: NPM, Node.js, jQuery, Crockford
1.6 Citations
Quotes uniques recommandées: Google, Node.js
Citations doubles: jQuery
Pas de commentaires: NPM, idiomatique, Crockford
1.7 Déclaration variable
En déclarer un à la fois sans utiliser de virgules: node.js
La copie de code est la suivante:
var foo = ”;
var bar = ”;
Déclarez plusieurs fois, utilisez des virgules pour se séparer à la fin de la ligne: idiomatique, jQuery
La copie de code est la suivante:
var foo = "",
bar = "",
quux;
Utilisez la virgule au début de la ligne: NPM
Pas de commentaires: Google, Crockford
1,8 accolades
Utilisez les accolades d'ouverture sur la même ligne: Google, NPM, Node.js, idiomatique, jQuery, Crockford
Copiez le code comme suit: fonction thisIsblock () {
Le guide NPM indique qui n'utilise que des accolades lorsque le bloc de code doit inclure la ligne suivante, sinon elle ne sera pas utilisée.
1.9 Variables globales
N'utilisez pas les variables globales: Google, Crockford (Google dit que les conflits de dénomination des variables globales sont difficiles à déboguer et peuvent avoir des problèmes délicats lorsque deux projets sont intégrés. Pour faciliter le partage du code JavaScript commun, les conventions doivent être faites pour éviter les conflits. Crockford pense que les variables mondiales implicites ne doivent pas être utilisées.)
Pas de commentaires: idiomatique, jQuery, npm, node.js
2 style de dénomination
2.1 dénomination variable
Le premier mot au début est minuscule, et la première lettre de tous les mots par la suite est en majuscule: Google, NPM, Node.js, idiomatique
La copie de code est la suivante:
var foo = "";
var fooname = "";
2.2 dénomination constante
Utilisez des lettres majuscules: Google, NPM, Node.js
La copie de code est la suivante: var contre = 'valeur';
Pas de commentaires: jQuery, idiomatique, Crockford
2.3 NAMING DE FONCTION
Le premier mot au début est minuscule, et la première lettre de tous les mots par la suite est en majuscule (camel): google, npm, idiomatique, node.js (il est recommandé d'utiliser des noms de fonction descriptifs longs))
La copie de code est la suivante:
fonction à très bien operationName
fonction short () ..
Numérotation de la fonction sous forme de mots clés:
La copie de code est la suivante:
fonction isReady ()
fonction setName ()
fonction getName ()
Pas de commentaires: JQuery, Crockford
2.4 dénomination du tableau
Utiliser la forme plurielle: idiomatique
La copie de code est la suivante: var documents = [];
Pas de commentaires: Google, JQuery, NPM, Node.js, Crockford
2.5 NAMING ET CLASS
Utilisez les formulaires suivants: Google, NPM, Node.js
La copie de code est la suivante:
var thisIsObject = nouvelle date;
Pas de commentaires: jQuery, idiomatique, Crockford
2.6 Autre dénomination
Utilisez la case All-Lower-Hyphen-CSS pour les noms longs de fichiers et les touches de configuration: NPM
3. Configurez le fichier .jshintrc en fonction du style ci-dessus
Jshint (http://www.jshint.com/) est un outil de vérification de syntaxe et de style JavaScript que vous pouvez utiliser pour rappeler les problèmes liés au style de code. Il peut être bien intégré dans de nombreux éditeurs couramment utilisés et est un excellent outil pour unifier les styles de codage de l'équipe.
Vous pouvez consulter les options disponibles via la documentation Jshint: http://www.jshint.com/docs/#options
Ce qui suit consiste à créer un fichier .jshintrc basé sur le premier style dans chacune des catégories ci-dessus. Vous pouvez le mettre dans le répertoire racine du projet, et l'éditeur de code Jshint-Avare unifiera tous les styles de code du projet en fonction de lui.
La copie de code est la suivante:
{
"CamelCase": vrai,
"indent": 2,
"undef": vrai,
"quotmark": célibataire,
"Maxlen": 80,
"traînage": vrai,
"Curly": vrai
}
De plus, vous devez ajouter l'en-tête suivant à votre fichier JavaScript:
La copie de code est la suivante:
/ * Browser jshint: true, jQuery: true * /
Dans le fichier node.js, vous devez ajouter:
La copie de code est la suivante:
/ * nœud jshint: true * /
Vous pouvez également ajouter l'instruction suivante dans divers fichiers JavaScript:
La copie de code est la suivante:
«utiliser strict»;
Cela affectera Jshint et votre moteur JavaScript et peut ne pas être aussi compatible, mais JavaScript fonctionnera plus rapidement.
4. Exécuter automatiquement Jshint avant de commettre Git
Si vous souhaitez vous assurer que tout le code JS est cohérent avec le style défini dans .jshintrc, vous pouvez ajouter ce qui suit à votre fichier .git / hooks / pré-engagement, et la vérification du style sera automatiquement effectuée lorsque vous essayez de soumettre des fichiers nouvellement modifiés au projet.
La copie de code est la suivante:
#! / bin / bash
# Pré-engagement GIT Hook pour exécuter Jshint sur les fichiers JavaScript.
#
# Si vous devez absolument vous engager sans tester,
# Utilisation: Git Commit --no-Verify
fileNames = ($ (git diff - cache - name-nom uniquement)))
qui jshint &> / dev / null
Si [$? -ne 0];
Alors
Echo "Erreur: Jshint n'est pas trouvé"
Echo "Installer avec: sudo npm install -g jshint"
sortie 1
FI
pour je dans "$ {nom de fichiers [@]}"
faire
si [[$ i = ~ /.js$]];
Alors
echo jshint $ i
jshint $ i
Si [$? -ne 0];
Alors
sortie 1
FI
FI
fait