Spezifikation
Hierbei handelt es sich um den vom Front-End-Entwicklungsteam befolgten und vereinbarten Code-Schreibstandard, der die Standardisierung und Wartbarkeit des Codes verbessern soll.
Grundprinzipien
Einhaltung von Webstandards, semantischem HTML, Trennung von Struktur, Leistung und Verhalten sowie hervorragender Kompatibilität. Im Hinblick auf die Seitenleistung muss der Code präzise, klar und geordnet sein, um die Serverlast so weit wie möglich zu reduzieren und sicherzustellen schnellste Parsing-Geschwindigkeit.
allgemeine Spezifikation
1. Ignorieren (lassen) Sie das Protokoll: „background: url(http://www.google.com/images/example)“. Erleichtern Sie den HTTP-Wechsel mit dem https-Protokoll, es sei denn, es muss ein bestimmtes Protokoll verwendet werden
2. Verwenden Sie die IDE, um beim Schreiben eine klare Einrückung zu erreichen. Die Tabulatortaste wird durch vier Leerzeichen ersetzt.
Da die Bearbeitungstools verschiedener Systeme Tabulatoren unterschiedlich interpretieren, belegt die Tabulatortaste unter Windows vier Leerzeichen, während sie unter Linux acht Leerzeichen belegt (es sei denn, Sie legen die Belegung der Tabulatortaste selbst fest. Positionslänge).
Für erhabenen Text können Sie beispielsweise die Tabulatortaste in diesem Tool festlegen.
3. Verwenden Sie Kleinbuchstaben für Beschriftungsattribute
4. Lassen Sie am Ende keine Leerzeichen, um Differenzen zu vermeiden
5. Verwenden Sie UTF-8 (kein BOM) und fügen Sie <meta charset="utf-8″> zum Dokument hinzu
6. Verwenden Sie für die Dateibenennung Kleinbuchstaben „.js“ und empfehlen Sie „-“ anstelle von „_“.
7.TODO(Kontakt) und TODO: Aktionselement, verwenden Sie nicht @@
HTML-Verfeinerungsspezifikation
1. Spezifikationen für die Verwendung von html5 <!DOCTYPE html>
2. Das Standardformat des <img>-Tags ist: <img src="xxx.png" alt="default text" />, um das src=""-Problem zu vermeiden
3. Standardformat des <a>-Tags: <a href="###" title="Linkname">xxx</> Hinweis: target="_blank" wird je nach Bedarf bestimmt
4. Das <a>-Tag reserviert Link-Platzhalter mit ###, siehe: ein Tag-Platzhalter-Problem
5. Beim Schreiben der Linkadresse müssen Sie eine Umleitung vermeiden, zum Beispiel: href="http://itaolun.com/", d. h. Sie müssen nach der URL-Adresse ein „/“ hinzufügen.
6. Alle Tags müssen gemäß den XHTML-Standards geschlossen werden
7. Verwenden Sie immer die gleiche Schreibweise des Schrägstrichs am Ende des Tags: <br /> <hr /> Achten Sie auf den Abstand dazwischen
8. Vermeiden Sie die Verwendung veralteter Tags wie: <b> <u> <i> und ersetzen Sie sie durch <strong> <em> usw.
9. Verwenden Sie data-xxx, um benutzerdefinierte Daten hinzuzufügen, z. B.: <input data-xxx="yyy"/>
10. Vermeiden Sie die Verwendung von style="xxx:xxx;"-Sondersymbolen in Inline-Stylesheets, die Referenz-HTML-Symbolentitäten verwenden
11. Beschriftungen müssen zu beschreibenden Formularelementen (Eingabe, Textbereich) hinzugefügt werden, z. B. <p>Name: <input type="text" id="name" name="name" /></p> muss geschrieben werden als : < p><label for=“name“>Name: </label><input type=“text“ id=“name“ /></p>
CSS-Verfeinerungsspezifikation
1. Fügen Sie nach jedem Stilattribut „;“ hinzu
Praktisches Komprimierungstool „Satzsegmentierung“.
2. Klassenbenennung, verwenden Sie „-“ [Minuszeichen-Anschluss], um die Buchstaben in der Klasse zu trennen:
Die Trennung mit „-“ ist klarer als die Verwendung der Groß-/Kleinschreibung.
Produktlinie-Produkt-Modul-Untermodul, Sie können diese Methode auch bei der Benennung verwenden
ID: CamelCase-Nomenklatur wie:
Vorname topBoxList footerCopyright
3. Für die Nutzung von Räumen gelten folgende Regeln:
.hotel-content {
Schriftstärke: fett;
} Vor dem Selektor muss ein Leerzeichen stehen und nach dem Attributnamen muss ein Leerzeichen stehen: Ein Grund für das Hinzufügen von Leerzeichen davor (verboten) ist die Ästhetik. Zweitens gibt es einen Fehler in IE 6 . Stochern Sie den Käfer.
4. (Empfohlen) Schreibreihenfolge der Attribute, zum Beispiel:
.hotel-content {
/*Position*/
Anzeige: Block;
Position: absolut;
links: 0;
oben: 0;
/* Box-Modell */
Breite: 50px;
Höhe: 50px;
Rand: 10px;
Rand: 1 Pixel einfarbig schwarz;
/ *andere* /
Farbe: #efefef;
}Im Zusammenhang mit der Positionierung gehören zu den häufigsten Attributen: Anzeigeposition links oben schwebend usw. Zu den häufig verwendeten Attributen im Zusammenhang mit dem Boxmodell gehören: Breite, Höhe, Rand, Abstand, Rand und andere Attribute.
Das Schreiben in dieser Reihenfolge kann die Leistung des DOM-Renderings des Browsers verbessern. Wenn beispielsweise die Breite und Höhe des Bildes auf der Webseite nicht festgelegt sind, beträgt der Platz, den das Bild einnimmt, 0, danach jedoch geladen, wird der 0-Raum plötzlich aufgeweitet, was dazu führt, dass die darunter liegenden Elemente neu angeordnet und gerendert werden, was zu Neulackierung und Reflow führt. Wenn wir CSS schreiben, teilen wir dem Browser zunächst mit, ob sich das Element innerhalb oder außerhalb des Textflusses befindet und wo es sich auf der Seite befindet. Rahmen usw. Diese Attribute, die Platz beanspruchen, und andere Attribute werden innerhalb dieses festen Bereichs gerendert. Das ist so ziemlich das, was es bedeutet
Empfohlene Artikel:
Umfrageergebnisse: Wie ordnen Sie Ihre CSS-Eigenschaften an?
http://www.mozilla.org/css/base/content.css
5. (Empfohlen) Verwenden Sie beim Schreiben von Stilen für eine bestimmte HTML-Struktur den Elementnamen + den Klassennamen
/* Alle Navs sind für ul geschrieben*/
ul.nav {
...
} „.a div“ und „.a div.b“, warum ist letzteres besser? Wenn sich die Anforderungen ändern und ein zusätzliches Div unter „.a“ hinzugefügt wird, wirkt sich der ursprüngliche Stil auf die nachfolgenden Divs aus
6. (Nicht empfohlen) Filter verwenden, z. B. (Verboten) Ausdruck verwenden
Das Hauptproblem hierbei ist die Effizienz. Darauf sollten Sie besonders achten und weniger Dinge verwenden, die die CPU belasten
7. CSS-Kommentare werden durch „/* */“ dargestellt. Beim Kommentieren einer einzelnen Zeile behalten das kommentierte Objekt und die vorangehenden und folgenden Kommentarzeichen jeweils ein Leerzeichen und belegen beim Kommentieren mehrerer Zeilen eine separate Zeile Das Kommentarzeichen und das abschließende Kommentarzeichen belegen jeweils eine Zeile. Zum Beispiel:
/* Kommentar-CSS */
/*
Tisch {
border-collapse: Zusammenbruch;
}
*/JS-Verfeinerungsspezifikation
1. Zeilenumbruch
Jede Codezeile sollte weniger als 120 Zeichen lang sein. Wenn sie länger ist, können Sie eine neue Zeile am Ende der Zeile einfügen Die neue Zeile muss vor der neuen Zeile um eine weitere Ebene eingerückt werden.
Wenn die Parameter in einer Funktion oder Methode lang sind, teilen Sie sie entsprechend auf.
Zeilenumbrüche zwischen dem Schlüsselwort return und dem zurückzugebenden Ausdruck sind verboten. Zum Beispiel:
// Was tatsächlich zurückgegeben wird, ist undefiniert, nicht 1
Funktionstest() {
zurückkehren
1;
} 2. Codezeilen
Es ist verboten, mehrere kurze Anweisungen in eine Zeile zu schreiben, dh nur eine Anweisung in eine Zeile zu schreiben.
Anweisungen wie if, for, do, while, switch, case, default, break und continue belegen eine eigene Zeile.
Alle Schleifenkörper und Ausführungsanweisungen von Beurteilungskörpern, wie z. B. if, for, do, while usw., müssen in „{}“ eingeschlossen werden, und geschweifte Klammern dürfen nicht weggelassen werden. Zum Beispiel:
// Falsch, wenn (i < 5) i += 1;
// Korrigieren, wenn (i < 5) {
ich += 1
} 3. Ausrichtung <br />Das Trennzeichen {} des Codeblocks, „{“, folgt der vorherigen Zeile und wird durch ein Leerzeichen davor getrennt, „}“ sollte eine exklusive Zeile einnehmen und sich dabei in derselben Spalte befinden linksbündig mit den darauf verweisenden Aussagen.
Die obige Einrückungsmethode muss am Anfang des Funktionskörpers, der Definition der Klasse und der Programme in if-, for-, do-, while-, switch- und case-Anweisungen verwendet werden.
4. Raum
Nach dem Schlüsselwort muss ein Leerzeichen stehen, um das Schlüsselwort hervorzuheben.
Zwischen Funktionsnamen, Methodennamen und der linken Klammer „(“ dürfen keine Leerzeichen stehen, zum Beispiel:
// Falsche Funktion getInfo () {
// Code
}
// Korrekte Funktion getInfo() {
// Code
}Bei der Deklaration eines Funktionsausdrucks darf zwischen der Funktion und der linken Klammer „(“ kein Leerzeichen gelassen werden, zum Beispiel:
// Falsche Variable user = function () {
// Code
}
// Korrigieren Sie var user = function() {
// Code
} Fügen Sie nach dem Komma ein Leerzeichen ein.
Zuweisungsoperatoren, Vergleichsoperatoren, arithmetische Operatoren, logische Operatoren, Bitfeldoperatoren, wie „=", „+=" „>=", „<=", „+“, „*“, „%“, „&& ", "||" und anderen binären Operatoren sollten Leerzeichen vorangestellt und gefolgt werden.
Es gibt keine Leerzeichen vor und nach unären Operatoren wie „!“, „~“, „++“, „--“ und „&“ (Adressoperator).
Es gibt keine Leerzeichen vor und nach „.“ und „[]“.
5. Leerzeile
Fügen Sie nach jeder Klassendeklaration und am Ende jeder Funktionsdefinition eine Leerzeile hinzu.
Innerhalb eines Funktionskörpers sollten logisch eng zusammenhängende Anweisungen nicht durch Leerzeilen getrennt werden, andere Stellen sollten durch Leerzeilen getrennt werden.
6. Verwenden Sie strenge bedingte Operatoren. Verwenden Sie === statt == und !== statt !=
7. Vermeiden Sie zusätzliche Kommas. Zum Beispiel: var arr = [1,2,3,]
8. Anweisungen müssen alle mit einem Semikolon enden, mit Ausnahme von function, if, switch, try und while.
9. Platzieren Sie die linke geschweifte Klammer am Ende der Linie und die rechte geschweifte Klammer am Anfang der Linie.
10. Es wird nicht empfohlen, new zum Erstellen der folgenden Objekttypen zu verwenden: neue Zahl, neuer String, neuer boolescher Wert, neues Objekt (durch {} ersetzen), neues Array (durch [] ersetzen).
11. Nach dem „“, muss zwischen den Array-Mitgliedern ein Leerzeichen stehen.
12. Es ist verboten, in js/json reservierte Schlüsselwortnamen für Javascript zu verwenden, was leicht zu Fehlern im IE führen kann. Schlüsselwörter (Unterbrechung, Fall, Fang, Fortfahren, Standard, Löschen, Ausführen, sonst, schließlich, für Funktion, wenn, in, Instanz von, neu, Rückkehr, Schalter, Dies, Werfen, Versuchen, Typ von, Var, Void, während, with), Schlüsselwörter (abstract, boolean, byte, char, class, con st, Debugger, Double, Enum, Export, Extends, Fimal, Float, Goto, Implements, Import, Int, Interface, Long, Mative, Package, Private, Protected, Public, Short, Static, Super, Synchronized, Throws, Transient, flüchtig).
13. Es wird empfohlen, als Newline-Konnektor „+“ anstelle von „“ zu verwenden.
14. Es ist verboten, allgemeine Sprachbeschreibungen zu verwenden. Wenn Sie die Informationen sehen, können Sie den Fehler sofort lokalisieren. Geben Sie beispielsweise „Dieser Benutzer existiert nicht“ ein „anstelle von „Die vom Hintergrund zurückgegebenen Daten sind falsch“, „Netzwerk-Timeout“.