1. Programmierstandards
1.1 Projektstruktur
---/html/ |---- /index |---- /index/index.html 首页 |---- /user/ 与用户相关的页面 |---- /user/login.html 登录页 ---/css/ |---- /base.css 重置浏览器样式 |---- /page 逻辑页面的css |---- /page/pagename.css 单独书写的css |---- /common.css css通用样式库 ---/js/ |---- /lib 公用组件 |---- /lib/jquery.2.2.3.min.js 调用jq库文件 |---- /page 逻辑页面的js |---- /page/pagename.js 单独书写的js |---- /common.js 公用方法 ---/img/ |---- /page 页面对应的图片 |---- /page/wap 手机端图片夹 |---- /page/wap/wap_icon.png 手机端图标 |---- /logo.png 公用图片
1.2 Namenskonventionen für Projekte
Projekt: Benennen Sie es mit dem entsprechenden englischen Wort für das Projekt
Dateien und Ordner:
- Nur englische Kleinbuchstaben und Bindestriche (Mittelstriche) sind erlaubt, keine anderen Zeichen dürfen vorkommen, z. B. login, my-order
- Aus `/lib` aufgerufene Dateien müssen eine Versionsnummer enthalten, komprimierte Dateien müssen das Schlüsselwort `min` enthalten, andere Plugins dürfen es weglassen, z. B. `/lib/jquery.1.9.1.js`
1.3 Format & Kodierung
- Textdateien: `.xxx` UTF-8_(ohne BOM)_-Kodierung
- Bilddateien: `.png` _(PNG-24)_ `.jpg` _(Kompressionsrate 8-12)_
- Animierte Bilder: `.gif`
- Komprimierte Dateien: `.tar.gz` `.zip` `.rar`
2. CSS-Standards
2.1 CSS-Namenskonventionen
- Alle Namen sollten englische Wörter in Kleinbuchstaben verwenden
- Verwenden Sie keine einfachen Richtungswörter direkt als Namen, wie "left", "bottom"
- Kürzen Sie Wörter nicht ab, es sei denn, sie sind unmittelbar verständlich
- Lange Namen oder Ausdrücke können Unterstriche als Verbindungszeichen verwenden
- Vermeiden Sie übermäßige Selektor-Verschachtelungsebenen; bleiben Sie unter 3 Ebenen
- Verwenden Sie IDs nicht willkürlich; IDs sollten nach Bedarf verwendet und nicht übermäßig eingesetzt werden
- Verwenden Sie CSS-Kurzschreibweisen wie padding:0 10px 5px 5px usw. Dies vereinfacht den Code und verbessert das Leseerlebnis des Benutzers.
Die Namensreferenz ist wie folgt:
| CSS-Stilbenennung | Beschreibung |
|---|---|
| Übliche Webseiten-Benennung | |
| wrapper | Äußerer Seiten-Wrapper, der die Gesamtlayoutbreite steuert |
| Container oder Inhalt | Container, verwendet für die äußerste Ebene |
| layout | Layout |
| head, header | Header-Bereich |
| foot, footer | Footer-Bereich |
| nav | Hauptnavigation |
| sub_nav | Sekundäre Navigation |
| menu | Menü |
| sub_menu | Untermenü |
| side_bar | Seitenleiste |
| sidebar_l, sidebar_r | Linke Seitenleiste oder rechte Seitenleiste |
| main | Hauptteil der Seite |
| -Tag hinzu | Tag |
| msg Nachricht | Prompt-/Tipp-Nachricht |
| Tipps | Tipps/Tricks |
| Abstimmung | Abstimmung |
| friendlink | Freundschaftslinks |
| title | Title |
| summary | Zusammenfassung/Abstract |
| login_bar | Anmeldeleiste |
| search_input | Sucheingabefeld |
| hot | Beliebte Themen/Trends |
| search | Suche |
| search_output | Die Suchausgabe ähnelt den Suchergebnissen |
| search_bar | Suchleiste |
| search_results | Suchergebnisse |
| Copyright | Copyright-Informationen |
| branding | Warenzeichen |
| logo | Website-Logo |
| site_info | Website-Informationen |
| site_info_legal | Impressum |
| site_info_credits | Glaubwürdigkeit/Vertrauen |
| join_us | Mach mit |
| partner | Partner |
| service | Dienste |
| registrieren | Registrierung |
| arr arrow | Pfeil |
| Gilde | Anleitung |
| site_map | Sitemap |
| Liste | Liste |
| home_page | Startseite |
| sub_page | Sekundär-/Unterseiten |
| Werkzeug, Symbolleiste | Symbolleiste |
| drop | Dropdown |
| dorp_menu | Dropdown-Menü |
| status | Status |
| scroll | Scrollen |
| tab | Tab-Seite |
| links rechts zentriert | Links, zentriert, rechts ausrichten |
| news | Neuigkeiten |
| download | Herunterladen |
| Banner | Banner (obere Bannerwerbung) |
2.2 CSS-Schreibstandards
Befolgen Sie die Richtlinie "keine IDs, keine Verschachtelungsebenen, keine Tags", um die Wiederverwendbarkeit effektiv zu verbessern, die Dateigröße zu reduzieren und die Rendering-Effizienz zu verbessern
2.3 CSS-Kommentarformat
Kommentare zur Unterscheidung von Seiten, z. B. /******************************************Produktcenter****************************************/
Modulkommentare, z. B. /*Homepage-Navigationsleiste*/
2.4 Reihenfolge der CSS-Eigenschaften: Nicht streng erforderlich
- Positionierung (z. B. position, top, z-index)
- Box-Modell (z. B. display, box-sizing, width, border)
- Typografisch (z. B. font, line-height, text-align)
- Visuell (z. B. background, color, opacity)
- Sonstiges (z. B. cursor)
Da Positionierung Elemente aus dem normalen Dokumentfluss entfernen und auch boxmodellbezogene Stile überschreiben kann, wird sie an erster Stelle platziert. Das Box-Modell bestimmt Größe und Position der Komponente, daher wird es an zweiter Stelle platziert. Andere Eigenschaften wirken sich nur auf das Innere der Komponente aus oder beeinflussen die ersten beiden Gruppen von Eigenschaften nicht, daher werden sie zuletzt platziert.
2.5 CSS-Formatierung
In einem nicht umbrechenden Stil schreiben, um die Schreibgeschwindigkeit zu erhöhen
.box{background: none repeat scroll 0 0 transparent;bottom: 11px;position: relative;width: 22px;z-index: 33;}
2.6 CSS-Schriftmaßeinheiten
- px ist ein Pixel (Pixel), eine relative Längeneinheit. Das Pixel px ist relativ zur Bildschirmauflösung des Monitors.
- em ist eine relative Längeneinheit. Sie ist relativ zur Schriftgröße des Textes innerhalb des aktuellen Objekts. Wenn die Schriftgröße des aktuellen Inline-Textes nicht manuell festgelegt wurde, ist sie relativ zur Standard-Schriftgröße des Browsers.
- rem ist ebenfalls eine relative Längeneinheit, aber sie ist nur relativ zum HTML-Wurzelelement.
- vw repräsentiert 1% der Viewport-Breite. Wenn die Viewport-Breite 1000px beträgt, dann ist 50vw = 500px
- vh repräsentiert einen Prozentsatz der Viewport-Höhe. Wenn die Viewport-Höhe 800px beträgt, dann ist 50vh = 400px
- Hinweise für die Verwendung in Firmenprojekten: Bestehende Projekte verwenden alle px als Einheit. Es wird jetzt empfohlen, rem, vw, vh als Einheiten zu verwenden
3. JS-Standards
3.1 JS-Namenskonventionen
3.1.1 Benennung von JS-Variablen
Benennungsmethode: Lower Camel Case
Namenskonvention: Das Präfix sollte ein Substantiv sein. (Funktionsnamen haben Verbpräfixe, um Funktionen von Variablen zu unterscheiden)
Benennungsvorschlag: Versuchen Sie, den Typ im Variablennamen widerzuspiegeln, z. B. length, count usw. für Zahlentypen; und Namen, die name, title enthalten, für String-Typen.
Beispiel
// 好的命名方式 var maxCount = 10; var tableTitle = 'LoginTable'; // 不好的命名方式 var setCount = 10; var getTitle = 'LoginTable';
3.1.2 Benennung von JS-Funktionen
Benennungsmethode: Lower Camel Case
Namenskonvention: Das Präfix sollte ein Verb sein
Benennungsvorschlag: Übliche Verbkonventionen können verwendet werden
| Verb | Bedeutung | Rückgabewert |
| can | Bestimmt, ob eine Aktion ausgeführt werden kann (Berechtigung) | Die Funktion gibt einen booleschen Wert zurück. true: ausführbar; false: nicht ausführbar |
| has | Bestimmt, ob ein bestimmter Wert enthalten ist | Die Funktion gibt einen booleschen Wert zurück. true: enthält diesen Wert; false: enthält diesen Wert nicht |
| ist | Bestimmt, ob es ein bestimmter Wert ist | Die Funktion gibt einen booleschen Wert zurück. true: es ist ein bestimmter Wert; false: es ist kein bestimmter Wert |
| get | Ruft einen bestimmten Wert ab | Die Funktion gibt einen nicht-booleschen Wert zurück |
| set | Setzt einen bestimmten Wert | Kein Rückgabewert, gibt zurück, ob das Setzen erfolgreich war, oder gibt ein verkettbares Objekt zurück |
| load | Lädt einige Daten | Kein Rückgabewert oder gibt das Ergebnis zurück, ob das Laden abgeschlossen ist |
3.1.3 Benennung von JS-Konstanten
Benennungsmethode: Nur Großbuchstaben
Benennungskonvention: Zur Benennung Großbuchstaben und Unterstriche kombiniert verwenden; Unterstriche werden zur Trennung von Wörtern verwendet
Beispiel
var MAX_COUNT = 10; var URL = 'http://www.example.com';
3.1.4 Benennung von JS-Dateien
Verwenden Sie Bindestriche (-) oder Punkte (.) als Trennzeichen; Punkte werden empfohlen. Verwenden Sie vorzugsweise englische Kleinbuchstaben; verwenden Sie weder andere Symbole noch erweiterte Zeichen. Beispielsweise kann die Quelldatei von jQuery UI 1.9.0 "jquery-ui-1.9.0.js" genannt werden
Verwenden Sie die Erweiterung .js, die die beste Kompatibilität bietet. Tatsächlich funktioniert jede Erweiterung, solange sie vom Typ Text ist und korrekt kodiert wurde.
Verwenden Sie Punkte, um untergeordnete Beziehungen in Namen anzugeben, wobei der größere Geltungsbereich zuerst steht. Beispielsweise kann das Formular-Plugin Form von jQuery jquery.form.js genannt werden.
3.2 JS-Kommentarformat
Verwenden Sie mehrzeilige Kommentare, beginnend mit /* und endend mit */
3.3 JS-Hinweise
Formatierung
- JS-Einrückung bei Zeilenumbrüchen: Tab verwenden (auf 4 Leerzeichen erweitert)
- Zeilen mit einem Semikolon `;` beenden
Leistung
- Verwenden Sie möglichst lokale Variablen statt globaler Variablen
- Verwenden Sie möglichst den Verkettungsstil
- Minimieren Sie DOM-Aufrufe
- Platzieren Sie JS-Skripte am Ende der Seite
- Verwenden Sie jQuery's data zum Speichern und Abrufen von Daten, um DOM-Operationen zu reduzieren
- Verwenden Sie die on-Methode zum Binden von Ereignissen; dies ist die von jQuery empfohlene Vorgehensweise
- Selektorwahl: Verwenden Sie möglichst keine Tag-Selektoren; wenn ein ID-Selektor verwendet werden kann, verwenden Sie keinen Klassen-Selektor
4. HTML-Standards
4.1 Standards für die Tag-Verwendung
Minimieren Sie die Tag-Hierarchie
Doppelte Tags müssen geschlossen werden; einzelne Tags werden mit einem Schrägstrich geschlossen
Die erste Zeile von HTML sollte einheitlich den HTML5-Standard <!DOCTYPE html> verwenden
Verwenden Sie für Tags einheitlich das Format mit abschließendem Schrägstrich: `<br />` `<hr />` beachten Sie das Leerzeichen dazwischen
Vermeiden Sie veraltete Tags wie: `<font>` `<frame>` `<s>`
Standardformat des `<img>`-Tags: `<img src="../index.html" alt="DefaultwhentextCharacter" />`
Standardformat des `<a>`-Tags: `<a href="../index.html" title="LinksName">xxx</>` Hinweis: `target="_blank"` hängt von den Anforderungen ab
Bei style, link, script kann das type-Attribut weggelassen werden, da text/css bzw. text/javascript ihre jeweiligen Standardwerte sind
4.2 HTML-Kommentare
<!--内容--> <div class="content"> <p>content</p> </div>
4.3 Hinweise
Versuchen Sie bei mobilen responsiven Layouts, flexible Layouts statt Prozentangaben zu verwenden
`css`-Dateien sollten alle im head platziert werden
Einrückung bei HTML-Zeilenumbrüchen: Tabulatorzeichen verwenden
Andere Effekt-`js`- und `statistics code`-Dateien sollten am Ende platziert werden
Mobile Seiten sollten bei 750px entworfen werden, mit Anzeigeeffekten bei 375px
5. Bildstandards
5.1 Bildstandards
Bildgröße: Beim Slicen von Bildern das Webformat verwenden, um die Dateigröße zu reduzieren
Bildabmessungen: immer ganze Zahlen verwenden, z. B. 20X20, 50X50
Bildzusammenführung: Kleine Bilder müssen zusammengeführt werden, und die entsprechenden PSD-Dateien sollten für spätere Änderungen gespeichert werden
Originallink: https://lingdianit-com.github.io/Front-End-Standards/