什么是目前最好HTML/CSS/Javascript配置？

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

题

我得到更多的进入能力和所以已经设置了一个 HTML/Javascript/CSS基站 我用我所有的测试。

由于这些测试，最终将变成 PHP和ASP.NET 视 网站，我想利用这个机会获得基础知识的权利再次为现代化的浏览器和网络标准之前建立的脚本语言上的它。

我已经选择使用：

  • XHTML1.0 严格
  • UTF-8 编码
  • 作为几CSS引用作为可能的(把一切都放在 1CSS文件 对于装货速度)
  • 作为几Javascript引用作为可能的(1javascript文件 加上的。基本参考-我假设使用 谷歌 。基础是最佳做法的速度)
  • 我检查我的代码作为我建造它的 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>

主。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");
}
有帮助吗？

解决方案

就个人而言，我将结合的点击事件通过jQuery，以确保很好的分离，这样的：

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

这样你就可以结合到多个事件处理程序。如果你只是使用击据我所知你永远只能使用一个处理程序。

顺便说一句你也可以使用的定义事件和事件命名空间：

$("#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");

禾田 亚历克斯

其他提示

移动 <script> 块来的 页底部的.

关于CSS和JS文件在一般情况下，我不会把所有JS文件以一个单一的文件，在开发过程中。它变得很难发展中的一个大JS文件。而不是使用一个模块结合它们在飞行期间或在部署。

我通常去(CSS和JS):

一般性文件：

  • 的项目。css

和每一页上：

  • project_welcome.css

和任何特殊部件(登录控制，广告领域的风景等)有一个单独的一个。

这样你可以申请一些组织的技术，并且不会发疯管理这个大文件。

禾田 亚历克斯

我将建议把JS呼吁以下身体标记。如果你的脚本挂，然后在页面可以负载和让该行为(JS)载之后的事实。我注意到，速度大大提高了与这个方法。

看看这个: http://stevesouders.com/hpws/rule-js-bottom.php

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top