Lernleitfaden für Frontend-Entwicklung

Dieser Artikel ist lang, aber er ist wirklich voller praktischer Inhalte. Er beschreibt einige Spezifikationen und Empfehlungen für die Verwendung von HTML, JavaScript, CSS und jQuery. Frontend-Entwickler können diesen Artikel sorgfältig lesen und ihre üblichen Gewohnheiten vergleichen, um zu sehen, ob es Verbesserungspotenzial gibt...

HTML

Was hat es mit DOCTYPE auf sich?

Kein DOCTYPE zu definieren, ist ein Verbrechen, das mit dem Tod bestraft wird. Du hast vielleicht früher den folgenden DOCTYPE verwendet, aber du solltest wissen, dass ein prägnanterer und klarerer Code ihn inzwischen ersetzt hat.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Verwende idealerweise den HTML5-DOCTYPE. Alle modernen Browser unterstützen ihn, und sogar Browser, die HTML5 nicht unterstützen, wie IE6 und IE7, wechseln deswegen in den Standards-Modus. SieheQuelle。

<!DOCTYPE html>

Schreibe valides und semantisch klares Markup

Website-Code mit sauberem, semantisch klarem HTML zu schreiben, ist etwas, das wir immer angestrebt haben. Manchmal stellen wir fest, dass uns die Art und Weise, wie frühere Leute Seiten konfiguriert haben, einschränkt, oder manchmal schreiben wir HTML-formatierte E-Mail-Vorlagen. Aber weiche niemals von HTML-Standards ab, selbst um einen bestimmten Browser-Kompatibilitätsfehler zu beheben.

Alle Überschriften sollten mit<h2>beginnen und hierarchisch erstellt werden. Textabsätze sollten immer in<p>Tags platziert werden, und so weiter. Wenn du HTML mit klarer Semantik schreibst, werden die resultierenden Seiten sauberer, prägnanter und für Suchmaschinen-Crawler leichter zu analysieren sein. Das ist die einfachste SEO-Korrektur, die du vornehmen kannst.

Sieh dir die folgenden Absätze an. Welcher ist deiner Meinung nach sauberer? Dieser hier?

<span class="sectionHeading">A Heading</span>
<br /> <br />
Lorem ipsum dolor sit amet. ...
<br /> <br />

Oder dieser hier?

<h2>A Heading</h2>
<p>
    Lorem ipsum dolor sit amet. ...
</p>

Umgang mit Klicks mit der mittleren Maustaste

Einer der frustrierendsten Usability-Fehler in modernen Webanwendungen ist die Veränderung der Hyperlink-Funktionalität. Einige Elemente, die wie Hyperlinks aussehen, haben möglicherweise ihre Klick-Funktionalität über JavaScript zugeordnet, was Klicks mit der mittleren Maustaste zerstört (Öffnen der Linkseite in einem neuen Tab). Selbst wenn sie in einem neuen Tab geöffnet werden können, tragen sie nur einen#href, was dich zurück auf dieselbe Seite bringt.

Eine beliebte moderne Website, die dieses Problem perfekt veranschaulicht, ist Twitter. In ihrer gesamten App führt das Klicken mit der mittleren Maustaste auf einen Benutzernamen oder Avatar zu völlig anderen Ergebnissen.

<!-- 旧的方式，破坏网页语义 -->
<a href="../index.html"></a>

<!-- 如果鼠标点击不能产生一个页面，那就不是超链接 -->
<span class="link" role="link"></span>

Eine weitere Alternative ist die Verwendung von#guided paths, die gewöhnliche URLs auf#guided links abbilden und dann Seitenfragmente per AJAX abrufen. Bibliotheken, die diese Funktionalität bereitstellen, sollten in der Lage sein, die Seite bei einem Mittelklick normal anzuzeigen oder den Seiteninhalt bei einem Linksklick in einen vorgesehenen Bereich zu laden. Seien Sie jedoch vorsichtig; viele Leute glauben, dass#-Links brechen Webanwendungen。

Verwenden Sie Microformats zur Darstellung von Kontaktinformationen

Microformats sind eine Möglichkeit, Kontaktinformationen maschinenlesbar zu machen. Die hCard-Klasse (nicht vCard) wird verwendet, um den Typ des in einem Element enthaltenen Inhalts zu definieren. Dieser Inhalt kann von Browsern extrahiert und hervorgehoben werden.

<span class="tel">
    <span class="type">home</span>:
    <span class="value">+1.415.555.1212</span>
</span>

Wenn Sie jemals eine Webseite durchsucht haben, die dieses Format verwendet, werden Sie feststellen, dass Programme wie Skype leicht erkennen können, welche Nummern auf der Seite Telefonnummern sind. Safari auf iOS-Geräten kann etwas Ähnliches tun.

Weitere Informationen zu Microformats finden Sie unterhttp://microformats.org/wiki/hcard

Bilder benötigen 'Alt'-Text

<img>Das Tag benötigtalt-Text, um die Lesbarkeitsanforderungen zu prüfen und zu erfüllen. Imalt-Attribut muss der Text beschreiben können, was das Bild anzeigt oder welchen Effekt es erzielen soll, es sei denn, das Bild ist unwichtig.

Wenn das Bild lediglich ein Aufzählungspunkt in einer Liste oder ein anderes unbedeutendes Symbol ist, ist es am besten, demalt-Attribut eine leere Zeichenkette zuzuweisen, es aber trotzdem beizubehalten. Auf diese Weise ignorieren Screenreader es, anstatt 20 Mal hintereinander "Aufzählungspunkt" zu lesen.

<img src="dog.gif.html" alt="Fido and I at the park!" />
<!-- 很好，描述清晰 -->

<img src="bullet.gif.html" alt="bullet" />
<!-- 不好，显得多余 -->

<img src="bullet.gif.html" alt="" />
<!-- 好 -->

Verwenden Sie table-Tags nur für tabellarische Daten

Das table-Tag sollte ausschließlich zur Anzeige tabellarischer Daten verwendet werden. Die einzige Ausnahme ist das Verfassen von HTML-formatierten E-Mails, bei denen table die einzige Layoutmethode sein kann, die von einigen problematischen E-Mail-Clients unterstützt wird.

Aus Gründen der Lesbarkeit sollten Tabellenüberschriften immer<th>-Elemente verwenden. Denken Sie auch daran,cellpadding, cellspacingundborderder Wert von ... bis0, weil diese Stile leichter konsistent zu halten sind, wenn sie per CSS gesteuert werden.

<table cellpadding="0" cellspacing="0" border="0">
    <thead>
        <tr>
            <th>
                Cell Header
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                Cell Item
            </td>
        </tr>
    </tbody>
</table>

Verwenden Sie jQuery und jQuery UI Widgets

jQuery und jQuery UI verhalten sich in verschiedenen Browsern in Bezug auf Aussehen und Funktionalität nahezu identisch. jQuery UI ist so konzipiert, dass es WAI WCAG 2.0 und WAI ARIA entspricht, sodass die Übernahme dieses Frameworks alle Unsicherheiten von Plugins oder Skripten vermeiden kann, die auf Ihrer Website ausgeführt werden.

JavaScript

Code-Abstände und Formatierung

Jede Diskussion über Codeformatierung, Leerraum und Platzierung geschweifter Klammern kann hitzige Debatten auslösen. Die einfachste Regel ist hier, finde ich: Wenn Sie nicht bereit sind, die gesamte Codedatei neu zu formatieren, respektieren und bewahren Sie das Format der vorhandenen Codedatei. Das bedeutet, dass Ihr Code geschweifte Klammern ebenfalls ohne Zeilenumbruch beibehalten sollte, wenn Sie in einer JS-Datei geschweifte Klammern ohne Zeilenumbruch geschrieben sehen. Wenn Ihr Code nicht mit dem Rest der Codedatei übereinstimmt, sollte Ihr Code den Code-Review-Prozess nicht bestehen.

Konsistente Codeformatierung macht Code lesbarer und bedeutet außerdem, dass er sich leicht mit Suchen/Ersetzen-Befehlen ändern lässt. Glücklicherweise ähneln die Programmiergewohnheiten, die wir entwickelt haben, sehr dem offiziell empfohlenen jQuery-Stil. Es gibt geringfügige Unterschiede, aber das sind persönliche Ansichten oder Dinge, die wir als nicht wartbar empfinden. SiehejQuery Core Style Guide

Zeichenabstand

// 不好
if(blah==="foo"){
    foo("bar");
}

// 好 :)
if (blah === "foo") {
    foo("bar");
}

Geschweifte Klammern nicht in eine neue Zeile setzen

// 不好
if (foo)
{
    bar();
}

// 好 :)
if (foo) {
    bar();
}

Immer geschweifte Klammern verwenden

// 不好
if (foo)
    bar();

// 好 :)
if (foo) {
    bar();
}

Umgang mit Zeichenketten

Verwenden Sie für in Anführungszeichen gesetzte Zeichenketten immer doppelte Anführungszeichen. Manche Leute mögen Zeichenketten im C-Stil (einfache Anführungszeichen) wirklich, aber diese Angewohnheit kann zu Stilkonflikten innerhalb von Skripten führen. Die Behandlung von Zeichenketten im C-Stil erfordert, dass leere Zeichenketten und einzelne Zeichen in einfache Anführungszeichen gesetzt werden, während Phrasen und Wörter in doppelte Anführungszeichen gesetzt werden müssen.

Kommentare

Das Bedürfnis, Code wie verrückt mit Kommentaren zu versehen, wird von Managern, Vorgesetzten und anderen angetrieben, die den Code selten anfassen. Dieses Bedürfnis ist nichts weiter als ein Kontrollkästchen in den Leistungskennzahlen der Mitarbeiter, und die dafür aufgewendete Zeit bringt fast keinen Nutzen. Wenn die aufgeschlossenen Entwickler die Vorschläge in diesem Dokument befolgen könnten, würde ihr Code recht lesbar und offensichtlich werden, so sehr, dass das Beschreiben des Codes mit Kommentaren peinlich redundant wäre. Betrachten Sie das folgende Beispiel. Hier ist die boolesche Variable als Frage formuliert, und die Funktion hat einen intuitiven Namen.

if (user.hasPermission) {
    editPage();
}

Zumindest in diesem Szenario sind Kommentare völlig unnötig.

Fälle, in denen Kommentare wichtig sind

In einem Projekt wird es immer bestimmte Teile geben, die schwer nachzuschlagen und zu verstehen sind. Zum Beispiel ein komplexer regulärer Ausdruck oder eine mathematische Funktion, die Winkel berechnet oder zwischen Grad und Bogenmaß umschaltet. Ohne Kommentare darüber werden Junior- oder mittlere Leser keine Ahnung haben, was das Skript bedeutet.

// 校验美国电话号码的正则表达式，号码格式是 (XXX) XXX-XXXX (减号、空格和括号都是可选的，可以有也可以没有)
var phoneRegEx = /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/;

Verwenden Sie immer den Vergleichsoperator ===

Die Verwendung des Vergleichsoperators == kann frustrierende Fehler in Luft auflösen. Sie erlaubt ... inJavaScript GardenDie schwache Typisierung wird darin klar erklärt. Die Verwendung des strikten Vergleichsoperators === führt keine Typumwandlung durch und ermöglicht somit eine strikte Bewertung der Unterschiede zwischen zwei Objekten. Für weitere Details siehe auch hierJavaScript Garden。

var zeroAsAString = "0";

if (zeroAsAString == 0) {
    // 这样也能判断为true，呵呵...
}

if (zeroAsAString === 0) {
    // 判断为false
}

Ausnahme

Beim Vergleich mit null ist der Operator == akzeptabel, weil er sowohl null als auch undefined prüft. Wenn Sie dieses Prinzip nicht vollständig verstehen, empfehle ich dennoch, stattdessen === zu verwenden.

var foo = null;

// foo 是 null, 但 bar 是 undefined ，因为它尚未被声明
if (foo == null && bar == null) {
    // 上面的判断还是成立的
}

Geben Sie bei der Verwendung von .parseInt() immer den zweiten Parameter 'radix' an

Wenn eine Zeichenkette in eine ganze Zahl geparst wird, ist es eine gute Angewohnheit, den zweiten radix-Parameter anzugeben -- er bestimmt, in welche Basis die Zeichenkette umgewandelt wird. Wenn die Zeichenkette am Anfang mit0beginnt, löst sie standardmäßig16Basis als Radix aus.10Diese Basis. Danke an João Moreno für die Dokumentation diesesErratums.。

alert( parseInt("08") ); // alerts: 2

alert( parseInt("08", 10) ); // alerts: 8

Vermeide den Vergleich von true und false

Es ist unnötig, die Werte von true und false direkt zu vergleichen. Manchmal kann es von Vorteil sein, explizit zu sein, aber es ist trotzdem zusätzlicher Code.

if (foo === true) {
    // 用了 === 倒是不错，可这是多余的
}

if (foo) {
    // 赞！
}

if (!bar) {
    // 反过来也赞
}

Vermeide die Verschmutzung des globalen Namensraums

Die übermäßige Abhängigkeit von globalen Variablen ist etwas, wegen dessen sich jeder in unserem Team -- insbesondere ich selbst -- besonders schuldig fühlt. Die Diskussion darüber, warum globale Variablen schlecht sind, ist ziemlich einfach: Sie erhöht die Wahrscheinlichkeit von Skript- und Variablenkonflikten, und Quelldateien und der Namensraum selbst werden mit unzähligen mehrdeutig benannten Variablen gefüllt.

Douglas CrockfordIch bin fest davon überzeugt, dass die Codequalität einer JavaScript-Anwendung an der Anzahl der globalen Variablen gemessen werden kann, die sie verwendet; je weniger, desto besser. Da nicht alles als lokal definiert werden kann (obwohl, um ehrlich zu sein, das, was du gerade in Betracht ziehst, lokal sein kann, also sei nicht faul), musst du Wege finden, deine Variablen zu organisieren, um Konflikte zu vermeiden und die Aufblähung des Namensraums zu minimieren. Der einfachste Ansatz ist, eine einzelne Variable zu verwenden oder die Anzahl der Module zu minimieren, die diese globalen Variablen verwenden. Crockford erwähnte, dass YUI nur eine globale Variable verwendet, YAHOO. In seinem Blogbeitrag"Global Domination"diskutiert er detailliertere Themen.

Betrachte diese Situation: Für kleine Webanwendungen werden globale Variablen häufig verwendet, um Einstellungen auf Anwendungsebene zu speichern. Du kannst ein Objekt mit deinem Projektnamen oder den Einstellungen als Namen definieren, was im Allgemeinen besser ist.

// 被污染的全局命名空间
var settingA = true;
var settingB = false;
var settingC = "test";

// 用 settings 作为对象命名
var settings = {
    settingA: true,
    settingB: false,
    settingC: "test"
}

Wenn wir jedoch die Wahrscheinlichkeit von Konflikten verringern können, indem wir globale Variablen vermeiden, aber Namensräume auf dasselbe vereinheitlichen, würde das dann nicht die Wahrscheinlichkeit von Konflikten zwischen Anwendungen erhöhen? Nun, diese Sorge ist tatsächlich berechtigt. Daher wird empfohlen, dass du deinen eigenen spezifischen Anwendungsnamen als Namensraum für globale Variablen verwendest oder dass du dasselbe Verfahren wie bei jQuery$.noConflict()-Muster verwendest, um deinen Namensraum neu zuzuweisen.

var myAppName = {
    settings: {
        settingA: true
    }
}

//访问全局变量
myAppName.settings.settingA; // true

Verwende camelCase bei der Variablenbenennung

CamelCase-Benennung für JavaScript-Variablen ist in den meisten Programmierumgebungen Standard. Ein Leser wies in den Kommentaren auf die einzige Ausnahme hin: Verwenden Sie Großbuchstaben und Unterstriche, um auf Konstanten zu verweisen.

var X_Position = obj.scrollLeft;

var xPosition = obj.scrollLeft; // 更好，更简洁

SCENE_GRAVITY = 1; // 常量

Schleifenleistung - Array-Länge zwischenspeichern

Schleifen sind wahrscheinlich der wichtigste Teil der JavaScript-Performance-Optimierung. Eine oder zwei Millisekunden innerhalb einer Schleife einzusparen, kann sich insgesamt zu mehreren Sekunden summieren. Ein Trick dabei ist, die Array-Länge zwischenzuspeichern, sodass Sie sie innerhalb der Schleife nicht bei jeder Iteration berechnen müssen.

var toLoop = new Array(1000);

for (var i = 0; i < toLoop.length; i++) {
    // 败家玩意 - 长度会反复算 1000 次你知道不？
}

for (var i = 0, len = toLoop.length; i < len; i++) {
    // 会过日子 - 长度只计算一次，然后缓存了
}

Ausnahme

Wenn Sie über ein Array schleifen, um ein Element zu finden und zu entfernen, ändert dies die Array-Länge. Immer wenn Sie innerhalb einer Schleife Elemente hinzufügen oder entfernen, um die Array-Länge zu ändern, provozieren Sie Probleme. In diesem Fall sollten Sie entweder die Array-Länge nach jeder Änderung zurücksetzen oder sie einfach nicht zwischenspeichern.

Schleifenleistung - Verwenden Sie 'break;' und 'continue;'

Die Fähigkeit, Schleifendurchläufe zu überspringen und aus Schleifen auszubrechen, ist sehr nützlich, um kostspielige Schleifenzyklen zu vermeiden.

Wenn Sie innerhalb einer Schleife suchen, was tun Sie nach einer erfolgreichen Suche? Zum Beispiel: In einer Schleife mit 1000 Elementen finden Sie das Gesuchte auf halbem Weg. Lassen Sie die Schleife dann, egal was passiert, weiter durch die restlichen 500 Elemente iterieren, obwohl Sie wissen, dass die nachfolgenden if-Anweisungen keine Chance haben werden, übereinzustimmen? Nein! Sie sollten auf jeden Fall aus der Schleife ausbrechen!

var bigArray = new Array(1000);

for (var i = 0, len = bigArray.length; i < len; i++) {
    if (i === 500) {
        break;
    }
    console.log(i); // 这样只会输出 0 - 499
}

Ein weiteres Problem ist das Überspringen einer bestimmten Iteration und das anschließende Fortsetzen der Schleife. Obwohl Bedingungen wie ungerade/gerade durchi++Ersetzen miti + 2als eine Möglichkeit der Verwaltung behandelt werden können. Einige Bedingungen müssen jedoch weiterhin speziell erkannt und dann eine Überspring-Operation ausgelöst werden. Alles, was vermeiden kann, den vollständigen Iterationsprozess auszuführen, ist sehr nützlich.

var bigArray = new Array(1000);

for (var i = 0, len = bigArray.length; i < len; i++) {
    if (condition) {
        continue;
    }
    doCostlyStuff();
}

Übergeben Sie nicht zu viele Argumente in Funktionsaufrufen

Schon allein wegen der Lesbarkeit ist der folgende Ansatz schrecklich:

function greet(name, language, age, gender, hairColour, eyeColour) {
    alert(name);
}

Das folgende Beispiel erstellt vorab ein Objekt als Argument oder übergibt ein Inline-Objekt, was viel besser ist.

function greet(user) {
    alert(user.name);
}

greet({
    name: "Bob",
    gender: "male"
});

'this' auf 'self' abbilden

Wenn Sie objektorientierten (OO) JavaScript-Code schreiben, müssen Sie den Gültigkeitsbereich vonthisverstehen. Unabhängig davon, welches Entwurfsmuster Sie zum Erstellen von Pseudoklassen verwenden, ist die Referenz aufthisder einfachste Weg, auf eine Instanz zu verweisen. Wenn Sie beginnen, jQuery-Hilfsmethoden mit Ihren Pseudoklassen zu integrieren, werden Sie bemerkenthisdie Änderung des Gültigkeitsbereichs.

Bob.findFriend("Barry");

Person.prototype.findFriend = function(toFind) {
    // this = Bob
    $(this.friends).each(function() {
        // this = Bob.friends[i]
        if (this.name === toFind) {
            // this = Barry
            return this;
        }
    });
}

Im obigen Beispiel durchläuftthiseine Änderung von einer Referenz aufBobzu einer Referenz auf seinen FreundBarryder Prozess der Referenzierung.diesVerstehendiesdie Änderung seines Werts im Laufe der Zeit ist wichtig. Innerhalb einer Prototypfunktion,Bobes verweist auf die aktuelle Instanz der Pseudoklasse, zu der es gehört (hier in der$.each()-Schleife,thiswird es auf dasite Element des Arrays abgebildet, das geparst wird.

Die Lösung besteht darin,thisden Wert vonselfoder_self neu zuzuordnen.self(ohne den Unterstrich) ist keinreserviertes Wort,es ist tatsächlich windoweine Eigenschaft des Objekts.selfDas Beispiel stammt aus dem jQuery-Quellcode, aber sie haben diesen Fehler ebenfalls erkannt und planen,die aktuelle Situation zu beheben,_selfdas heißt, zu wechseln zuself.selfPersönlich bevorzuge ich weiterhin die Verwendung von

, aus keinem anderen Grund als seiner Einfachheit -- aber es kann einige sehr verwirrende Fehler zutage bringen. Kurz gesagt, die Verwendung von$.each()ist riskant; mit Vorsicht verwenden.thisIm folgenden Beispiel werde ich besser Gebrauch von dem machen.

Bob.findFriend("Barry");

Person.prototype.findFriend = function(toFind) {

    // 就这一次用到了 "this"
    var _self = this;

    $(_self.friends).each(function(i,item) {
        if (item.name === toFind) {
            return item;
        }
    });

}

Kann ich Boolean verwenden?

der Wert.ist, kannKann ich Boolean verwenden?hatBoolean-Variablen müssen anhand ihrer Namen leicht erkennbar sein. Sie können Präfixe wie

isEditing = true;

obj.canEdit = true;

user.hasPermission = true;

Repaints und Reflows minimieren

als Präfix, um eine Frage zu bilden.Repaints und Reflows minimierenRepaints und Reflows hängen mit dem Prozess des erneuten Renderns des DOM zusammen, der auftritt, wenn bestimmte Eigenschaften oder Elemente geändert werden. Ein Repaint wird ausgelöst, wenn das Erscheinungsbild eines Elements geändert wird, ohne das Layout anzupassen.

Nicole Sullivan, in einem umfassenden

Blogbeitrag,

beschreibt diese Änderungen als Stiländerungen wie Änderungen der Sichtbarkeit oder der Hintergrundfarbe. Reflow hingegen ist eine teurere Operation, die durch Änderungen ausgelöst wird, die das Seitenlayout anpassen. Zum Beispiel das Hinzufügen oder Entfernen von Elementen, das Ändern der Breite oder Höhe eines Elements oder sogar das Ändern der Größe des Browserfensters. Der schlimmste Fall ist, dass ein Reflow einen Dominoeffekt verursacht, bei dem auch Vorfahren-, Geschwister- und Kindknotenelemente reflowt werden müssen.arrZweifellos sollten Repaints und Reflows so weit wie möglich vermieden werden, aber wie erreichen wir das?

var myList = document.getElementById("myList");

for (var i = 0, len = arr.length; i < len; i++) {

    myList.innerHTML += "<li>" + arr[i].title + "</li>"; //重新布局 -- 增加到元素

}

Reflow-BeispielforEigentlich ist der folgende Code nicht so schrecklich. Aber nehmen wir zunächst an, dass das Array

10 Elemente hat

var constructedHTML = "";

for (var i = 0, len = arr.length; i < len; i++) {
    constructedHTML += "<li>" + arr[i].title + "</li>"; //没有重新布局 - 增加到字符串
}

document.getElementById("myList").innerHTML = constructedHTML; //在这里重新布局

In der obigeninnerHTML-Schleife löst jede Iteration einen Reflow aus. 10 Iterationen bedeuten 10 Reflows.

Betrachten Sie nun den folgenden Code:In diesem Szenario werden die hinzuzufügenden Elemente in einem String aufgebaut. Innerhalb der Schleife tritt kein Reflow auf, da das DOM nicht geändert wurde. Erst wenn das Array vollständig durchlaufen und der aufgebaute String auf das Objekt angewendet wird, erst dann tritt der einzige Reflow in der Funktion auf.canvasEs gibt unzählige Reflows und Repaints, die vermieden werden können; hoffentlich hatten Sie das Glück, diese Tricks zu lernen. Es gibt reichlich Lesematerial zu diesem Thema, aber das meiste davon wird Nicole Sullivans

Verwenden Sie keine Mikrosekunden, um eindeutige IDs zu generieren

, was ein perfekter Ausgangspunkt ist. Neben den Lektionen hier gibt es weitere wichtige Lektionen, die es im Hinblick auf verschiedene technische Begriffe in der Ära von „Web 3.0“ und HTML5 zu lernen lohnt. Die obige Analyse gilt direkt für das Schreiben von jQuery-Code. Wenn man an

var myID = "static" + new Date().getTime();

Diese Prinzipien sind ebenfalls wichtig, und versuchen Sie außerdem, die Bildrate im Bereich von 30-60 zu halten.

Dies kann Fehler verursachen, die mit traditionellen Methoden schwer zu debuggen sind. Da Ihr DOM zur Laufzeit erstellt wird, kann die traditionelle Prüfung des Seitenquellcodes Fehler durch mehrere doppelte IDs nicht erkennen. Die Fehlerbehandlung von JavaScript und jQuery behandelt den ersten Treffer als die ID und ignoriert andere doppelte IDs. Dadurch wird nicht einmal ein JS-Fehler ausgelöst!

Das wird nicht funktionieren. Die einzige wirkliche Möglichkeit ist, Breakpoints zu setzen und Zeile für Zeile zu protokollieren, aber wenn Sie den Breakpoint an der falschen Stelle setzen, kollidieren Ihre Millisekundenwerte nicht mehr!

Die gute Nachricht ist, dass es viele alternative Möglichkeiten gibt, eindeutige IDs zu generieren. Um pedantisch zu sein: Die Zufallszahlenfunktion eines Computers ist nicht wirklich zufällig, da sie immer noch von der Systemzeit stammt. Das ist zwar erwähnenswert, aber die Wahrscheinlichkeit einer zufälligen Kollision ist winzig.

var myID = "static" + Math.round(Math.random() * 10000);

Persönlich ziehe ich es vor, GUIDs manuell zu generieren. Technisch gesehen werden GUIDs auf Basis Ihrer Hardware erstellt, aber die folgende JavaScript-Funktion macht ihre Sache ziemlich gut. Ich habe das voneinem Stack Overflow-Beitrag geklaut— es ist eine ziemlich praktische Funktion.

function S4() {
   return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
}
function guid() {
   return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}

var myID = "static" + guid();

Features erkennen, nicht Browsertypen

Unterstützt der Browser des Benutzers Geolokalisierung? Unterstützt er Web Workers? HTML5-Video? HTML5-Audio? Die Antwort war früher so:

if ($.browser.msie) {
    // 哦，是IE啊，那肯定不支持
}

Aber die Welt verändert sich schnell. Die neueste Version von IE kann fast als moderner Browser angesehen werden, aber sie bereitet der Frontend-Entwicklung immer noch Schmerzen. Frühere Versionen von IE waren im Grunde genauso schlecht wie die vorherigen, was faule JavaScript-Programmierer daran gewöhnte, zu erkennenif (ie)und dann irgendeine nur von Microsoft unterstützte, kaputte Syntax ausgeführt wird. Jetzt hat IE9 diese proprietären Funktionen als veraltet eingestuft, sodass die altenif (ie)Überreste stattdessen Probleme verursachen.

Wie wäre es also, jedes Feature zu erkennen, ohne den User-Agent zu überprüfen (was sowohl unzuverlässig als auch fälschbar ist)?

Wenn deine Antwort„Das ist ziemlich zuverlässig“lautet, dann hast du recht.

verwendeModernizrNun, das ist eine JavaScript-Bibliothek, die mitentwickelt wurde von Paul Irish, einem Meister der Branche auf Traum-Niveau. Sie kombiniert breite Anwendbarkeit, leichtes Design und massiveDokumentationin einem, und erfordert keinen Gehirnschmalz für die Implementierung – wahrlich ein Muss für zu Hause, auf Reisen und um Leute zum Schweigen zu bringen. Sie erzeugt einModernizrObjekt, das die Ergebnisse all seiner Erkennungstests enthält, sodass es so einfach wie im folgenden Beispiel ist, zu prüfen, ob ein Feature unterstützt wird:

// 检测浏览器是否支持canvas的老办法
if (!!document.createElement('canvas').getContext) { ... }

// 用 Modernizr 检测
if (Modernizr.canvas) { ... }

Verwende lesbare Millisekunden

Eine bequeme Möglichkeit, Millisekundenzahlen zu schreiben, ist eine lesbare Form. Das ist großartig für Anfänger, aber in den meisten Fällen ist es wirklich nur ein Gimmick.

// 这是3秒，30秒还是300秒啊？
var timeout = 30000;

// 增加了额外的计算开销，但是读和修改会更容易
var timeout = 30 * 1000;

Über jQuery-Code

Verketten wie ein tollwütiger Hund

Eine der besten Funktionen von jQuery ist das Function Chaining. Du hast es vielleicht schon ein wenig genutzt, vielleicht einfache Aufrufe aneinandergereiht ... aber hast du jemals das DOM wie ein tollwütiger Hund auf und ab durchquert? Nimm dir etwas Zeit, um dich mit der.end()Funktion. Sie wird entscheidend sein, wenn du vom Startselektor aus im DOM herumspringst.

$(".quote")
    .hide()
    .find("a").text("Click here").bind("click",doStuff).end()
    .parent().removeClass().addClass("testimonial").draggable().end()
    .fadeIn("slow");

Im obigen Beispiel, wann immer wir mit der Bearbeitung eines DOM-Objekts fertig sind und im DOM zurück nach oben traversieren müssen, um zum ursprünglichen Objekt zurückzukehren, auf das wir uns bezogen haben, müssen wir die.end()function. Dann folgen wir der Spur zurück zu unserem ursprünglichen Platz im DOM.

data-* Attribute verwenden

Diejenigen unter Ihnen, die schon lange JavaScript (nativ, nicht jQuery) schreiben, sind wahrscheinlich mit Attributen vertraut. Sie finden Wege, sie zu setzen, abzurufen oder zu missbrauchen.relundtitle ...

Sagen Sie nicht, HTML5 oder jQuery hätten nicht geholfen. Die neue Spezifikation erlaubt die Verwendung desdata-Präfixes in HTML-Elementen, um Daten enthaltende Attribute anzugeben. jQuery leistet großartige Arbeit dabei, die angegebenen Strings in die richtigen JavaScript-Datentypen umzuwandeln. Erstellen wir ein Element mit einigen Datenattributen.DIV 。

<div id="test" data-is-bool="true" data-some-number="123"></div>

Nun, obwohl unsere Werte in Anführungszeichen stehen, werden sie nicht als Strings behandelt:

typeof $("#test").data("isBool"); // boolean

typeof $("#test").data("someNumber"); // number

Sonderbehandlung der Groß-/Kleinschreibung

Beachten Sie, dass für diese Code-Schnipsel die Attributdefinitionen (in HTML) Kleinbuchstaben verwenden müssen, damit sie funktionieren. Das ist wichtig. Aber wenn Sie ein starker Frontend-Entwickler sind, möchten Sie Ihre Datenvariablen trotzdem in camelCase benennen. Wie an vielen Stellen in JavaScript üblich, bedeutet der führende Bindestrich, dass der nächste Buchstabe der camelCase-Großschreibung unterliegt. Allerdings: Die Verwendung von camelCase in HTML-Attributdefinitionen im folgenden Beispiel istnicht erlaubt, und wird dazu führen, dass das obige JavaScriptundefined zurückgibt。

funktioniert nicht :(

<div id="test" data-isBool="true" data-someNumber="123"></div>

funktioniert :)

<div id="test" data-is-bool="true" data-some-number="123"></div>

'.stop()' stoppt die Zusammenarbeit und das Zuhören

Das Binden von jQuery-Animationseffekten an Mausereignisse ist ein zentraler Bestandteil moderner webbasierter Benutzerinteraktion, aber selbst einige der berühmtesten Websites machen das schlecht.Dieser Artikelbietet ein direktes Beispiel für die Implementierung von Animationen und zeigt, wie visuell unharmonisch diese Animationen aussehen, wenn sie kombiniert werden. Glücklicherweise lässt sich dieses Problem leicht lösen, indem man einen Funktionspräfix verwendet oder im$.animate-Aufruf einen Parameter hinzufügt, um es einfach zu lösen.

Wenn Sie$.animateverwenden, können Sie den Parameternqueue: falsehinzufügen, um Verkettung zu vermeiden. Animations-Shortcuts wie$.fadeInoder$.slideDownakzeptieren keinequeue-Einstellungen; Sie müssen$.stop verwendendiese Methode, um diese Animationen vorzeitig zu stoppen.clearQueueundjumpToEndim Zusammenhang mit diesen beiden ParameternDokumentation, denn um Himmels willen, ich kann Ihnen sonst nicht helfen.

$("selector").stop(true,true).fadeOut();

$("selector").animate({
    property: value
}, {
    duration: 1000,
    queue: false
}

Optimieren Sie Ihre Selektoren

jQuery ist sehr cool. Es kann fast alles, aber es kann Ihnen noch immer keinen Kaffee machen—ich habe gehört, dass diese Funktion für Version 2.0 auf der Roadmap steht. Eines müssen Sie beachten: Übertreiben Sie es nicht mit der Nutzung seinessizzleJSLeistungsfähigkeit der Selector-Engine. Um dieses Problem zu vermeiden, gibt es zwei Strategien:Selektor-Ergebnisse zwischenspeichernundeffiziente Selektoren verwenden。

Selektor-Ergebnisse zwischenspeichern

Sollten Sie jedes Mal eine teure DOM-Abfrage durchführen, wenn Sie eine Kleinigkeit ändern möchten, oder eine Referenz auf die Elemente behalten? Die Wahl ist offensichtlich.

// before
$(".quote a").bind("click", doStuff); // DOM查询

// now
$(".quote a").addClass("quoteLink"); // DOM查询！！

// later
$(".quote a").fadeIn("slow"); // 又一次DOM查询！！！

Ignorieren Sie die Verkettung; das hier ist besser:

// before
var $quoteLinks = $(".quote a");  // 只需一次DOM查询
$quoteLinks.bind("click", doStuff);

// now
$quoteLinks.addClass("quoteLink");

// later
$quoteLinks.fadeIn("slow");

Effiziente Selektoren verwenden

Okay, jQuery/SizzleJS kann problemlos CSS3-Selektoren verwenden, aber was kostet das wirklich? In diesem Szenario verwendet der Browser möglicherweisedocument.querySelector(), aber er kann auch deine Selektorzeichenfolge aufteilen und dann das DOM manuell abfragen.

// ID搜索是最快的查询方式，然后它获取孩子节点的列表，匹配其中class为'quotes'的元素
$("#quoteList").children(".quotes");

// 只在预先确定的bar元素下查找'foo'class
$(".foo",bar);

'for'-Schleifen sind immer schneller als 'each()'-Schleifen

Egal, was in den kommenden Jahren in der Browserentwicklung passiert, nativefor-Schleifen werden immer schneller sein als die$.each()-Schleifen von jQuery. Wenn du über die große Frage nachdenkst, was jQuery wirklich ist (eine Bibliothek, die native JS-Funktionen umhüllt), beginnst du zu erkennen, dass nativer JavaScript-Code immer schneller sein wird. Die Verwendung einer Bibliothek statt nativen Codes ist ein Kompromiss zwischen Laufzeitgeschwindigkeit und Programmiergeschwindigkeit.

Es ist sehr wichtig, immerfor-Schleifen für leistungskritische Funktionen zu verwenden, die Hunderte Male pro Sekunde aufgerufen werden könnten. Zum Beispiel:

Mausbewegung
Zeitintervalle
Schleifen in Schleifen

CSS

Das Verständnis des Box-Modells ist entscheidend

Das "Box-Modell" ist ein kritischer, entscheidender Faktor für das Verständnis, wie Browser Seiten rendern. Ein volles Verständnis seiner Komplexität kann deine Arbeit auf wundersame Weise vereinfachen. Das Box-Modell beschreibt die Art und Weise, wie die physischen Abmessungen von HTML-Elementen berechnet werden. Wenn ein Blockelement eine feste Breite hat, sagen wir 100px, wie sollten dann sein Padding, Border und Margin bestimmt werden?

Viele Websites haben ausführliche Erklärungen, aber halten wir es einfach: In standardskonformen Browsern werden Border und Padding außerhalb der angegebenen Breite platziert. Das erklärt man am besten mit einem Diagramm. Zum Beispiel der folgende Code:

.foo {
    width: 150px;
    height: 150px;
    padding: 25px;
    border: 25px solid;
    margin: 20px;
}

Was du erwarten könntest (Quirks-Modus)

Padding und Border werden beide nach innen berechnet, sodass sowohl Höhe als auch Breite bei 150px bleiben.

Was du tatsächlich siehst (Standardmodus)

Die tatsächlich resultierende Breite und Höhe betragen jedoch 250px. Das heißt, 150px + (2 * 25) + (2 * 25).

Wenn du dieses Ergebnis seltsam findest, bist du nicht allein (nun, du bist eine Person, ich sage nur, andere denken das auch). Jetzt gibt es eine Lösung: Du musst eine CSS-Eigenschaft namensbox-sizingeinführen, dieIE8 und höherunterstützen. Sie ermöglicht dir, genau zu wählen, wie Elementabmessungen berechnet werden, was dir Ärger ersparen kann. Die konkret unterstützten Parameter variieren je nach Browser, und Herstellerpräfixe sind erforderlich. Einzelheiten findest du untercaniuse.com 。

/* 旧方法 (178 + 20 + 2 = 200) */
.foo {
    width: 178px;
    padding: 10px;
    border: 1px;
}

/* 更好的方法 */
.foo {
    width: 200px;
    padding: 10px;
    border: 1px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
}

Obwohl du bei Breiten immer Kopfrechnen betreiben kannst, indem du hier und da Pixelwerte abziehst (wie es die erste Methode getan hat), kann niemand herausfinden, was zu tun ist, wenn unterschiedliche Breiteneinheiten im Spiel sind (wie Prozentwerte oder EMs). Derzeit kann man, abgesehen davon, Elemente in ein übergeordnetes Element einzupacken, um sicherzustellen, dass die Breite undpadding/margin/borderskönnen vollständig getrennt werden, es gibt keine andere Lösung.

Wissen, wann man float und wann man position verwendet

Die Ära des tabellenbasierten Layouts ist vorbei. Jetzt ist es an der Zeit zuzugeben, dass wir uns darauf konzentrieren können, zu verstehen, wie float und position funktionieren. Dies erfordert die Beherrschung eines bestimmten mentalen Modells, und ich glaube, dass dies am besten durch praktische Übung gelernt wird.

Die Verwendung von float, um Elemente aus dem DOM zu nehmen und sie nach links oder rechts zu zwingen, ist recht zuverlässig. Sie sind zum Allheilmittel der Post-Tabellenlayout-Ära in der Frontend-Entwicklung geworden, vielleicht weil Browser in der Vergangenheit schlechte Unterstützung fürdisplay: inline hattenundinline-blockes, und wegen der Fehler, die bei der Unterstützung für position auftraten.z-indexFehler. Aber jetzt gibt es wirklich keine Entschuldigung. inline-block wird bereits gut unterstützt, und eine einfache Anpassung kann es in IE7 zum Laufen bringen.

Gott sei Dank sind die alten Argumente gegen die Verwendung von CSS zur absoluten Positionierung von Elementen ausgestorben. Theoretisch ermöglicht die Positionierungseigenschaft, Elemente auf der Seite mit X- und Y-Koordinaten zu platzieren, ein einfacher und direkter Ansatz, mit dem Flash-Entwickler vertraut sein sollten.

Position verstehen

Beim Positionieren von Elementen mit CSS ist es sehr wichtig, eine Tatsache zu verstehen: Die Positionierung ist immer relativ zum nächstgelegenen Elternelement, das eine Positionierungseigenschaft besitzt. Wenn Leute anfangen, CSS zu verwenden, gibt es ein häufiges Missverständnis, dassposition: absolute;wird es relativ zum Wurzelelement der Seite positioniert. Ich denke, dieses Missverständnis kommt von Fällen, in denen ein Element kein Elternelement mit einem position-Stil hat -- in diesem Fall ist ihre Schlussfolgerung richtig. Durchläuft man den DOM-Baum nach oben, ohne ein Element mit einem Positionierungsstil zu finden, wird es relativ zum Wurzelelement der Seite positioniert.

Wenn alsoposition: absolute;Elemente aus dem Fluss herausnimmt, in dem sie sich befinden, wie positioniert man dann ein Element relativ zu seinem Elternelement? Die Methode ist unkompliziert. Das Elternelement muss den Stilposition: relative;definieren, und dann werden alle Kindelemente in der Reihenfolge top, right, bottom, left platziert. Wie würden Sie mit diesem Wissen das folgende intuitive Layout umsetzen?

Mitfloat, müssten Sie diese Elemente in ein Elternelement einwickeln und dann.onefloat left setzen und dann.two ändernund.threevonfloatundmargin. Am Ende sollten Sie etwas wie das Folgende schreiben:

.parent {
    /* ghetto clearfix */
    width: 310px;
    overflow: auto;
}
.one {
    width: 200px;
    height: 210px;
    float: left;
}
.two {
    width: 100px;
    height: 100px;
    float: right;
    margin-bottom: 10px;
}
.three {
    width: 100px;
    height: 100px;
    float: right;
}

Wie bereits erwähnt, können wir mitpositionElemente auf dem Bildschirm sehr explizit anhand von X- und Y-Koordinaten anzeigen. Der obige Float-Ansatz trennt langen Text auf der Seite, während die folgende Methode sicherstellt, dass sich alle Elemente in normalen Positionen befinden, unabhängig davon, welcher Inhalt auf der Seite ist.

.parent {
    position: relative;
    width: 310px;
    height: 210px;
}
.one, .two, .three {
    position: absolute;
}
.one {
    top: 0;
    left: 0;
    width: 200px;
    height: 210px;
}
.two {
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
}
.three {
    bottom: 0;
    right: 0;
    width: 100px;
    height: 100px;
}

Wie bereits erwähnt, müssen einigez-indexProbleme berücksichtigt werden. Obwohl das obige Beispiel etwas übertrieben erscheinen mag, eröffnet es eine neue Welt voller Möglichkeiten, sobald man beginnt, über Positionierung nachzudenken.

Leerraum

Wenn wir weiterhin zwischen einzeiligen und mehrzeiligen CSS-Parameterformaten wechseln, wird sich auch der Leerraum in CSS unterscheiden. Ich werde nicht zu sehr ins Detail gehen.

Korrekter Leerraum

/* 不好 */
.selector {display:none;background:#FF0000;color:#000000;}

/* 好 -- 单行 */
.selector { display: none; background: #FF0000; color: #000000; }

/* 好 -- 多行 */
.selector {
    display: none;
    background: #FF0000;
    color: #000000;
}

Geschweifte Klammern in derselben Zeile

.selector {
    display: none;
    background: #FF0000;
    color: #000000;
}

Untergeordnete Elemente einrücken

Ob man dies verwendet, ist Ansichtssache; persönlich würde ich dieses Format nur in CSS-Dokumenten mit einzeiligen Definitionen verwenden.

.selector { display: none; background: #FF0000; color: #000000; }
    .selector a { text-decoration: none; }
    .selector span { font-weight: bold; }

Herstellerpräfixierte Eigenschaften gruppieren und einrücken

.selector {
    background: #FFF; border: 1px solid #000; color: #EAEAEA;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
}

CSS-Kurzschreibweise

Eigenschaftsgruppierung

Eigenschaften zusammenzufassen ist der effektivste Weg, die CSS-Dateigröße stark zu reduzieren. Es ist sehr wichtig zu verstehen, wie Eigenschaften angeordnet werden (im Uhrzeigersinn -- oben, rechts, unten, links) und wie man sie weiter verkürzen kann (oben und unten, links und rechts).

/* 逐个定义，太长了 */
padding-top: 1px;
padding-right: 2px;
padding-bottom: 1px;
padding-left: 2px;

/* 上，右，下，左，好很多 */
padding: 1px 2px 1px 2px;

/* 上和下，左和右，最优 */
padding: 1px 2px;

Von 0px zum Helden

Das Zuweisen eines Werts von0zu einer Eigenschaft ist redundant. Ob ein Element vom linken Rand0pxoder0 Elefantenentfernt ist, spielt überhaupt keine Rolle; solange du weißt, dass es bündig am linken Rand anliegt.

/* 不好 */
padding: 0px 10px;

/* 好 */
padding: 0 10px;

Kommentarblöcke

Für die Aufgabe, mehrere Style-Abschnitte in einem Stylesheet zu pflegen, sind Kommentare zu großen CSS-Abschnitten ein großartiger Weg. Offensichtlich funktioniert das besser in Kombination mit einzeiligem CSS-Stil, aber es ist auch bei mehrzeiligem CSS-Stil nicht völlig nutzlos. Ob man Bindestriche, Gleichheitszeichen oder Unterstriche zur Hervorhebung in Kommentaren verwendet, ist Ansichtssache, aber hier ist die Art, die ich mag:

/* === HORIZONTAL NAV === */
#horizNav { width: 100%; display: block; }
#horizNav li { display: block; float: left; position: relative; }
#horizNav li a { display: block; height: 30px; text-decoration: none; }
#horizNav li ul { display: none; position: absolute; top: 30; left: 0; }

/* === HOME PAGE - CAROUSEL === */
#carousel { width: 960px; height: 150px; position: relative; }
#carousel img { display: none; }
#carousel .buttons { position: absolute; right: 10px; bottom: 10px; }

Floats clearen

Ein<div>zu clearen bedeutete früher zusätzliches DOM, weil es das Hinzufügen eines zusätzlichen Clearing-Elements erforderte. Eine bessere Methode ist, eine explizite Breite für das Elternelement festzulegen ('auto' ist nicht in allen Browsern und Szenarien wirksam) und die overflow-Eigenschaft auf 'auto' oder 'hidden' zu setzen. 'hidden' hat eindeutig die bessere Kompatibilität, aber in einigen IE-kompatiblen Versionen funktioniert 'auto' besser.

HTML:

<div class="parentElement">
    <div class="childElement">
        I'm floated left!
    </div>
    I'm normal text that wraps around the float
</div>

CSS:

.parentElement {
    width: 100%;
    overflow: hidden;
}
.childElement {
    float: left;
}

Ein Mitwirkender an diesem Projekt hat mich daran erinnert, auf den neuesten Clearfix zu achten.micro clear-fixgilt als stabil und ausreichend browserübergreifend kompatibel, um in das neueste HTML5-Boilerplate-Release aufgenommen zu werden. IchNachdrücklichempfehle ich dir, einen Blick darauf zu werfen. Obwohl ich kein großer Fan von browserspezifischem CSS und:aftersolchen Pseudo-Elementen bin, ist dieser Micro-Clearfix tatsächlich robuster. Er vermeidet außerdem das Problem des Kollabierens der oberen Außenabstände.

Vertikale und horizontale Zentrierung

Elemente horizontal zu zentrieren ist eigentlich keine Raketenwissenschaft, und ich bin sicher, dass die meisten von euch mit dem folgenden Code-Snippet vertraut sind:

.class {
    width: 960px;
    margin: 0 auto;
}

Frontend-Entwickler verwenden diesen Code seit Langem und haben nicht herausgefunden, warum dieser Ansatz für die vertikale Zentrierung nicht funktioniert. Nach meinem Verständnis ist es wichtig, sich daran zu erinnern, dass das Elternelement normalerweise einheight: auto; hatStil, und außerdem fehlt die für vertikale Zentrierung benötigte Höhe von 100 %. Das Anwenden vonposition: absolute;kann das Element effektiv in den Positionierungsmodus versetzen, und auf auto gesetzte margins helfen ihm automatisch, seine Position anzupassen, um die Zentrierung zu erreichen.

.exactMiddle {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

Zu den Nachteilen dieser Methode gehören die fehlende Unterstützung in IE6 und IE7 sowie das Ausbleiben einer Bildlaufleiste, wenn das Browserfenster kleiner als das zentrierte Objekt verkleinert wird. Aufdieser WebseiteWeitere Methoden sind aufgelistet (diese ist derzeit die vierte), aber die aktuelle ist momentan die beste.

Text in einem Element vertikal zu zentrieren ist ebenfalls unkompliziert. Wenn der Text einzeilig ist, etwa bei einem horizontalen Navigationselement, kann manline-heightauf die physische Höhe des Elements setzen.

#horizNav li {
    height: 32px;
    line-height: 32px;
}

Features erkennen, nicht Browsertypen

In der früheren Diskussion über JavaScript-Feature-Erkennung wurde es zunehmend problematisch, zu erkennen, dass der Browsereine beliebige Versionvon IE ist, und dann bestimmte Attribute anzuwenden. Der Iron Man Paul Irish führte die Verwendung vonIE-Versionserkennungs-Methoden zur Lösung dieser Probleme, aberModernizrhat uns seitdem gerettet. Modernizr setzt in das Wurzel-<html>-Element einige Klassen, die beschreiben, ob bestimmte Features unterstützt werden. Dann können progressive Stile leicht aus diesen Klassen kaskadieren oder von ihnen entfernt werden.

.my_elem {
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25);
   -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25);
   box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* 如果 box shadow 不支持, 就应用 borders 属性 */
.no-boxshadow .my_elem {
   border: 1px solid #666;
   border-bottom-width: 2px;
}

Missbrauche !important nicht

Sich auf!importantdas Tag zu verlassen, ist eine gefährliche Praxis. Die Situationen, in denen man es unbedingt verwenden muss, sind äußerst selten und Sonderfälle. Diese Situationen beinhalten im Allgemeinen das Überschreiben eines anderen Stylesheets, das man nicht bearbeiten kann oder für das man keine Bearbeitungsberechtigung hat. Ein weiteres Szenario ist das Hartkodieren der Stile eines Elements, um zu verhindern, dass von JavaScript erzeugte Stile höhere Priorität haben. Aber in Wirklichkeit,!importantwird oft als faule Abkürzung verwendet, damit ein Stil andere überschreibt, was in Zukunft viele Probleme verursachen wird.

Kombiniere!importantDie meisten Verwendungen des Tags lassen sich vermeiden, indem man die Spezifität von CSS-Selektoren besser versteht und lernt, Elemente präziser anzusprechen. Je spezifischer der Selektor, desto wahrscheinlicher wird er als anwendbarer Stil akzeptiert. Das folgende Beispiel von vanseodesign zeigt die Spezifität in Aktion.

p { font-size: 12px; }
p.bio { font-size: 14px; }

Was die Stilpriorität betrifft,ihr Artikelist besser als alles, was ich zur Erklärung der Vererbung schreiben könnte, also gebt ihm bitte einen Daumen hoch.

Aggressive Abwärtskompatibilität

Es ist erwähnenswert, dass dies meine persönliche Meinung ist und nur auf bestimmte Situationen zutrifft. In großen kommerziellen Projekten oder Unternehmenslösungen, die auf alte Browser angewiesen sind, wird die Haltung der progressiven Verbesserung nicht ohne Weiteres akzeptiert werden.

Progressive Verbesserung bedeutet, dass ein bestimmter (älterer) Browser, der einen bestimmten Effekt nicht darstellen kann, diesen einfach ignorieren sollte. CSS3-Buttons sind ein gutes Beispiel. Effekte wieborder-radius， box-shadow， text-shadowundFarbverläufewerden in fortgeschrittenen Browsern angezeigt. Für etwas ältere Browser können Sie ein.PNG-Bild als harmlosen Fallback verwenden, und die eleganteste aller Lösungen wäre, einen PNG-Fix für IE6 bereitzustellen oderfilter-Parameter, um Eigenschaften wie Farbverläufe und Schatten zu ersetzen. In diesem Fall wird die progressive Verbesserung Sie jedoch dazu bringen, ältere Browser zu ignorieren und ihnen ein flaches, akzeptables Objekt zu präsentieren.

Einfach ausgedrückt: Progressive Verbesserung bedeutet:Wenn Ihr Browser keine Farbverläufe oder Box-Schatten darstellen kann, dann haben Sie einfach Pech.。

Obwohl dies nicht für alle Situationen ideal ist, stellt dieser Ansatz sicher, dass das Projekt termingerecht geliefert wird und das Kernprodukt nutzbar ist, ohne auf Browser-Hacks angewiesen zu sein.

CSS3 und HTML5

Ich denke, ich habe zu diesem Thema genug gesagt. Verwenden SieModernizr, um festzustellen, ob bestimmte HTML5- und CSS3-Funktionen verfügbar sind.

Verwendung und Missbrauch von @font-face

Bevor Sie das Einbetten einer benutzerdefinierten Schriftart in Betracht ziehen, ist es sehr wichtig, dass SieEULAprüfen und nachsehen, ob Web-Einbettung erlaubt ist. Anbieter von Schriftbibliotheken möchten natürlich nicht, dass Designer und Entwickler Schriftbibliotheksdateien direkt auf einem Server speichern können, wo versierte Endbenutzer sie kopieren können. Einige Anbieter verbieten auch das Einbetten bestimmter Dateitypen, wie z. B..TTFund.OTF。

Wenn Sie nach sorgfältiger Überlegung der Meinung sind, dass die gewünschte Schriftart einbettbar ist, dann sehen Sie sich Font Squirrels@font-face generatoran. Er nutzt Fontspringskugelsichere @font-face-Strukturund kann automatisch alle erforderlichen Dateiformate generieren.

Abwärtskompatibilität

Glücklicherweise haben Browser eine sanfte Degradierung beim Umgang mit HTML5- und CSS3-Funktionen erreicht, die sie nicht unterstützen. Zusätzlich zu<input />werden neue Tag-Typen wie "email", "search" usw. im Allgemeinen problemlos auf normale Texteingaben zurückgestuft, wenn sie vom Browser nicht nativ unterstützt werden.<input type="text" />. Ebenso werden nicht unterstützte CSS3-Funktionen nicht angezeigt, und responsive Layouts, die durch Höhen- und Breiten-Medienabfragen gesteuert werden, werden nicht angewendet.

Ausgefeilte CSS3-Effekte sollten als Belohnung für Benutzer moderner Browser eingesetzt werden.

Im Abschnitt "Ressourcen" unten haben wir einige Bibliotheken aufgenommen, die dabei helfen, HTML5- und CSS3-Funktionalität in einer Reihe älterer Browser funktionsfähig zu halten.

Ressourcen

Die folgenden Ressourcen sind wichtig für Code-Standardisierung und Interaktion in modernen Webseiten. Sie stellen sicher, dass CSS3- und HTML5-Funktionen in einer Reihe von Browsern funktionieren, die zuvor keine Unterstützung boten.

jQuery JavaScript-Hilfsbibliotheken
jQuery UI Erledigt für Benutzerinteraktion/-oberfläche das, was jQuery für JavaScript erledigt.
Modernizr Features erkennen, nicht Browser!
RespondJS Bringt responsive Layouts in ältere Browser
@font-face Generator Umfassende Schriftarteneinbettung
RaphaelJS Einfach zu verwendende, browserübergreifende Vektorgrafiken
HTML5 Boilerplate Es ist ein guter Ausgangspunkt für jedes Projekt. Allerdings ist selbst seine "slim"-Version etwas aufgebläht.
Twitter Bootstrap Ermöglicht das schnelle Prototyping und Styling einfacher Webanwendungen.

Dieser Artikel wurde von Tait Brown (@taitems) geschrieben, und diese chinesische Version wurde voncoderLMNübersetzt.