Ce qui est actuellement le meilleur HTML / CSS / Javascript configuration?

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

Question

Je suis de plus en jQuery et ont donc mis en place un HTML / Javascript / site de base CSS que j'utilise pour tous mes tests.

Étant donné que ces tests finiront par se transformer en PHP et ASP.NET MVC sites , je veux profiter de cette occasion pour obtenir les bases vers le bas à droite pour les navigateurs et standards web avant de construire les langages de script sur dessus.

Je l'ai choisi d'utiliser:

  • XHTML 1.0 Strict
  • UTF-8 codage
  • que quelques références CSS que possible (tout mettre dans 1 fichier CSS pour la vitesse de chargement)
  • que quelques références Javascript possible ( 1 fichier javascript plus la référence de base de code jquery - Je suppose que l'aide de la Google base de code jQuery est la meilleure pratique pour la vitesse)
  • Je vérifie mon code que je construis avec le http://validator.w3.org

Y at-il autre chose que je dois considérer?

Voici un exemple de l'un de mes sites de 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");
}
Était-ce utile?

La solution

Personnellement, je lier à l'événement click via jQuery pour assurer la séparation agréable, comme ceci: 

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

De cette façon, vous pouvez lier à plusieurs gestionnaires d'événements. Si vous utilisez juste onclick vous pouvez ne AFAIK utiliser qu'un seul gestionnaire.

BTW, vous pouvez également utiliser les espaces de noms d'événements et d'événements personnalisés: 

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

est déclenchée par 

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

et 

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

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

HTH Alex

Autres conseils

Déplacer les blocs <script> à la .

En ce qui concerne les fichiers CSS et JS en général, je ne pas combiner tous les fichiers JS dans un seul fichier au cours du développement. Il devient très difficile de se développer dans un grand fichier JS. utiliser plutôt un module qui les combine à la volée ou au cours du déploiement.

Je vais habituellement avec (les deux CSS et JS):

un fichier général:

  • project.css

et une par page:

  • project_welcome.css

et des composants spéciaux (contrôles de connexion, des vues de la zone ad etc) ont séparé un aussi.

De cette façon, vous pouvez appliquer certaines techniques d'organisation et ne va pas gérer ce fichier fou seul grand.

HTH Alex

Je recommande de mettre la JS ci-dessous appelle la balise body. Si vos scripts sont suspendus, la page peut charger et laisser la charge comportement (JS) après le fait. J'ai remarqué que la vitesse améliore grandement avec cette méthode.

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

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top