Qual è attualmente la migliore configurazione HTML / CSS / JavaScript?

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

Domanda

Sono sempre di più in jQuery e così ho creato un HTML / Javascript / CSS sito di base che io uso per tutti i miei test.

Dal momento che questi test saranno fine si trasformano in PHP e ASP.NET MVC i siti web, che voglio usare questa opportunità per ottenere le basi verso il basso di nuovo a destra per i browser moderni e standard web prima di costruire i linguaggi di scripting su sopra di esso.

Ho scelto di utilizzare:

  • XHTML 1.0 Strict
  • UTF-8 encoding
  • il minor numero di riferimenti CSS possibili (mettere tutto in 1 file CSS per la velocità di caricamento)
  • il minor numero di riferimenti JavaScript come possibile ( 1 file javascript più il riferimento di base di codice jQuery - presumo che utilizzano il Google base di codice jQuery è delle migliori pratiche per la velocità)
  • controllo il mio codice come costruisco con la http://validator.w3.org

C'è qualcos'altro che ho bisogno di prendere in considerazione?

Ecco un esempio di uno dei miei siti web di test:

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");
}
È stato utile?

Soluzione

Personalmente vorrei legare l'evento click tramite jQuery per garantire la separazione bello, in questo modo: 

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

In questo modo è possibile associare a più gestori di eventi. Se si basta usare onclick per quanto ne so si può sempre e solo utilizzare un gestore.

A proposito è anche possibile utilizzare gli spazi dei nomi di eventi e eventi personalizzati: 

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

è innescato da 

$("#yourId").trigger("beforeHighlighting");

e 

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

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

HTH Alex

Altri suggerimenti

Spostare i blocchi <script> al fondo alla pagina .

Per quanto riguarda i file JS CSS e, in generale, non vorrei combinare tutti i file JS in un singolo file durante lo sviluppo. Diventa molto duramente per sviluppare in un unico grande file JS. Piuttosto utilizzare un modulo che li combina on-the-fly o durante la distribuzione.

Io di solito vado con (sia CSS e JS):

un file generale:

  • project.css

e uno per pagina:

  • project_welcome.css

ed eventuali componenti speciali (controlli di accesso, vista Spazio, ecc) hanno una separata pure.

In questo modo è possibile applicare alcune tecniche di organizzazione e non impazzire gestione di tale singolo file di grandi dimensioni.

HTH Alex

mi sento di raccomandare di mettere il JS chiama sotto il tag body. Se gli script sono appesi, quindi la pagina può caricare e lasciare che il carico di comportamento (JS) dopo il fatto. Ho notato che la velocità migliora notevolmente con questo metodo.

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top