Was ist derzeit die beste HTML / CSS / Javascript-Konfiguration?

StackOverflow https://stackoverflow.com/questions/1481022

Frage

Ich bin mehr in jQuery bekommen und so haben eine HTML / Javascript / CSS Basis Website , die ich für alle meine Tests verwenden einrichten.

Da diese Tests schließlich verwandelt sich in PHP und ASP.NET MVC Websites, möchte ich diese Gelegenheit nutzen, um die Grundlagen für moderne Browser und Web-Standards direkt wieder nach unten zu bekommen, bevor die Skriptsprachen aufbauend auf oben drauf.

Ich habe ausgewählt zu verwenden:

  • XHTML 1.0 Strenge
  • UTF-8 Codierung
  • so wenig CSS Referenzen wie möglich (bitte alles in 1 CSS-Datei für Ladegeschwindigkeit)
  • so wenig Javascript Referenzen wie möglich ( 1 Javascript-Datei und die jQuery-Code Basisreferenz - Ich gehe davon mit der Google Basis jQuery-Code ist beste Praxis für Geschwindigkeit)
  • ich meinen Code überprüfen, wie ich es mit dem http://validator.w3.org

Gibt es etwas, was ich schon daran gedacht?

Hier

ist ein Beispiel für eine meiner Testseiten:

index.htm: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <title>Text XHTML Page</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" media="all"/>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript" src="javascript/main.js"></script>       

    </head>

<body>
    <h1 class="highlightTitle">Text</h1>
    <p class="main">First</p>
    <p>Second</p>
    <p id="selected" class="regular">Third</p>
    <p>Fourth</p>

<form action="">
    <div>
        <input type="button" value="highlight it" onclick="highlightIt();countThem()" /> 
        <input type="button" value="highlight title" onclick="highlightTitle()" />
        <p>here is another paragraph</p>
    </div>
</form>

</body>
</html>

main.cs: 

p.highlighted {
    background-color:orange;
}
h1.highlightTitle {
    background-color:yellow;
}
h1.deselected {
    background-color:#eee;
}
p.regular {
    font-weight: bold;
}

main.js: 

google.load("jquery", "1.3.2");

function highlightIt() {
    $('#selected')
        .toggleClass('highlighted');
}

function countThem() {
    alert("there are " + $("p.main").size() + " paragraphs");
}

function highlightTitle() {
    $("h1").toggleClass("deselected");
}
War es hilfreich?

Lösung

Persönlich würde ich das Click-Ereignis über jQuery binden schöne Trennung zu gewährleisten, wie folgt aus: 

$("#yourId").bind("click", highlightIt);

Auf diese Weise können mehrere Event-Handler binden können. Wenn Sie nur Onclick AFAIK verwenden, können Sie immer nur einen Handler verwenden.

BTW können Sie auch benutzerdefinierte Ereignis und Ereignisnamespaces verwenden: 

$("#yourId").bind("beforeHighlighting", doSomething);

wird durch

ausgelöst 
$("#yourId").trigger("beforeHighlighting");

und 

$(".hasAHelptext").bind("helptext.click", showHelptextFct);
$(".hasAHelptext").bind("click", otherFct);

// will only remove the showHelptextFct event handler
$(".hasAHelptext").unbind("helptext.click");

HTH Alex

Andere Tipps

Verschieben Sie die <script> Blöcke zum unten auf der Seite .

Im Hinblick auf CSS und JS-Dateien im Allgemeinen würde ich kombiniere alle JS-Dateien nicht auf eine einzelne Datei während der Entwicklung. Es wird sehr schwer, in einer großen JS-Datei zu entwickeln. verwendet eher ein Modul, das sich on-the-fly oder während des Einsatzes kombiniert.

ich in der Regel gehen mit (beide CSS und JS):

eine allgemeine Datei:

  • project.css

und ein pro Seite:

  • project_welcome.css

und spezielle Komponenten (Login Kontrollen, Anzeigenbereich Ansichten etc.) haben auch einen separaten ein.

Auf diese Weise können einige Organisationstechniken anwenden kann und wird nicht verrückt, dass einzelne große Datei zu verwalten.

HTH Alex

Ich würde empfehlen, die JS ruft unter dem Body-Tag setzen. Wenn Ihre Scripts hängen, dann kann die Seite geladen werden und das Verhalten (JS) Last nach der Tat lassen. Ich habe festgestellt, dass die Geschwindigkeit stark mit dieser Methode verbessert.

Check this out: http://stevesouders.com/hpws/rule-js -bottom.php

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top