6

我对 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构建代码时检查我的代码

还有什么我需要考虑的吗？

这是我的一个测试网站的示例：

索引.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>

主文件：

p.highlighted {
    background-color:orange;
}
h1.highlightTitle {
    background-color:yellow;
}
h1.deselected {
    background-color:#eee;
}
p.regular {
    font-weight: bold;
}

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

4 回答 4

5

将<script>块移动到页面底部。

于 2009-09-26T11:28:34.823 回答
5

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

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

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

顺便说一句，您还可以使用自定义事件和事件命名空间：

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

于 2009-09-26T11:32:56.737 回答
4

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

我通常使用（CSS和JS）：

一个通用文件：

  • 项目.css

每页一个：

  • project_welcome.css

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

这样，您可以应用一些组织技术，而不会疯狂地管理单个大文件。

HTH 亚历克斯

于 2009-09-26T11:36:11.597 回答
0

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

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

于 2009-09-28T03:52:54.860 回答