Cette fois, je vais vous apporter les spécifications du codage monolithique front-end et quelles sont les précautions à prendre pour utiliser les spécifications de codage monolithique front-end. Ce qui suit est un cas pratique, jetons un coup d'œil.
Qu'il s'agisse de code front-end ou back-end, les normes de codage sont particulièrement importantes. Surtout dans les grands projets, la normalisation du code, du format et des exigences au début réduira beaucoup de charge de travail. maintenance ultérieure du code.
Non | Catégorie |
Contenu de vérification |
1 |
Conception de pages |
Le titre de la liste est affiché au centre. |
2 | Conception de la page |
Affichage des données de la zone de données de requête Style : 1. Longueur indéfinie chinois, longueur indéfinie anglais, longueur indéfinie chinois et anglais, longueur indéfinie Chiffres anglais à gauche 2. Data Center, date, heure, numéro de série au centre 3 |
Si chaque en-tête de fichier contient des commentaires corrects | 4 | |
Si chaque fonction a des commentaires corrects | 5 | |
Existe-t-il des commentaires sur le contenu pertinent de chaque | fichier de configuration6 | |
Chaque bloc logique Y a-t-il annotation | 7 | |
Existe-t-il des variables et des références inutilisées | 8 | |
Utilisez des tabulations pour l'indentation, définissez les tabulations sur 4 espaces | 9 | |
Balise 1 : | 1. Les noms de balises doivent utiliser des lettres minuscules, telles que ; | 2. Pour les balises qui n'ont pas besoin d'être fermées automatiquement, la fermeture automatique n'est pas autorisée, comme input, br, img, hr, etc. 3. spécifié en HTML5, aucune fermeture automatique n'est autorisée. Permet d'omettre les balises de fermeture. 10 |
Balise 2 : | 1 L'utilisation des balises doit être conforme aux règles d'imbrication des balises. Par exemple, p ne doit pas être placé dans p, et tbody doit être placé dans un tableau. | 2. L'utilisation des balises HTML doit suivre la sémantique des balises. Sémantique commune des balises p - paragraphe h1,h2,h3,h4,h5,h6 - titre hiérarchique fort, em - emphase ins - insérer del - supprimer abbr - abréviation code - code d'identification citer - citer le titre de l'œuvre source q - citer blockquote - un paragraphe ou une longue citation ul - liste non ordonnée ol - liste ordonnée dl,dt, dd - tableau de définition |
11 | normative d'écriture HTML |
Attributs : 1. Les noms d'attributs doivent utiliser des lettres minuscules ; 2. Les valeurs d'attribut doivent être entourées de guillemets doubles ; > 3. Il est recommandé que les attributs personnalisés soient préfixés par xxx- et data-, tels que |
Normand d'écriture HTML | Encodage 1 : |
1. Utilisez le doctype HTML5 pour activer le mode standards. Il est recommandé d'utiliser des DOCTYPE en majuscules. 2. La page doit contenir la balise title pour déclarer le titre. 3.title doit être un élément enfant direct de head et immédiatement après la déclaration charset. Exemple |
HTML -normalisation de l'écriture | Encodage 2 : |
1. Assurez-vous que le favicon est accessible (placez le fichier favicon.ico dans le répertoire racine, utilisez le lien Spécifiez le favicon) responsive layout, la fenêtre d'affichage de la page doit être précisée. |
14 | Spécification d'écriture HTML |
Introduction : 1. Lors de l'introduction de CSS, vous devez spécifier rel="stylesheet", tel que 2. . Importer Il n'est pas nécessaire de spécifier l'attribut type lors de l'utilisation de CSS et JavaScript (il existe une valeur par défaut 3) Introduisez toutes les ressources CSS nécessaires à la page dans l'en-tête. placé en fin de page, ou chargé de manière asynchrone. (Placer le script au milieu de la page bloquera le rendu de la page). |
15 | Norme d'écriture HTML |
Image : 3. Ajoutez des attributs alt aux images importantes 4. Ceux qui ont besoin de télécharger les images sont implémentés à l'aide de balises img et les images sans exigences de téléchargement le sont. implémenté à l'aide d'images d'arrière-plan CSS. |
16 | Spécification d'écriture HTML |
Formulaire : 1. Les contrôles avec des titres de texte doivent utiliser des balises d'étiquette pour les associer à leurs titres 2 Lors de l'utilisation d'éléments de bouton, la valeur de l'attribut type doit être spécifiée ; 🎜>3. Les boutons responsables des fonctions principales doivent être placés en premier dans le DOM (recommandé, sous réserve de conception). |
Standardisation de l'écriture HTML | Vidéo et amp; Audio : |
1. Donner la priorité à l'utilisation de balises audio et vidéo pour définir les éléments audio et vidéo dans les navigateurs prenant en charge HTML5 2. Lecture automatique des vidéos ; 3. Fournissez une description à l'intérieur de la balise d'objet indiquant que le navigateur ne prend pas en charge la balise, telle que . |
Ligne de style normative d'écriture CSS | Le La longueur de chaque ligne ne doit pas dépasser 120 caractères, sauf si la ligne est indivisible. | |
Norme d'écriture CSS | Nommage : |
1.class, l'identifiant doit être composé uniquement de lettres minuscules et les mots sont séparés par - (souligné) 2.class, l'identifiant doit représenter le module correspondant ou Le le contenu ou la fonction du composant ne doit pas être nommé avec des informations de style, telles que gauche, droite, centre, rouge, noir et d'autres mots apparaissant seuls dans le nom 3.class doit être ajouté avec ; le préfixe correspondant (éviter la pollution globale), tel que g-représente le style global, m-représente le style du module, ui-représente le style des composants, etc. Les spécificités sont soumises aux réglementations du projet 4. Un seul style n'est pas autorisé à apparaître ! Important ; 5. Il n'est pas autorisé à permettre à JavaScript de sélectionner certains éléments et de créer une classe sans informations de style (en utilisant l'identifiant). 🎜> 6. Élément L'identifiant doit garantir que la page est unique 7. Même page, balises différentes, évitez d'utiliser le même nom et identifiant (la même balise peut être utilisée). |
20 | normativité de l'écriture CSS | Quand un Quand une règle contient plusieurs sélecteurs, chaque déclaration de sélecteur doit être sur sa propre ligne. |
21 | Normativité de l'écriture CSS | Les valeurs dans les sélecteurs d'attributs doivent être entourées de guillemets doubles. Tels que input[name="acd"] {...} |
22 | Norme d'écriture CSS | Lorsque la valeur est une valeur décimale comprise entre 0 et 1, le 0 dans la partie entière est omis. Tel que l'opacité : .8 |
23 | normative d'écriture CSS | Le chemin dans la fonction url() n'est pas cité. Tels que l'arrière-plan : url(bg.png); |
24 | Standardisation de l'écriture CSS | Lorsque la longueur est 0, l'unité doit être omise. Tels que le remplissage : 0 5px |
25 | Spécification d'écriture CSS | Le code de style doit être enregistré indépendamment dans un fichier avec le suffixe .css. Les styles en ligne ne sont pas autorisés, sauf dans des circonstances particulières. |
26 | Norme d'écriture CSS | Valeur de couleur RVB doit utiliser la forme de notation hexadécimale #rrggbb. rgb() n'est pas autorisé. |
27 | Norme d'écriture CSS |
Couleur : 1. Les valeurs de couleur RVB doivent utiliser la notation hexadécimale #aabbcc, rgb() n'est pas autorisé 2. doit utiliser des abréviations telles que #fff, #000 3. Les valeurs de couleur nommées ne sont pas autorisées pour les valeurs de couleur telles que le rouge vert et d'autres valeurs incertaines 4. Les valeurs de couleur utilisent toutes des lettres anglaises minuscules. |
28 | Standardisation de l'écriture CSS |
Police 1 : 1. Le nom de famille de police dans l'attribut font-family doit utiliser le nom de famille anglais de la police. S'il y a des espaces, ils doivent être placés entre guillemets. strictement interdit. Exemple de famille de polices : "Microsoft YaHei" ; Nom de famille du système d'exploitation de la police 宋体 (中易宋体) Windows SimSun Heihei (Zhongyi Heihei) Windows SimHei Microsoft YaHei Microsoft JhengHei Windows中文字幕 WenQuanY i Micron Black Linux WenQuanYi Micro Hei 29 | Standardisation de l'écriture CSS
Police 2 : | 1.font-family Cliquez sur "Police occidentale devant, police chinoise à l'intérieur back", "Bon effet (haute qualité/plus efficace)" Les polices qui répondent aux besoins) sont écrites en premier, et les polices avec des effets moyens sont écrites dans l'ordre "après". Enfin, une famille de polices générale (serif / sans-serif) doit être spécifié ; | Par exemple, font-family : Arial, sans-serif;
30 | Norme d'écriture CSS
Taille de la police : | 1. être affiché sur la plate-forme Windows ne doit pas être inférieur à 12 pixels ; | 2. Le contenu chinois qui doit être affiché sur la plate-forme Windows, n'utilisez pas de style de police autre que celui normal.
31 | Spécification d'écriture JS
Nommage : | Plusieurs noms communs : Camel Case nommant thisIsAnApple, Pascal nommant thisIsAnApple, soulignez nommant this_is_an_apple et soulignez nommant this-is-an-apple | 1. , nom de la variable, nom du paramètre, espace de noms , le nom de la fonction doit être nommé en casse chameau 2. utilisez la dénomination Pascal ; 3. Noms de constantes, attributs d'énumération : doivent utiliser toute la nomenclature soulignée en majuscules, telle que 4 .Membres privés (protégés) (propriétés) , fonctions, etc.) : doit commencer par un trait de soulignement _ ; 5. Les types booléens doivent commencer par is, has, etc. pour indiquer leur type ;6. La dénomination nécessite également une attention particulière à la sémantique. Par exemple, les noms de variables doivent utiliser des noms, les noms de fonctions doivent utiliser des expressions verbe-objet (getAccListData) et les noms de classe doivent utiliser des noms. |
32 | Standardisation de l'écriture JS | Programme JavaScript Il doit être enregistré indépendamment dans un fichier avec un suffixe .js. |
33 | Standardisation de l'écriture JS | Évitez chaque ligne dépasse 80 caractères. |
34 | Spécification d'écriture JS | Essayez de réduire autant que possible Lorsque vous utilisez des variables globales, ne laissez pas les variables locales écraser les variables globales. |
35 | La spécification d'écriture JS | peut être utilisée Dans le cas d'une fonction commune, si la fonction commune est utilisée. |
36 | Déclaration normative d'écriture JS |
: 1. Chaque ligne contient au plus une instruction, mettez ; (point-virgule) à la fin de chaque instruction simple 2. N'utilisez pas ( ) (crochets) pour placer la valeur de retour dans une instruction return avec une valeur de retour. Si une expression est renvoyée, l'expression doit être sur la même ligne que le mot-clé return pour éviter l'erreur d'ajouter accidentellement un point-virgule 3. processus logique du programme obscur.4.eval est la méthode la plus facilement abusée en JavaScript, évitez de l'utiliser. |
37 | JS-Writing Normative | Syntaxe ES5 La le code doit être encapsulé dans une IIFE (Immediately-Invoked Function Expression) pour créer un domaine de définition indépendant et isolé afin d'éviter que l'espace de noms global ne soit pollué. |
38 | Spécification d'écriture JS | dans le code Ajouter js mode strict 'utiliser strict' |
39 | Standardisation de l'écriture JS | Déclaration de variable : utilisez var ou let pour déclarer des variables. Si vous ne spécifiez pas de variable, elle sera implicitement déclarée comme variable globale, ce qui rendra difficile le contrôle de la variable. |
40 | Débloquabilité du programme JS | Utiliser judicieusement true et faux jugement, if(a == true) est différent de if(a). Ce jugement le convertira en vrai ou faux via des opérations spéciales. Les expressions suivantes renvoient toutes false : false, 0, undefined, null, NaN, (. chaîne vide). |
41 | Douceur du programme JS | Évitez de créer des fonctions dans des boucles. L'ajout de fonctions à de simples instructions de boucle peut facilement former des fermetures et provoquer des dangers cachés. |
42 | Déblocage du programme JS | À éviter lors de la déclaration une fonction au sein d'un bloc d'instructions, une erreur de syntaxe sera signalée en mode strict. |
43 | Communication avec le programme JS | Utilisation de tableaux et des littéraux d'objet au lieu de tableaux et de constructeurs d'objets. Le constructeur de tableau facilite les erreurs avec ses arguments. |
44 | Douceur du programme JS | Sanyuan Pour le conditionnel jugement (méthode de raccourci de if), utilisez l'opérateur ternaire pour attribuer ou renvoyer des instructions afin d'éviter de les utiliser dans des situations complexes. |
45 | Déblocage du programme JS |
Utilisation de chaîne unique guillemets (') uniformément et n'utilisez pas de guillemets doubles ("), ce qui est très bénéfique lors de la création de chaînes HTML : comme var msg = 'Ceci est du HTML '. |
46 | Douceur du programme JS |
N'utilisez pas de programmes redondants. Les exemples suivants sont utilisés à titre de référence : ・Il y a des sous-programmes inutilisés ・Initialisation répétée ・Initialisation répétée N'utilisez pas de programmes redondants. 🎜>・Définir les variables inutilisées |
47 | Exactitude logique JS | Pas de logique étrange (fonctions vides, branches non traitées, etc.) |
48 | JS- exactitude logique | La longueur de la chaîne de la zone de saisie de texte est limitée en fonction de deux points : 1. S'il s'agit d'une exigence commerciale 2. Si la longueur du champ de la base de données répond aux exigences |
49 | Exactitude logique JS | Une fois la requête terminée , requête La condition doit rester dans la zone de saisie correspondante |
50 | Exactitude logique JS | Indique si les résultats de la requête sont triés. |
51 | Exactitude logique JS | Zone de requête La le nombre total d'entrées doit être le nombre total de toutes les données actuellement interrogées. Au lieu du nombre d'éléments affichés sur la page actuelle |
52 | Exactitude logique JS | La zone de saisie de la condition de requête doit supprimer les espaces de début et de fin avant d'interroger |
La solution au problème selon lequel le texte dans la liste déroulante de sélection du navigateur Safari est trop long et ne s'enroule pas sur de nouvelles lignes
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!