优化您的 Web 站点 接手一个可维护的 Web 站点并将其打磨、抛光、流线化（1）
|
- UID
- 1066743
|
优化您的 Web 站点 接手一个可维护的 Web 站点并将其打磨、抛光、流线化（1）
再次讨论维护和组织 在上一篇文章中，您花费了大量时间来验证站点的 HTML 和 CSS。此外，您应该已经将页面的样式组件从 HTML 本身分离出来。现在，应该重审这些决定了，对页面的特定部分进行进一步分离，并确保 JavaScript 像 CSS 一样干净地从页面中分离出来。
HTML 和 CSS 不混合 无需将这一主题讲透（实在太多了），值得再提一次的是您需要 将 CSS 从主要 Web 页面中提取出来。CSS 应该是在外部样式表中，通常命名为类似[page-name].css 或 [category/group-name].css 的名称。因此，您可能具有一个名为 homepage.html 的页面，而其 CSS 样式表名为homepage.css，或者甚至是 default.css。您还会看到许多名称类似 mobile.css 或 print.css 的 CSS 文件，旨在分别格式化呈现给移动设备或打印机的文档。这些名称不仅仅是为了方便；它们使得查明站点上正在发生的事情变得非常直观，而这意味着搜索硬盘驱动器将花费更少的时间 —— 从而发生更少的失败。您和您的合作者快速无阻地工作时获得的效率提升实际上是不可测量的，但任何有经验的开发人员或管理者都会告诉您这十分显著。
曾经有一种争论认为，浏览器查找和加载附加 CSS 文件（以及 Web 页面 HTML 文件）所花费的时间是为了避免外部 CSS。甚至把我们活在一个 DSL、电缆调制解调器、T1 甚至 T3 世界的现实抛到一边，这种争论实在太愚蠢了（这已经够仁慈了）。除二进制算术之外，几乎就没有比计算机查找文件（假设文件位于相同的物理驱动器上）并在文件正好是文本的时候将其加载为纯文本更快 的操作了。事实上，浏览器将 Web 页面转换为 DOM 树（类似于树的节点组织）并可视化地呈现这些节点所花费的时间要比加载外部文本文件所花费的时间多得多。所以使用外部 CSS 吧，让自己轻松一些。
将 JavaScript 移动到外部文件中不是针对 JavaScript 如果选择 VBScript 或 ASP.NET，或 Microsoft® 的 Ajax 风格，则在此讨论的与 JavaScript 有关的所有原则仍然适用。只需在内心中将选择的客户端技术 “JavaScript” 替换掉就行了。
将 HTML 与 CSS 分离的所有原因都是通用的；换句话说，并非因为 CSS 和 HTML 不能在一起，而是因为一般的最佳实践就是将结构（HTML）和内容（HTML 中的文本或数据）分开表示。这在松散意义上称为关注点分离。在编程领域，您甚至将看到一种类似的技术，称为单一职责原则，即将一个软件工件（类、模块等）仅做一件事情视为好的形式。将此原则应用到 Web 空间：HTML 文件代表数据；CSS 样式表代表特定结构化数据集的样式。因为这是两个不同的任务，所以它们归入两个不同的文件。
对于 Web 页面中的逻辑（通常用 JavaScript 表示），这同样适用。正如您通常会在 HTML 文档的头部（head 元素中）内看到 CSS 嵌套在style 标记中一样，您还会在 HTML 文档的头部看到JavaScript 嵌套在 script 标记中，如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
| <![CDATA[
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script language="JavaScript" type="text/javascript">
/* Create a new XMLHttpRequest object to talk to the Web server */
var request = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
request = false;
}
}
@end @*/
if (!request && typeof XMLHttpRequest != 'undefined') {
request = new XMLHttpRequest();
}
function getImageDetails() {
var url = "lookupImage.php?image=" + escape(getImageName(this.src));
request.open("GET", url, true);
request.onreadystatechange = showImageDetails;
request.send(null);
}
function showImageDetails() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText;
var splitResponse = response.split('|');
var title = splitResponse[1];
var date = splitResponse[2];
var description = splitResponse[3];
var titleElement = document.getElementById("info-title");
var dateElement = document.getElementById("info-date");
var descriptionElement = document.getElementById("info-text");
replaceText(titleElement, title);
replaceText(dateElement, date);
replaceText(descriptionElement, description);
}
}
}
<!-- and so on... there's a LOT more JavaScript here -->
</script><title>Hoverbox Image Gallery</title>
<style type="text/css">
*
{
border: 0;
margin: 0;
padding: 0;
}
/* =Basic HTML, Non-essential
----------------------------------------------------------------------*/
a
{
text-decoration: none;
}
body
{
background: #fff;
color: #777;
padding: 50px;
}
#page {
position: relative;
}
#images {
float: left;
width: 400px;
}
#details {
color: #000;
}
h1
{
background: inherit;
border-bottom: 1px dashed #ccc;
color: #933;
font: 32px Georgia, serif;
font-weight: bold;
margin: 0 0 20px;
padding: 0 0 15px;
text-align: center;
}
<!-- and so on... there's even more CSS that would follow -->
</style></head>
]]>
|
当然，这是两个 领域的最糟的部分：HTML 和 CSS 位于头部。但所有这些可以提取出来并放置在外部文件中；假设它们称为 hoverbox.css 和hoverbox-ajax.js。那么，上面糟糕的代码就可以更改为：
1
2
3
4
5
6
7
8
9
10
| <!CDATA[
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />]]><b>
<script language="JavaScript" src="hoverbox-ajax.js"> </script></b>
<!CDATA[<title>Hoverbox Image Gallery</title>]]><b>
<link rel="stylesheet" href='css/hoverbox.css'
type="text/css" media="screen, projection" />
<!--[if IE]><link rel="stylesheet" href='css/ie_fixes.css' type="text/css" media="screen,
projection" /></b><!CDATA[<!endif]--></head>
]]>
|
注意：在这种情况下，实际上有两个 CSS 样式表：hoverbox.css（对于所有浏览器），和 ie_fixes.css 中特定于 Internet Explorer 的 CSS 的修正集合。有关此特定示例代码的详细信息，请参阅本文结尾的 部分。 |
|
|
|
|
|
