《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="data: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 .压缩脚本
使用专门的工具进行压缩。
以上。
《JavaScript Dom编程艺术》用例总结的更多相关文章
- 《JavaScript Dom 编程艺术》读书笔记-第4章
我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析
先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...
- JavaScript DOM编程艺术学习笔记（一）
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
- JavaScript DOM编程艺术第一章：JavaScript简史
本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...
- 《JavaScript dom 编程艺术》 placeholder占位符IE8兼容办法。
在<JavaScript dom 编程艺术>第11章学来的. 相对于用JavaScript替换文本框的提示语句 <!DOCTYPE html> <html lang=&q ...
- 《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数
刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...
- 《JavaScript DOM 编程艺术》
前几天京东买了一本书,在豆瓣上好评如潮,买下了啃一啃,书名<JavaScript DOM 编程艺术>,在好好深造一下javaScript.一边啃,一边敲.当然应该要做好笔记.一些简单的就看 ...
- JavaScript DOM编程艺术读后感（1）—— 平稳退化
最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...
- Javascript DOM 编程艺术（第二版）读书笔记——基本语法
Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...
随机推荐
- Orchard开源ASP.NET MVC CMS简介
项目简介: Orchard CMS 是一个免费的开放源代码内容管理系统,让用户可在 Microsoft ASP.NET MVC 平台上快速创建网站.它基于灵活的扩展性框架构建,使开发人员和定制人员可通 ...
- web.xml中配置Spring中applicationContext.xml的方式
2011-11-08 16:29 web.xml中配置Spring中applicationContext.xml的方式 使用web.xml方式加载Spring时,获取Spring applicatio ...
- 如何只克隆git仓库中的一个分支？
git clone -b 例如: git clone -b 指定的分支名字
- 关于androidAsyncHttp支持https
一.AsyncHttpClient asycnHttpClient = new AsyncHttpClient(true, 80, 443); 二.或者参照源码,添加证书验证 You need imp ...
- sql每五秒插入一条数据 一次插入N条数据
1建立数据表 create table projectManage ( ID int identity primary key not null, projectName )not null, man ...
- MVC中一般为什么用IQueryable而不是用IList？用IQueryable比IList好在哪？
IList(IList<T>)会立即在内存里创建持久数据,这就没有实现"延期执行(deferred execution)",如果被加载的实体有关联实体(associat ...
- 巧用Graphviz和pvtrace等工具可视化C函数调用
http://guiquanz.github.io/2012/10/15/linux_c_call_trace/
- jquery validationEngine的使用
1.引入文件 <script src="/js/jquery-1.4.2.min.js" type="text/javascript"></s ...
- 转：C#中的委托和事件(续)
引言 如果你看过了 C#中的委托和事件 一文,我想你对委托和事件已经有了一个基本的认识.但那些远不是委托和事件的全部内容,还有很多的地方没有涉及.本文将讨论委托和事件一些更为细节的问题,包括一些大家常 ...
- [Ubuntu]在Ubuntu下搭建自己的源服务器
1.摘要 网上有很很多关于搭建源镜像的文章,但是对于一般人来讲,用不着镜像所有的deb包,只对我们能用到的感兴趣.另外,对于一些在Ubuntu的源中没有的软件,我们也可以放在我们自己的源里,这 ...