Dieses Mal werde ich Ihnen die Spezifikationen für die Front-End-Monomercodierung und die Vorsichtsmaßnahmen für die Verwendung der monolithischen Front-End-Codierungsspezifikationen vorstellen. Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf.
Unabhängig davon, ob es sich um Front-End- oder Back-End-Code handelt, ist die Standardisierung von Code, Format und Anforderungen zu Beginn besonders wichtig spätere Pflege des Codes.
Nein | Kategorie |
Verifizierungsinhalt |
1 |
Seitendesign |
Der Listentitel wird in der Mitte angezeigt. |
2 | Seitendesign |
Datenanzeige im Abfragedatenbereich Stil: 1. Unbestimmte Länge Chinesisch, unbestimmte Länge Englisch, unbestimmte Länge Chinesisch und Englisch, unbestimmte Länge englische Ziffern auf der linken Seite 2 Datencenter, Datum, Uhrzeit, Seriennummer in der Mitte 3 > | Standardisierung des gemeinsamen Schreibens
Ob jeder Dateikopf korrekte Kommentare enthält | 4 | Standardisierung allgemeiner Schriften |
Ob jede Funktion korrekte Kommentare hat | 5 | Gemeinsame Schreibnormativität |
Ob es Kommentare zum relevanten Inhalt jeder Konfigurationsdatei | 6Gemeinsame Schreibnormativität | |
Jeder logische Block ist da Anmerkung | 7 | Gemeinsame Schreibnormativität |
Gibt es Gibt es ungenutzte Variablen und Referenzen? Verwenden Sie Tabulatoren zum Einrücken, stellen Sie Tabulatoren auf 4 Leerzeichen ein | 9 | HTML – Schreibspezifikationen |
Tag 1: | 1. Tag-Namen müssen Kleinbuchstaben enthalten, z. B. ; | 2. Für Tags, die nicht selbstschließend sein müssen, wie etwa input, br, img, hr usw.; In HTML5 angegeben, ist kein Selbstschließen zulässig. Ermöglicht das Weglassen von schließenden Tags.|
HTML-Schreiben normativ | Tag 2: |
1 Die Verwendung von Tags muss den Tag-Verschachtelungsregeln entsprechen. Beispielsweise darf p nicht in p platziert werden und tbody muss in der Tabelle platziert werden. 2. Die Verwendung von HTML-Tags sollte der Semantik der Tags folgen. Allgemeine Tag-Semantik p – Absatz h1,h2,h3,h4,h5,h6 – hierarchischer Titel strong, em – Hervorhebung |
del – löschen | abbr – Abkürzung | code – Code-Identifikation Zitieren – Zitieren Sie den Titel des Quellwerks q – Zitieren Blockquote – ein Absatz oder langes Zitat ul – ungeordnete Liste ol – geordnete Liste dl,dt, dd - Definitionstabelle |
11 | HTML-Schreibnormativ |
Attribute: 1. Attributnamen müssen Kleinbuchstaben enthalten. 3. Es wird empfohlen, benutzerdefinierten Attributen das Präfix „xxx-“ und „data-“ voranzustellen, beispielsweise |
HTML-Schreiben normativ | Kodierung 1: |
1. Verwenden Sie HTML5-Doctype, um den Standardmodus zu aktivieren. Es wird empfohlen, DOCTYPE in Großbuchstaben zu verwenden. 2. Die Seite muss den Title-Tag enthalten, um den Titel zu deklarieren. 3.title muss ein direktes untergeordnetes Element von head und unmittelbar nach der Zeichensatzdeklaration sein. Beispiel |
HTML -Schreibstandardisierung | Kodierung 2: |
Stellen Sie sicher, dass auf das Favicon zugegriffen werden kann (legen Sie die Datei favicon.ico im Stammverzeichnis ab, Link verwenden (Favicon angeben) responsives Layout handelt, muss der Darstellungsbereich der Seite angegeben werden. |
14 | HTML-Schreibspezifikation |
Einführung: 1. Bei der Einführung von CSS müssen Sie rel="stylesheet" angeben, z. B. ; . Bei der Verwendung von CSS und JavaScript ist es nicht erforderlich, das Typattribut anzugeben (es gibt einen Standardwert). 3 Geben Sie alle für die Seite erforderlichen CSS-Ressourcen ein am Ende der Seite platziert oder asynchron geladen werden. (Wenn Sie das Skript in der Mitte der Seite platzieren, wird die Darstellung der Seite blockiert.) |
HTML-Schreiben normativ | Bild: |
1. Der src-Wert von img darf nicht leer sein. Beim verzögerten Laden von Bildern sollte auch die Standard-Quelle hinzugefügt werden (eine leere Quelle führt dazu, dass die Seite neu geladen wird). 🎜> 2. Vermeiden Sie das Hinzufügen unnötiger Titelattribute zu img (überflüssiger Titel beeinträchtigt das Bildanzeigeerlebnis und erhöht die Seitengröße). 4. Diejenigen, die Bilder herunterladen müssen, werden mithilfe von IMG-Tags implementiert implementiert mit CSS-Hintergrundbildern. |
16 | HTML-Schreibspezifikation |
Form: 1. Steuerelemente mit Texttiteln müssen Label-Tags verwenden, um sie mit ihren Titeln zu verknüpfen. 2. Bei Verwendung von Schaltflächenelementen muss der Typattributwert angegeben werden 🎜 >3. Die für die Hauptfunktionen verantwortlichen Schaltflächen sollten zuerst im DOM platziert werden (empfohlen, abhängig vom Design). |
HTML-Schreibstandardisierung | Video & Audio: |
1. Priorisieren Sie die Verwendung von Audio- und Video-Tags, um Audio- und Videoelemente in Browsern zu definieren, die HTML5 unterstützen. 2 Automatische Wiedergabe von Videos; 3. Geben Sie im Objekt-Tag eine Beschreibung an, die angibt, dass der Browser das Tag nicht unterstützt, z. B. . |
CSS-Schreibnormativ | Stillinie Die Die Länge jeder Zeile darf 120 Zeichen nicht überschreiten, es sei denn, die Zeile ist unteilbar. | |
CSS-Schreiben normativ | Benennung: |
1.Klasse und ID müssen in Kleinbuchstaben angegeben und durch - (unterstrichen) getrennt werden. 2.Klasse und ID müssen das entsprechende Modul oder den Inhalt oder die Funktion darstellen der Komponente darf nicht mit Stilinformationen wie links, rechts, Mitte, rot, schwarz und anderen Wörtern benannt werden, die allein im Namen vorkommen. 3.class muss mit dem entsprechenden Präfix hinzugefügt werden (Globale Verschmutzung vermeiden), z. B. g-repräsentiert den globalen Stil, m-repräsentiert den Modulstil, ui-repräsentiert den Komponentenstil usw. Die Einzelheiten unterliegen den Projektvorschriften 4 darf nicht erscheinen! Klasse wird nur verwendet, um bestimmte Elemente auszuwählen und eine Klasse zu erstellen (mithilfe von id); 🎜> 6. Element Die ID muss sicherstellen, dass die Seite eindeutig ist;7. Gleiche Seite, unterschiedliche Tags, vermeiden Sie die Verwendung desselben Namens und derselben ID (es kann dasselbe Tag verwendet werden). |
20 | CSS-Schreibnormativität | Wenn ein Wann Da eine Regel mehrere Selektoren enthält, muss jede Selektordeklaration in einer eigenen Zeile stehen. |
21 | CSS-Schreibnormativität | Werte in Attributselektoren müssen in doppelte Anführungszeichen gesetzt werden. Wie zum Beispiel input[name="acd"] {......} |
22 | CSS -normativ schreiben | Wenn der Wert eine Dezimalzahl zwischen 0 und 1 ist, wird die 0 im ganzzahligen Teil weggelassen. Zum Beispiel Deckkraft: .8 |
23 | CSS-Schreibnormativ | Der Pfad in der Funktion url() wird nicht in Anführungszeichen gesetzt. Wie zum Beispiel Hintergrund: URL(bg.png); |
24 | CSS-Schreibstandardisierung | Wenn die Länge 0 ist, muss die Einheit weggelassen werden. Zum Beispiel Polsterung: 0 5px |
25 | CSS-Schreibspezifikation | Stilcode sollte unabhängig in einer Datei mit dem Suffix .css gespeichert werden. Inline-Stile sind außer unter besonderen Umständen nicht zulässig. |
26 | CSS-Schreibspezifikation | RGB-Farbwert muss die hexadezimale Notation Form #rrggbb verwenden. rgb() ist nicht erlaubt. |
27 | CSS-Schreiben normativ |
Farbe: 1. RGB-Farbwerte müssen die hexadezimale Schreibweise #aabbcc verwenden, rgb() ist nicht zulässig. 2 Für Farbwerte wie Rot, Grün und andere unsichere Werte sind keine Abkürzungen zulässig 4. Farbwerte verwenden alle englische Kleinbuchstaben. 28 |
CSS-Schreibstandardisierung | Schriftart 1: | 1. Der Schriftfamilienname im Attribut „font-family“ sollte den englischen Familiennamen der Schriftart verwenden. Wenn Leerzeichen vorhanden sind, müssen diese in Anführungszeichen gesetzt werden strengstens verboten. Beispiel-Schriftfamilie: „Microsoft YaHei“;
Familienname des Schriftart-Betriebssystems 宋体 (中易宋体) Windows SimSun Heihei (Zhongyi Heihei) Windows SimHei Microsoft YaHei Microsoft JhengHei Windows中文字幕 约 🎜>Holly Black 体 🎜> i Micron Black Linux WenQuanYi Micro Hei 29 | CSS-Schreibstandardisierung
Schriftart 2: | 1.font-family Klicken Sie auf „Westliche Schriftart vorne, chinesische Schriftart innen“. zurück“, „Gute Wirkung (hohe Qualität/effizienter)“ Die Schriftarten, die den Anforderungen entsprechen, werden zuerst geschrieben, und die Schriftarten mit durchschnittlicher Wirkung werden in der Reihenfolge „danach“ geschrieben. Schließlich wird eine allgemeine Schriftfamilie (Serife / | Zum Beispiel Schriftfamilie: Arial, Sans-Serif;
30 | CSS-Schreibnorm
Schriftgröße: | 1. Die Schriftgröße des chinesischen Inhalts, der verwendet werden muss Der auf der Windows-Plattform angezeigte chinesische Inhalt sollte nicht kleiner als 12 Pixel sein. Verwenden Sie keinen anderen als den normalen Schriftstil. |
31 JS-Schreibspezifikation |
Mehrere gebräuchliche Namen: Camel Case für die Benennung von thisIsAnApple, Pascal für die Benennung von thisIsAnApple, Unterstrich für die Benennung von this_is_an_apple und Unterstrich für die Benennung von this-is-an-apple | 1. Methoden-/Attributname , Variablenname, Parametername, Namespace , Funktionsname muss in Kamel-Schreibweise benannt werden |
2 Verwenden Sie Pascal-Namen; 3. Konstante Namen, Aufzählungsattribute: müssen alle Unterstreichungsnomenklaturen in Großbuchstaben verwenden, wie z. B. IS_DEBUG_ENABLED; .Private (geschützte) Mitglieder (Eigenschaften). , Funktionen usw.): muss mit dem Unterstrich _ beginnen; 5. Der boolesche Typ sollte mit „is“, „has“ usw. beginnen6. Bei der Benennung muss auch auf die Semantik geachtet werden. Variablennamen sollten beispielsweise Substantive verwenden, Funktionsnamen sollten Verb-Objekt-Phrasen verwenden (getAccListData) und Klassennamen sollten Substantive verwenden. |
32 | JS-Schreibstandardisierung | JavaScript-Programm It sollten unabhängig in einer Datei mit dem Suffix .js gespeichert werden. |
33 | JS-Schreibstandardisierung | Vermeiden Sie jede Zeile überschreitet 80 Zeichen. |
34 | JS-Schreibspezifikation | Versuchen Sie zu reduzieren es so weit wie möglich Wenn Sie globale Variablen verwenden, lassen Sie nicht zu, dass lokale Variablen globale Variablen überschreiben. |
35 | JS-Schreibspezifikation | kann verwendet werden Im Falle einer gemeinsamen Funktion, ob die gemeinsame Funktion verwendet wird. |
36 | JS-Schreiben normativ |
Aussage: 1. Jede Zeile enthält höchstens eine Anweisung (Semikolon) am Ende jeder einfachen Anweisung Verwenden Sie () (Klammern) nicht, um den Rückgabewert in einer Rückgabeanweisung mit einem Rückgabewert einzuschließen. Wenn ein Ausdruck zurückgegeben wird, sollte sich der Ausdruck in derselben Zeile wie das Schlüsselwort return befinden, um den Fehler zu vermeiden, dass versehentlich ein Semikolon hinzugefügt wird Logikprozess des Programms schwer zu verstehen 4.eval ist die am leichtesten zu missbrauchende Methode in JavaScript. Vermeiden Sie deren Verwendung. |
37 | JS-Writing Normativ | ES5-Syntax Die Code muss in einen IIFE (Immediately-Invoked Function Expression) verpackt werden, um eine unabhängige und isolierte Definitionsdomäne zu erstellen und zu verhindern, dass der globale Namespace verschmutzt wird. |
38 | JS-Schreibspezifikation | im Code JS-Strict-Modus „use strict“ hinzufügen |
39 | JS-Schreibstandardisierung | Variablendeklaration: Verwenden Sie var oder let, um Variablen zu deklarieren. Wenn Sie eine Variable nicht angeben, wird sie implizit als globale Variable deklariert, was die Steuerung der Variablen erschwert. |
40 | JS-Programm-Unblockierbarkeit | mit Bedacht True verwenden und falsches Urteil, if(a == true) unterscheidet sich von if(a). Dieses Urteil wird durch spezielle Operationen in true oder false umgewandelt. Die folgenden Ausdrücke geben alle false zurück: false, 0, undefiniert, null, NaN, (. leere Zeichenfolge). > Vermeiden Sie das Erstellen von Funktionen in Schleifen. Das Hinzufügen von Funktionen zu einfachen Schleifenanweisungen kann leicht zu Abschlüssen führen und versteckte Gefahren verursachen. |
42 | JS-Programm-Entsperrung | Bei der Deklaration vermeiden eine Funktion innerhalb eines Anweisungsblocks, wird im strikten Modus ein Syntaxfehler | gemeldet.
43 | JS-Programm-Entsperrung | Verwenden Sie Arrays und Objektliterale anstelle von Arrays und Objektkonstruktoren machen es leicht, Fehler mit seinen Argumenten zu machen. |
44 | JS-Program Smoothness | Sanyuan Für bedingt Urteil (Abkürzungsmethode von if), verwenden Sie den ternären Operator, um Anweisungen zuzuweisen oder zurückzugeben, um deren Verwendung in komplexen Situationen zu vermeiden. |
45 | JS-Programm-Entsperrung | String Einzeln verwenden Setzen Sie (') einheitlich in Anführungszeichen und verwenden Sie keine doppelten Anführungszeichen ("), was beim Erstellen von HTML-Strings sehr nützlich ist: z. B. |
46 | JS-Program Smoothness Verwenden Sie keine redundanten Programme. Die folgenden Beispiele dienen als Referenz: |
|
・Wiederholte Initialisierung | ・Definieren Sie nicht verwendete Variablen||
47 | JS-logische Korrektheit | Keine seltsame Logik (leere Funktionen, unverarbeitete Zweige usw.) |
48 | JS- logische Korrektheit | Die Zeichenfolgenlänge des Texteingabefelds ist anhand von zwei Punkten begrenzt: 1. Ob es sich um eine Geschäftsanforderung handelt; 2. Ob die Datenbankfeldlänge den Anforderungen entspricht |
49 | JS-logische Korrektheit | Nachdem die Abfrage abgeschlossen ist , Abfrage Die Bedingung sollte im entsprechenden Eingabefeld bleiben |
50 | JS-logische Korrektheit | Ob die Abfrageergebnisse sortiert sind. |
51 | JS-logische Korrektheit | Abfragebereich Die Die Gesamtzahl der Einträge sollte der Gesamtzahl aller aktuell abgefragten Daten entsprechen. Anstelle der Anzahl der auf der aktuellen Seite angezeigten Elemente |
52 | JS-logische Korrektheit | Das Eingabefeld für die Abfragebedingung sollte vor der Abfrage die führenden und nachfolgenden Leerzeichen entfernen |
Ich glaube, du hast es gemeistert Nachdem Sie den Fall in diesem Artikel gelesen haben, lesen Sie die Methode. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Das obige ist der detaillierte Inhalt vonWas sind die Spezifikationen für die monolithische Front-End-Codierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!