Question

我正在更多地使用jQuery，因此设置了一个 HTML / Javascript / CSS基站，我将其用于所有测试。

由于这些测试最终将变成 PHP和ASP.NET MVC 网站，我想利用这个机会在构建脚本语言之前再次为现代浏览器和Web标准提供基础知识。顶部。

我选择使用：

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");
}

Answer 1

将<script>块移至bottom of the page。

Answer 2

我个人会通过jQuery绑定到click事件，以确保良好的分离，如下所示：

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

这样您就可以绑定到多个事件处理程序。如果你只是使用onclick AFAIK，你只能使用一个处理程序。

BTW你也可以使用自定义事件和事件命名空间：

$("#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 亚历

Answer 3

关于CSS和JS文件，我不会在开发过程中将所有JS文件合并到一个文件中。在一个大的JS文件中开发非常困难。而是使用在运行中或部署期间组合它们的模块。

我经常使用（CSS和JS）：

一个通用文件：

project.css

，每页一个：

project_welcome.css

并且任何特殊组件（登录控件，广告区域视图等）也都具有单独的组件。

通过这种方式，您可以应用一些组织技术，并且不会因为管理单个大文件而疯狂。

HTH 亚历

Answer 4

我建议将JS调用放在body标签下面。如果您的脚本挂起，那么页面可以加载并让行为（JS）在事后加载。我注意到这种方法可以大大提高速度。

检查出来：http://stevesouders.com/hpws/rule-js-bottom.php

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

4 个答案: