Schreiben von qualitativ hochwertigem Code – Praxisbuchauszüge zur Web-Frontend-Entwicklung
|
(Teil 4) Webstandards bestehen aus einer Reihe von Standards. Das Kernkonzept besteht darin, Struktur, Stil und Verhalten von Webseiten zu trennen, sodass es in drei Teile unterteilt werden kann: Strukturstandards, Stilstandards und Verhaltensstandards. Stilstandards – XML-Standards, XHTML-Standards, HTML-Standards; Stilstandards – CSS-Standards; Verhaltensstandards – DOM-Standards und ECMAscript-Standards; (P23)CSS-Layout ist allgemein als Div + CSS-Layout oder (X)HTML + CSS-Layout bekannt. Die Kernidee besteht darin, CSS zu verwenden, um den Stil von Elementen auf einer Webseite zu steuern, einschließlich Position, Größe, Farbe usw. (Seite 26) Das CSS-Layout ist nur ein Teil der Webstandards. Von den drei Elementen HTML, CSS und Javascript ist HTML das wichtigste, der Schwerpunkt liegt auf der Struktur und Stile werden verwendet, um die Struktur zu ändern. Bestimmen Sie zunächst das HTML, legen Sie die semantischen Standards fest und wählen Sie dann das entsprechende CSS aus. (P27) Der Browser gibt einen Standardstil basierend auf der Semantik des Tags vor. (P29) Web Developer – Plug-In zum Debuggen von Webseiten (P43) Versuchen Sie an Stellen, an denen die Semantik nicht offensichtlich ist und entweder <P> oder <div> verwendet werden kann, <P> zu verwenden, da <P> standardmäßig über einen oberen und unteren Abstand verfügt und nach dem Entfernen des Stils besser lesbar ist, was der Kompatibilität mit speziellen Terminals zugutekommt. (Seite 46) Wenn Sie die DTD-Deklaration weglassen, analysiert Firefox die Webseite dennoch gemäß dem Standardstil, aber IE (einschließlich IE6, IE7 und IE8) löst den Quirks-Modus aus. Eine Möglichkeit, CSS zu organisieren - base.css + common.css + page.css (P58) Module sollten nicht dieselben Teile wie andere Module enthalten. Wenn es gemeinsame Teile gibt, sollten diese extrahiert und in unabhängige Module aufgeteilt werden. (P60) Module sollten so einfach wie möglich sein und gleichzeitig ihre Anzahl so gering wie möglich gehalten werden, um die Wiederverwendbarkeit zu verbessern. (P71) Das Klassenattribut im HTML-Standard unterscheidet sich vom ID-Attribut. Sie können nur eine ID haben, aber mehrere Klassen, getrennt durch Leerzeichen. (P81) Wenn Sie nicht sicher sind, ob die oberen und unteren Ränder eines Moduls besonders stabil sind, schreiben Sie diese am besten nicht in die Modulklasse, sondern verwenden Sie eine Kombination von Klassen und hängen Sie für die oberen und unteren Ränder separate atomare Klassen an die Rahmen; (P81) Die Gewichtsregel lautet: Das Gewicht eines HTML-Tags ist 1, das Gewicht einer Klasse ist 10 und das Gewicht einer ID ist 100; (P82) Wenn die CSS-Selektoren das gleiche Gewicht haben, folgt der Stil dem Näherungsprinzip. Es wird der Stil des zuletzt definierten Selektors verwendet. Das „Näherungsprinzip“ bezieht sich auf die Reihenfolge, in der die Selektoren definiert werden, nicht auf die Reihenfolge, in der die Klassennamen definiert werden. (P84) Um sicherzustellen, dass Stile problemlos überschrieben werden können und um die Wartbarkeit zu verbessern, sollten CSS-Selektoren das geringstmögliche Gewicht haben. (P85) Je weniger Unterselektoren Sie verwenden, desto mehr Klassen müssen Sie hinzufügen. (P87) CSS Sprite „Image Flip Technology“ – kombinieren Sie mehrere Bilder zu einem und verwenden Sie dann die Eigenschaft „Hintergrundposition“, um den erforderlichen Teil anzuzeigen; (P88) Ob CSS Sprite verwendet wird, hängt hauptsächlich vom Website-Verkehr ab. (P89) Im Allgemeinen wird empfohlen, möglichst viel „Klasse“ und weniger „ID“ zu verwenden. (Seite 93) CSS-Hacks 1. IE-Methode für bedingte Kommentare <!-- [if IE]> ...... <![endif]> 2. Selektorpräfixmethode *html *+html 3. Präfixmethode für Stilattribute "_" "*" (P94) Die vier Zustände des <a>-Tags werden sortiert – Hassliebe-Prinzip – L(link)ov(Visible)e, H(Hover)a(Active)te; (Seite 95) Elemente auf Blockebene: div, p, form, ul, ol, li Inline-Elemente: span, strong, em Elemente auf Blockebene belegen eine einzelne Zeile und ihre Breite entspricht standardmäßig automatisch der Breite ihres übergeordneten Elements. Inline-Elemente belegen keine einzelne Zeile. Benachbarte Inline-Elemente werden in derselben Zeile angeordnet, bis eine Zeile voll ist, und dann werden sie in die nächste Zeile umgebrochen. Die Breite der Zeile ändert sich mit dem Inhalt des Elements. (Seite 95) Elemente auf Blockebene können Breiten- und Höhenattribute festlegen. Das Festlegen von Breiten- und Höhenattributen für Inline-Elemente ist ungültig. (P96) Elemente auf Blockebene können Rand- und Abstandsattribute festlegen. Bei Inline-Elementen erzeugen nur horizontale Ränder und Polsterungen Randeffekte. (P97) Die CSS-bezogene Eigenschaft für Elemente auf Blockebene und Inline-Elemente ist „display“, wobei Elemente auf Blockebene „display: block“ und Inline-Elemente „display: inline“ entsprechen. Sie können zwischen Blockelementen und Inline-Elementen wechseln, indem Sie die Anzeigeeigenschaft ändern. (Seite 103) Sowohl „position: relation“ als auch „position: absolute“ können die Position eines Elements in einem Dokument ändern. Durch Festlegen von „position: relative“ und „position: absolute“ können die Eigenschaften „left“, „top“, „right“, „bottom“ und „z-index“ des Elements aktiviert werden (diese Eigenschaften sind standardmäßig nicht aktiviert und haben auch dann keine Auswirkung, wenn sie festgelegt sind). Standardmäßig befinden sich alle Elemente am Z-Index 0. Wenn Sie „position: relative“ oder „position: absolute“ festlegen, wird das Element „schwebend“. Position: relativ – behält seine Position bei Z-Index: 0; position: absolute – es wird vollständig aus dem Dokumentfluss entfernt und bleibt nicht länger ein Platzhalter auf der Ebene z-index: 0. Seine linken, oberen, rechten und unteren Werte sind relativ zu seinem nächsten Vorgängerelement, für das position: relative oder position: absolute festgelegt ist. Wenn für keines der Vorgängerelemente position: relative oder position: absolute festgelegt ist, sind sie relativ zum Body-Element; (Seite 104) Das Float-Elementattribut bewirkt nicht, dass das Element in eine andere Z-Index-Ebene „schwebt“. Es behält die Anordnung des Elements auf der Ebene „Z-Index: 0“ bei. Das Float kann die Koordinaten des Elements nicht präzise über die Attribute „left“, „top“, „right“ und „bottom“ steuern. Es kann das „linksschwebende“ und „rechtsschwebende“ Element in derselben Ebene nur über „float: left“ und „float: right“ steuern. Flaot ändert den normalen Dokumentfluss und wirkt sich auf umgebende Elemente aus. Solange eine der Optionen position: absolute, float: left oder float: right festgelegt ist, wird das Element im Modus display: inline-block angezeigt. Länge und Breite können festgelegt werden, und die Standardbreite füllt das übergeordnete Element nicht aus. Auch wenn display: inline oder display: block explizit festgelegt ist, ist es dennoch ungültig. Es ist erwähnenswert, dass position: relative den Anzeigetyp nicht implizit ändert; (Seite 104) Zentrieren Sie die Inline-Elemente horizontal – text-align: center Blockelemente horizontal zentrieren (Breite bestimmen) - margin-left: auto und margin-right: auto (Seite 111) Es gibt in CSS eine Vertical-Align-Eigenschaft zur vertikalen Zentrierung, diese Vertical-Align-Eigenschaft wird jedoch nur wirksam, wenn das übergeordnete Element <td> oder <th> ist. Standardmäßig setzt das <td>-Tag den vertikalen Ausrichtungswert implizit auf die Mitte. (S. 114) Hinweis: Der Inhalt von main ist wichtiger als der der Seitenleiste. Unabhängig davon, was sich links oder rechts von der Seitenleiste befindet, sollte das HTML-Tag von main vor der Seitenleiste geladen werden. (P136) Durch das Umschließen des Skripts mit einer anonymen Funktion können globale Variablen effektiv gesteuert und potenzielle Konflikte vermieden werden. (Seite 147) Durch das Hinzufügen der erforderlichen Kommentare kann die Wartbarkeit des Codes erheblich verbessert werden, was für die Teamarbeit noch wichtiger ist. Um zu verhindern, dass JS Konflikte verursacht, müssen Sie die Verbreitung globaler Variablen vermeiden, Namespaces richtig verwenden und dem Code die erforderlichen Kommentare hinzufügen. (P153) Das Fensterobjekt löst das Onload-Ereignis aus, nachdem alle Elemente der Webseite geladen wurden. (P153) DOMReady stellt nur fest, ob alle DOM-Knoten auf der Seite generiert wurden. Ob der Inhalt der untergeordneten Knoten geladen wurde, spielt dabei keine Rolle. DOMReady wird schneller ausgelöst als window.onload; (P159) CSS wird im Seitenkopf platziert, Javascript wird im Seitenfuß platziert; (P174) attachEvent ist eine von IE unterstützte Methode, während addEventListener eine von Firefox unterstützte Methode ist. Die Methoden attachEvent und addEventListener unterstützen die Überlagerung von Listener-Verarbeitungsfunktionen, anstatt sie zu überschreiben. (P185) Viele Open-Source-Javascript-Bibliotheken können uns leistungsstarke Basis- und gemeinsame Ebenen bereitstellen. Zu den gängigsten Javascript-Bibliotheken gehören jQuery und YUI. (Seite 186) jQuery selbst ist in zwei Teile unterteilt: die jQuery-Kerndateien und die jQuery-UI-Dateien. jQuery-UI-Dateien sind von jQuery-Kerndateien abhängig; Die jQuery-Kerndatei stellt Basisebenenfunktionen und einige allgemeine Ebenenfunktionen bereit, und die jQuery-UI-Datei stellt allgemeine Ebenenfunktionen bereit. (Seite 194) Da dieselbe ID nur einmal auf einer Seite vorkommen kann, ist sie nicht zum Abrufen einer Gruppe von DOM-Knoten mit „ähnlichen Funktionen“ geeignet. Die Verwendung von Tag-Namen zum Abrufen von DOM-Knoten führt dazu, dass das Programm zu eng an die HTML-Struktur gekoppelt ist. (P196) Eine ID kann auf derselben Seite nur einmal erscheinen. Wenn Ihr Programm also an mehreren Stellen wiederverwendet werden muss, dürfen Sie die ID nicht als Hook für Javascript verwenden, um DOM-Knoten zu erhalten. (P198) Komponenten müssen einen Stammknoten angeben, um die Unabhängigkeit jeder Komponente aufrechtzuerhalten. (P205) Wenn ein Faktor in einer Funktion sehr instabil ist, können wir ihn von der Funktion trennen und als Parameter übergeben, wodurch wir den instabilen Faktor von der Funktion entkoppeln. (Seite 223) Der vollständige englische Name für objektorientierte Architektur lautet „Object Oriented“, abgekürzt „OO“. OO umfasst eigentlich OOA (objektorientierte Analyse), OOD (objektorientiertes Design) und OOP (objektorientierte Programmierung). Die objektorientierte Syntax entspricht nur der OOP und ist nur ein Teil von OO; OOA und OOD sind Konzepte der objektorientierten Programmierung, die nichts mit bestimmten Sprachen zu tun haben, während OOP ein Tool der objektorientierten Programmierung ist, das sich auf die ausgewählte Sprache bezieht. OOA und OOD sind unabhängig von der jeweiligen Anforderungssprache und können im Allgemeinen problemlos sprachübergreifend wiederverwendet werden. (P224) Aus einer Makroperspektive sind es nicht OOP, sondern OOA und OOD, die die Qualität eines Programms bestimmen. (P225) Funktionen in Javascript können als normale Funktionen oder als Klassen verwendet werden. Wenn sie als Klasse fungieren, tragen sie auch die Verantwortung eines Konstruktors. (P228) Die mit diesem xxx definierten Eigenschaften sind öffentlich, während die mit var xxx definierten Eigenschaften privat sind; (P230) Verhaltensweisen in Prototypen müssen öffentlich sein und dürfen nicht auf private Eigenschaften zugreifen. (P231) Privates Verhalten, das im Konstruktor platziert wird, erreicht einen wahren Anschein von Existenz; (P253) Ob in einem Klassenkonstruktor oder in einem Prototyp, dies bezieht sich auf das instanziierte Objekt; (P239) Als Funktion bezieht sich „this“ auf das Fensterobjekt, während als Klassenkonstruktor „this“ auf das instanziierte Objekt verweist. (P259) Zum Lesen allgemeiner Attribute wird node.xxx verwendet. Zum Lesen benutzerdefinierter Attribute wird node.getAttribute("xxx") verwendet. |
>>: Zusammenfassung des Wissens zu CSS-Injection
Artikel empfehlen
CSS imitiert Fernbedienungstasten
Hinweis: Diese Demo wurde in der Miniprogrammumge...
Das Problem der Verwendung von Slots durch Vue+tsx wird nicht behoben
Inhaltsverzeichnis Vorwort Finden Sie das Problem...
So berechnen Sie mit Linux den von zeitgesteuerten Dateien belegten Speicherplatz
Öffnen Sie den Editor für geplante Aufgaben. Cent...
So lösen Sie das Problem, dass MySQL nicht gestartet werden kann, da keine PID erstellt werden kann
Problembeschreibung Die MySQL-Startfehlermeldung ...
JavaScript zum Erzielen eines einfachen Drag-Effekts
In diesem Artikel wird der spezifische JavaScript...
Sie müssen wahrscheinlich keine Switch-Anweisungen in JavaScript verwenden
Inhaltsverzeichnis Kein Schalter, keine komplexen...
Lösen Sie das Problem, dass Navicat keine Verbindung zu MySQL auf dem Linux-Server herstellen kann
Am Anfang war ich traurig. Die Screenshots sind w...
Installations- und Bereitstellungstutorial der neuesten MySQL-Version 5.7.17 (64-Bit-ZIP-Green-Version) unter Win 8 oder höher
Zunächst einmal spielt der Blogger die Community-...
So mounten Sie eine neue Festplatte auf einem Linux-Cloud-Server
Hintergrund Im Unternehmen wurde ein neuer Server...
Fallstricke bei der neueren Version des IDEA2021 Tomcat10-Servlets
Da die Version, die ich beim Lernen verwendet hab...
Eine kurze Erläuterung der Unterschiede zwischen den verschiedenen Möglichkeiten zum Ausführen von .sh-Dateien in Ubuntu
Vorwort Verschiedene Methoden zur Skriptausführun...
Zusammenfassung gängiger MySQL-Funktionsbeispiele [Aggregatfunktionen, Zeichenfolgen, Zahlen, Zeit- und Datumsverarbeitung usw.]
Dieser Artikel beschreibt die häufig verwendeten ...
RHEL7.5 MySQL 8.0.11 Installations-Tutorial
Dieser Artikel zeichnet das Installationstutorial...
So entfernen Sie Wagenrücklaufzeichen aus Text in Linux
Machen Sie sich keine Sorgen, wenn Sie das Wagenr...
Vorgehensweise bei der Installation einer virtuellen VMware Workstation-Maschine
Virtuelle Maschinen sind eine sehr praktische Tes...