《JavaScript Dom编程艺术》用例总结
页首HTML 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jay Skript and the Domsters</title>
<script type="text/javascript" src="scrpits"></script>
<link rel="stylesheet" type="text/css" href="styles\basic.css">
</head>
<body>
<header>
<img src="image/head.jpg" />
<nav>
<ul>
<li><a href="index.html" class= "hear">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<p id = "info">
欢迎来到首页
</p>
</article>
<script type="text/javascript" src="scripts\global.js"></script>
</body>
</html>
JS代码
function addLoadEvent(fun) { var oldload = window.onload; if(typeof window.onload != "function") { window.onload = fun; } else { window.onload = function() { oldload(); fun(); } } } function insertAfter(neweleMent , targeElement) { var parent = targeElement.parent; if(neweleMent === parent.lastElement) { parent.appendChild(neweleMent); } else { insertAfter(neweleMent, targeElement.nextSibling); } } function addClass(element, value) { if(!element.className) { element.className = value; } else { var newClassName = element.className; newClassName += ""; newClassName += value; element.className = newClassName; } } function highlightPage() { if(!document.getElementsByTagName) return false; if(!document.getElementById) return false; var header = document.getElementsByTagName('header'); if(!header) return false; var nav = header[0].getElementsByTagName('nav'); if(!nav) return false; var link = nav[0].getElementsByTagName('a'); var links; for(var i =0 ; i< link.length; i++) { links = link[i].getAttribute("href"); if(window.location.href.indexOf(links) !== -1) { link[i].className = "hear"; } else { link[i].className = "" } } } function showSection(id) { return function() { var artickle = document.getElementsByTagName('section'); for(var i =0 ; i< artickle.length; i++) { if(artickle[i].id !== id) { artickle[i].style.display = "none"; } else { artickle[i].style.display = "block"; } } }; } function findId() { var element = document.getElementsByTagName('article'); var element_a = element[0].getElementsByTagName('a'); for(var i = 0 ; i<element_a.length; i++) { var sectionId = element_a[i].href.split("#")[1]; if(!document.getElementById(sectionId)) continue; document.getElementById(sectionId).style.display = "none"; element_a[i].onclick = showSection(sectionId); } } addLoadEvent(highlightPage); addLoadEvent(findId);
在本例中， 始终遵循如下几个要素来设计实现工程：
一. 平稳退化：
平稳退化是指当浏览器禁止使用JS的时候， 那么网站还应该能够正常实现， 只不过在性能上有所折扣。可以通过如下手段来实现平稳退化：
a.结构和样式分离：
使用CSS技术将网站的设计和结构分离， 能够更专注于样式。同时，可以确保平稳退化， 不具备CSS的网页仍然可以呈现基本结构。
b.渐进增强：
用一些额外的信息层去包裹原始数据。使用标记良好的HTML标签。
二， 向后兼容
主要是能让以前版本的浏览器能够支持新的JS特性。 方法如下：
a.对象检测：
在JS里面万物结尾对象， 那么我们就可以用 if(!object) return false; 来检验是浏览器是否支持。
b. 浏览器嗅探技术
由于历史原因， 以及越来越复杂的浏览器， 这种方法逐渐被取代了。
三.性能考虑
提高性能的几种方法：
a.尽量减少访问DOM和尽量减少标记
过多的不必要的元素会增加DOM树的规模，增加遍历DOM树以查找特性元素的时间。比较好的处理办法是将查找结果存储起来，已被以后使用。
b.合并和放置脚本
将多个脚本合并到一个脚本中， 减少请求数量，这个是性能优化时首先考虑的。
同时， <script> 标签应该放在文档的末尾，</body>之前。 这样就可以让页面变得更快。
c .压缩脚本
使用专门的工具进行压缩。
以上。
