Какая конфигурация HTML / CSS / Javascript на данный момент является наилучшей?

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

Вопрос

Я все больше разбираюсь в jQuery и поэтому создал Базовый сайт на HTML/Javascript/CSS который я использую для всех своих тестов.

Поскольку эти тесты в конечном итоге превратятся в PHP и ASP.NET MVC веб-сайты, я хочу воспользоваться этой возможностью, чтобы еще раз разобраться с основами современных браузеров и веб-стандартов, прежде чем создавать языки сценариев поверх этого.

Я решил использовать:

  • XHTML 1.0 Строгий
  • UTF-8 кодирование
  • как можно меньше ссылок на CSS (поместите все в 1 CSS-файл для скорости загрузки)
  • как можно меньше ссылок на Javascript (1 файл javascript плюс ссылка на базу кода jquery - я предполагаю, что использование Google Кодовая база jQuery - лучшая практика для повышения скорости)
  • Я проверяю свой код по мере его создания с помощью http://validator.w3.org

Есть ли что-нибудь еще, что мне нужно рассмотреть?

Вот пример одного из моих тестовых сайтов:

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");
}
Это было полезно?

Решение

Лично я бы привязался к событию click через jQuery, чтобы обеспечить хорошее разделение, вот так:

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

Таким образом, вы можете привязываться к нескольким обработчикам событий.Если вы просто используете onclick AFAIK, вы можете использовать только один обработчик.

Кстати, вы также можете использовать пользовательские события и пространства имен event:

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

запускается с помощью

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

и 

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

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

HTH Алекс

Другие советы

Переместите <script> блоки к нижняя часть страницы.

Что касается CSS и JS-файлов в целом, я бы не стал объединять все JS-файлы в один файл во время разработки.Становится очень сложно разрабатывать в одном большом JS-файле.Скорее используйте модуль, который объединяет их "на лету" или во время развертывания.

Обычно я использую (как CSS, так и JS):

один общий файл:

  • проект.css

и по одному на страницу:

  • проект_welcome.css

и все специальные компоненты (элементы управления входом в систему, просмотры рекламных зон и т.д.) Также имеют отдельный компонент.

Таким образом, вы сможете применить некоторые методы организации и не сойдете с ума, управляя этим одним большим файлом.

HTH Алекс

Я бы рекомендовал размещать вызовы JS под тегом body.Если ваши скрипты зависают, страница может загрузиться и позволить поведению (JS) загрузиться постфактум.Я заметил, что при использовании этого метода скорость значительно увеличивается.

Проверь это: http://stevesouders.com/hpws/rule-js-bottom.php

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top