代码之家 › 专栏 › 技术社区 › Edward Tanguay

目前最好的html/css/javascript配置是什么?

w3c css html jquery javascript

Edward Tanguay · 技术社区 · 15 年前

我对jquery有了更多的了解,因此建立了一个 html/javascript/css基本站点 我用它来做所有的测试。

因为这些测试最终会变成 php和asp.net mvc 网站,我想利用这个机会,重新了解现代浏览器和web标准的基本知识,然后再在此基础上构建脚本语言。

我已选择使用:

XHTML 1 严格的
UTF-8 编码
尽可能少的css引用(将所有内容放入 1 CSS文件 装载速度)
尽可能少的javascript引用( 1个javascript文件 加上jquery代码基引用-我假设使用谷歌 jquery代码库是提高速度的最佳实践)
当我用 http://validator.w3.org

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

下面是我的一个测试网站的示例:

索引:

<!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>

Mc.C:

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

MI. 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 回复 | 直到 15 年前

Rich Seller 15 年前

就我个人而言,我会通过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");

高温高压亚历克斯

Rob 15 年前

移动 <script> 块到 bottom of the page .

Alex Duggleby 15 年前

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

我通常使用(css和js):

一份通用文件:

CSS项目

每页一张:

欢迎使用.css项目

任何特殊组件(登录控件、广告区域视图等)也有单独的组件。

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

高温高压亚历克斯

mager 15 年前

我建议将js调用放在body标记下面。如果脚本是挂起的,那么页面可以加载并让行为(js)在事实发生后加载。我注意到这种方法大大提高了速度。

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