最近在读<<JavaScript Dom编程艺术>>(http://www.douban.com/subject/1921890/)一书，总结了一部分有价值的设计思想。
网页可以由以下三个层次构成一个共同体：
-
结构层
-
表示层
-
行为层
结构层： 网页的结构层是由HTML或XHTML之类的标记语言负责创建。标签对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何有关内容的信息。
表示层： 网页的表示层由CSS负责创建。CSS对“如何显示有关内容”的问题做出了回答。
行为层： 网页的行为层负责回答“内容应该如何对事件 做出反应”这一问题，这一层主要通过JavaScript和DOM技术来实现。
-
设计一个网站或者WEB应用程序 ，需要按照结构、表示、行为三个层次对内容进行分离。这意味着：
-
-
使用（X）HTML去搭建文档的结构。
-
使用CSS去设置文档的呈现效果。
-
使用DOM脚本去实现文档的行为。
-
这本书还介绍每一个层次的分离方法：结构层和行为层的分离是比较简单，CSS本身提供了一系列机制来对HTML内容添加显示样式。本书作者重点介绍了结构层（HTML）和行为层（JS脚本）分离的方法。 如对于如下的HTML文件 test.html:
<body>
<div id="imagegallery">
<a href="www.a.com" />
<b href="www.b.com" />
<b href="www.b.com" />
</div>
</body>
</html>
可以将网页中的动作分离到以下的JS文件test.js:
// 为每个a标签添加点击动作
function prepareGallery() {
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for ( var i = 0; i < links.length; i++) {
links[i].onclick = function() {
return showPic(this);
}
}
}
// addLoadEvent用于添加在页面加载完毕时执行的函数
function addLoadEvent(func) {
var oldonLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(prepareGallery);
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
