Spécifications ...LOGIN

Spécifications du code JavaScript

Tous les projets JavaScript appliquent les mêmes spécifications.


Spécifications du code JavaScript

Les spécifications du code incluent généralement les aspects suivants :

  • Règles de dénomination des variables et des fonctions

  • Règles d'utilisation des espaces, de l'indentation et des commentaires.

  • Autres spécifications couramment utilisées...

Le code standard peut être plus facile à lire et à maintenir.

Les spécifications du code sont généralement stipulées avant le développement et peuvent être négociées et définies avec les membres de votre équipe.


Nom de la variable

Il est recommandé d'utiliser camelCase pour les noms de variables :

firstName = "John";
lastName = "Doe";

prix = 19,90;
taxe = 0,20;

fullPrice = prix + ( prix * taxe);


Espace et opérateur

Opérateur habituel ( = + - * / ) Vous devez ajouter des espaces avant et après :

var x = y + z;
var valeurs = ["Volvo", "Saab", "Fiat"];


Indentation du code

Habituellement, 4 espaces sont utilisés pour indenter les blocs de code :

Fonction :

fonction toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}

La touche TAB n'est pas recommandée pour mettre en retrait, car différents éditeurs interprètent différemment la touche TAB.


Règles de déclaration

Règles générales pour les déclarations simples :

  • Une déclaration généralement Terminez par un symbole.


var valeurs = ["Volvo", "Saab", "Fiat"];

var personne = {
prénom : "John",
nom de famille : "Doe",
âge : 50,
couleur des yeux : "bleu"
};

Règles générales pour les déclarations complexes :

  • Mettez l'accolade ouvrante à la fin de la première ligne.

  • Ajoutez un espace avant l'accolade gauche.

  • Mettez l'accolade fermante sur sa propre ligne.

  • Ne terminez pas une instruction complexe par un point-virgule.


Fonction :

fonction toCelsius(fahrenheit) {
retour (5/9) * (fahrenheit - 32);
}

Boucle :

pour (i = 0; i < 5; i++) {
x += i;
}

Condition Déclaration :

if (heure < 20) {
salutation = "Bonne journée";
} else {
salutation = "Bonsoir" ;
}


Règles d'objet

Règles de définition d'objet :

  • Mettez l'accolade ouvrante sur la même ligne que le nom de la classe.

  • Il y a un espace entre les deux points et la valeur de l'attribut.

  • Utilisez des guillemets doubles pour les chaînes, mais pas pour les nombres.

  • N'ajoutez pas de virgule après la dernière paire attribut-valeur.

  • Mettez l'accolade droite sur sa propre ligne et terminez-la par un symbole.


var personne = {
prénom : "John",
nom de famille : "Doe",
âge : 50,
eyeColor: "blue"
};

Le code objet court peut être écrit directement sur une seule ligne :

var person = { firstName : "John", lastName : "Doe", age:50, eyeColor:"blue"};


Moins de 80 caractères par ligne de code

Afin de faciliter la lecture, il est recommandé d'avoir moins de 80 caractères par ligne.

Si une instruction JavaScript dépasse 80 caractères, il est recommandé de couper la ligne après l'opérateur ou la virgule.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1>我的 Web 页面</h1>
<p>
建议在运算符或者逗号后换行。
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
    "Hello php.";
</script>
</body>
</html>

Exécutez le programme et essayez-le


Règles de dénomination

Généralement, les règles de dénomination de nombreux langages de code sont similaires, par exemple :

  • Les variables et les fonctions sont camelCase (camelCase)

  • Les variables globales sont en majuscules (MAJUSCULES)

  • Les constantes (telles que PI) sont en majuscules (MAJUSCULES)

Utilisez-vous ces règles pour nommer des variables ? :hyp-hens, camelCase ou under_scores ?

Le caractère Handbar (-) pour HTML et CSS :

Les attributs HTML5 peuvent be data - (par exemple : data-quantité, data-price) comme préfixe.

CSS utilise - pour concaténer les noms de propriétés (font-size).

Remarque : - est généralement considéré comme une soustraction en JavaScript, son utilisation n'est donc pas autorisée.

Souligné :

De nombreux programmeurs préfèrent utiliser des traits de soulignement (tels que : date_of_birth), en particulier dans les bases de données SQL.

Le langage PHP utilise généralement des traits de soulignement.

PascalCase :

PascalCase est plus courant en langage C.

Cas Camel :

Le cas Camel est généralement recommandé en JavaScript, et jQuery et d'autres bibliothèques JavaScript utilisent le cas Camel.

Remarque : Ne commencez pas les noms de variables par $ car cela entrerait en conflit avec de nombreuses bibliothèques JavaScript.


HTML charge les fichiers JavaScript externes

Charge les fichiers JavaScript en utilisant un format concis (l'attribut type n'est pas obligatoire) :

<script src="myscript.js">


Utilisez JavaScript pour accéder aux éléments HTML

Un HTML mal formaté peut provoquer des erreurs d'exécution de JavaScript.

Les deux instructions JavaScript suivantes produiront des résultats différents :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="Demo">段落 1。</p>
<p id="demo">段落 2。</p>
<script>
// 只有段落 2 会被替换
document.getElementById("demo").innerHTML = "HELLO.";
</script>
</body>
</html>

Exécutez le programme et essayez-le


Astuce : Essayez d'utiliser le mêmes règles de dénomination HTML et JavaScript.


L'extension de fichier

Le suffixe du fichier HTML peut être .html (ou r .htm).

Le suffixe du fichier CSS est .css.

Le suffixe du fichier JavaScript est .js .


Utilisez des noms de fichiers en minuscules

La plupart des serveurs Web (Apache, Unix) sont sensibles à la casse : london.jpg n'est pas accessible via London.jpg.

Les autres serveurs Web (Microsoft, IIS) ne sont pas sensibles à la casse : london.jpg est accessible sous London.jpg ou london.jpg.

Vous devez conserver un style cohérent et nous vous recommandons d'utiliser systématiquement les noms de fichiers en minuscules.


section suivante
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1>我的 Web 页面</h1> <p> 建议在运算符或者逗号后换行。 </p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello php."; </script> </body> </html>
soumettreRéinitialiser le code
chapitredidacticiel