Spécification
Il s'agit de la norme d'écriture de code suivie et acceptée par l'équipe de développement front-end, qui vise à améliorer la standardisation et la maintenabilité du code.
Principes de base
Respecter les standards du Web, le HTML sémantique, la séparation de la structure, des performances et du comportement et une excellente compatibilité. En termes de performances des pages, le code doit être concis, clair et ordonné, pour réduire au maximum la charge du serveur et assurer le bon fonctionnement du serveur. vitesse d'analyse la plus rapide.
spécification générale
1. Ignorer (Omettre) le protocole : tel que background : url(http://www.google.com/images/example) Vous devez écrire background : url(//www.google.com/images/example); faciliter http Switch avec le protocole https sauf si un certain protocole doit être utilisé
2. Utilisez l'IDE pour obtenir une indentation claire lors de l'écriture. La touche de tabulation est remplacée par quatre espaces.
Étant donné que les outils d'édition des différents systèmes interprètent les onglets différemment, la touche de tabulation sous Windows occupe quatre espaces, tandis que sous Linux, elle occupe huit espaces (sauf si vous définissez vous-même l'occupation de la touche de tabulation. longueur de position).
Par exemple, un texte sublime, vous pouvez définir la touche de tabulation dans cet outil.
3. Utilisez des minuscules pour les attributs d'étiquette
4. Ne laissez aucun espace à la fin pour éviter les différences.
5. Utilisez UTF-8 (pas de nomenclature) et ajoutez <meta charset="utf-8″> au document
6. Utilisez ".js" minuscule pour nommer les fichiers et recommandez "-" au lieu de "_"
7.TODO(contact) et TODO : élément d'action, ne pas utiliser @@
Spécification de raffinement HTML
1. Spécifications d'utilisation de html5 <!DOCTYPE html>
2. Le format par défaut de la balise <img> est : <img src="xxx.png" alt="default text" /> pour éviter le problème src=""
3. Format par défaut de la balise <a> : <a href="###" title="Nom du lien">xxx</> Remarque : target="_blank" est déterminé en fonction des besoins
4. La balise <a> réserve les espaces réservés aux liens en utilisant ###, voir : un problème d'espace réservé de balise
5. Lors de la rédaction de l'adresse du lien, vous devez éviter la redirection, par exemple : href="http://itaolun.com/", c'est-à-dire que vous devez ajouter "/" après l'adresse URL.
6. Toutes les balises doivent être fermées conformément aux normes XHTML
7. Utilisez toujours la même forme d'écriture du slash à la fin de la balise : <br /> <hr /> Faites attention à l'espace entre
8. Évitez d'utiliser des balises obsolètes, telles que : <b> <u> <i> et remplacez-les par <strong> <em> etc.
9. Utilisez data-xxx pour ajouter des données personnalisées, telles que : <input data-xxx="yyy"/>
10. Évitez d'utiliser des symboles spéciaux style="xxx:xxx;" dans les feuilles de style en ligne utilisant des entités de symboles HTML de référence.
11. Des étiquettes doivent être ajoutées aux éléments de formulaire descriptifs (input, textarea), tels que <p>Name : <input type="text" id="name" name="name" /></p> doit être écrit comme : < p><label for=”name”>Nom : </label><input type=”text” id=”name” /></p>
Spécification de raffinement CSS
1. Ajoutez ";" après chaque attribut de style
Outil de compression pratique « segmentation de phrases ».
2. Dénomination de la classe, utilisez "-" [connecteur de signe moins] pour séparer les lettres de la classe :
Séparer par "-" est plus clair que d'utiliser un étui Camel.
Ligne de produits-produit-module-sous-module, vous pouvez également utiliser cette méthode pour nommer
ID : nomenclature CamelCase telle que :
prénom topBoxList footerCopyright
3. Pour l'utilisation des espaces, les règles suivantes s'appliquent :
.contenu de l'hôtel {
poids de la police : gras ;
} Il doit y avoir un espace avant le sélecteur et {. Le nom de l'attribut doit avoir un espace après : Le nom de l'attribut doit avoir un espace après : Une raison pour ajouter des espaces avant (interdit) est esthétique. Deuxièmement, il y a un bug dans IE 6. . Piquez le bug.
4. (Recommandé) Ordre d'écriture des attributs, par exemple :
.contenu de l'hôtel {
/* position*/
affichage : bloc ;
position : absolue ;
gauche : 0 ;
haut : 0 ;
/* Modèle de boîte */
largeur : 50 px ;
hauteur : 50px ;
marge : 10px ;
bordure : 1px noir uni ;
/ *autre* /
couleur : #efefef ;
}En ce qui concerne le positionnement, les attributs courants incluent : la position d'affichage du flotteur supérieur gauche, etc. Les attributs courants liés au modèle de boîte incluent : la largeur, la hauteur, la marge, le remplissage, la bordure et d'autres attributs.
Écrire dans cet ordre peut améliorer les performances du rendu DOM du navigateur. Par exemple, si la largeur et la hauteur de l'image dans la page Web ne sont pas définies, avant le chargement de l'image, l'espace qu'elle occupe est de 0, mais après son chargement. chargé, , l'espace 0 est soudainement étiré, ce qui entraînera la réorganisation et le rendu des éléments en dessous, provoquant une repeinture et une refusion. Lorsque nous écrivons du CSS, nous accordons la priorité au positionnement des éléments. Tout d'abord, nous indiquons au navigateur si l'élément se trouve à l'intérieur ou à l'extérieur du flux de texte, et où il se trouve sur la page. Ensuite, nous informons le navigateur de sa largeur, de sa hauteur et de son emplacement. bordure, etc. Ces attributs qui occupent de l'espace et d'autres attributs sont rendus dans cette zone fixe. C'est à peu près ce que cela signifie ~.
Articles recommandés :
Résultats du sondage : Comment commandez-vous vos propriétés CSS ?
http://www.mozilla.org/css/base/content.css
5. (Recommandé) Lors de l'écriture de styles pour une structure HTML spécifique, utilisez le nom de l'élément + le nom de la classe.
/* Tous les navigateurs sont écrits pour ul*/
ul.nav {
...
} ".a div" et ".a div.b", pourquoi ce dernier est-il meilleur ? Si les besoins changent et qu'un div supplémentaire est ajouté sous ".a", le style initial affectera-t-il les divs suivants~
6. (Non recommandé) Utilisez un filtre dans c'est-à-dire une expression d'utilisation (interdite)
Le principal problème ici est l’efficacité. Vous devriez y prêter une attention particulière et utiliser moins de choses qui brûlent le processeur.
7. Les commentaires CSS sont représentés par "/* */". Lors d'un commentaire sur une seule ligne, l'objet annoté et les caractères de commentaire précédents et suivants conservent chacun un espace et occupent une ligne distincte lors d'un commentaire sur plusieurs lignes, le commentaire de début ; Le caractère et le caractère de commentaire final occupent chacun une ligne. Par exemple:
/* Commentaire CSS */
/*
tableau {
border-collapse : effondrement ;
}
*/Spécification de raffinement JS
1. Saut de ligne
Chaque ligne de code doit contenir moins de 120 caractères. S'il est supérieur à ce nombre, vous pouvez envisager d'ajouter des opérateurs tels que "." ou "+" à la fin de la ligne. la nouvelle ligne doit être mise en retrait d'un niveau supplémentaire avant la nouvelle ligne.
Si les paramètres d'une fonction ou d'une méthode sont longs, divisez-les de manière appropriée.
Les sauts de ligne entre le mot-clé return et l'expression à renvoyer sont interdits. Par exemple:
// Ce qui est réellement renvoyé n'est pas défini, pas 1
fonction test() {
retour
1 ;
} 2. Lignes de code
Il est interdit d'écrire plusieurs déclarations courtes sur une seule ligne, c'est-à-dire d'écrire une seule déclaration sur une seule ligne.
Les instructions telles que if, for, do, while, switch, case, default, break et continue occupent leur propre ligne.
Tous les corps de boucle et les instructions d'exécution des corps de jugement, tels que if, for, do, while, etc., doivent être placés entre "{}", et les accolades ne peuvent pas être omises. Par exemple:
// Faux si (i < 5) i += 1;
// Corrige si (i < 5) {
je += 1
} 3. Alignement <br />Le délimiteur {} du bloc de code, "{" suit la ligne précédente et est séparé par un espace devant, "}" doit occuper une ligne exclusive et se situer dans la même colonne, tout en étant alignés à gauche avec les déclarations qui y font référence.
La méthode d'indentation ci-dessus doit être utilisée au début du corps de la fonction, de la définition de la classe et des programmes dans les instructions if, for, do, while, switch et case.
4. Espace
Il doit y avoir un espace après le mot-clé pour mettre le mot-clé en surbrillance.
Il ne peut pas y avoir d'espaces entre les noms de fonctions, les noms de méthodes et le crochet gauche "(", par exemple :
// Mauvaise fonction getInfo () {
//code
}
// Corriger la fonction getInfo() {
//code
}Lors de la déclaration d'une expression de fonction, aucun espace ne peut être laissé entre la fonction et le crochet gauche "(", par exemple :
// Mauvais utilisateur var = fonction () {
//code
}
// Corriger var user = function() {
//code
} Ajoutez un espace après la virgule.
Opérateurs d'affectation, opérateurs de comparaison, opérateurs arithmétiques, opérateurs logiques, opérateurs de champ de bits, tels que "=", "+=" ">=", "<=", "+", "*", "% ", "&& ", "||" et les autres opérateurs binaires doivent être précédés et suivis d'espaces.
Il n'y a pas d'espaces avant et après les opérateurs unaires tels que "!", "~", "++", "--" et "&" (opérateur d'adresse).
Il n'y a pas d'espaces avant et après "." et "[]".
5. Ligne vierge
Ajoutez une ligne vide après chaque déclaration de classe et à la fin de chaque définition de fonction.
Dans le corps d'une fonction, les instructions logiquement étroitement liées ne doivent pas être séparées par des lignes vides, et les autres endroits doivent être séparés par des lignes vides.
6. Utilisez des opérateurs conditionnels stricts. Utilisez === au lieu de == et !== au lieu de !=
7. Évitez les virgules supplémentaires. Par exemple : var arr = [1,2,3,]
8. Les instructions doivent toutes se terminer par un point-virgule, à l'exception de function, if, switch, try et while.
9. Placez l'accolade gauche à la fin de la ligne et l'accolade droite au début de la ligne.
10. Il n'est pas recommandé d'utiliser new pour construire les types d'objets suivants : new Number, new String, new Boolean, new Object (remplacer par {}), new Array (remplacer par []).
11. Il doit y avoir un espace après le "," entre les membres du tableau.
12. Il est interdit d'utiliser la dénomination de mots clés réservés javascript dans js/json, ce qui peut facilement provoquer des erreurs dans IE. Mots-clés (break, case, catch, continue, default, delete, do, else, enfin, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while , with), mots-clés (abstrait, booléen, byte, char, class, con st, débogueur, double, enum, export, extends, fimal, float, goto, implémente, import, int, interface, long, mative, package, privé, protégé, public, court, statique, super, synchronisé, lance, transitoire, volatil).
13. Il est recommandé d'utiliser "+" comme connecteur de nouvelle ligne au lieu de "".
14. Il est interdit d'utiliser des descriptions en langage général pour les informations d'invite. Lorsque vous voyez les informations, vous pouvez immédiatement localiser l'erreur. Par exemple, lorsque vous demandez aux informations de l'utilisateur de signaler une erreur, utilisez « Cet utilisateur n'existe pas. " au lieu de "Les données renvoyées par l'arrière-plan sont incorrectes", " Délai d'expiration du réseau".