javascript Dom编程艺术读书笔记之最佳实践

[TOC]

---

####1.平稳退化 正确使用javascript脚本，让访问者在不支持javascript状况下，仍然能够顺利浏览你的网站 ####2."javascript:"伪协议 经过一个连接调用伪协议

<a href="javascript:popUp('http://www.example.com/');">Example</a>

3.内嵌事件处理函数

<a href="#" onclick="popUp('http://example.com/'); return false;">Example</a>

、#是仅供内部文档使用的连接记号，建立空连接

4.平稳退化的重要性

搜索机器人浏览网页，通常会禁用图片和javascript，若是你的网站不支持平稳退化，会在搜索引擎的排名上大打折扣 如何作到平稳退化，在连接里把href的值设置为真实的连接

<a href="http://example.com/" onclick="popUp(this.href); return false;">Example</a>

5.渐进加强

用一些额外的信息去包裹原始数据。按照此原则设计的网页基本都符合“平稳退化”原则 css把代码从文本文档中分离出来，这个结论一样适用于javascript

6.分离javascript

把javascript调用代码行文与HTML文档分开,把事件添加在特定的ID，class中 当这个连接被点击时，将调用popUp()函数

<a href="http://www.example.com" class="popUp">Example</a>

具体步骤

• 把文档连接放在一个数组里
• 遍历数组
• 若是某个连接class属性值等于popUp，则点击连接时调用该函数 A.把连接的href属性值传入函数 B.取消点击的默认行为

var links = document.getElementByTagName("a");
for (var i=0; i<links.length; i++)
{
	if (links[i].getAttribute("class") = "popUp"){
	links[i].onclick=function(){
		popUP(this.getAttribute("href"));
		return false;
		}
	}
}

javascript加载时间不能肯定，必须使代码在文档加载时当即执行。文档加载完成时将触发一个事件，这个事件有本身的事件处理函数。 document对象是window对象的一个属性，当window对象触发onload事件，document对象已经存在。 将本身的javascript打包在prepareLinks函数，将函数添加在onload事件中，DOM能够正常工做了

window。onload = prepareLinks；
function prepareLinks{
	var links = document.getElementByTagName("a");
	for (var i=0; i<links.length; i++){
		if (links[i].getAttribute("class") = "popUp"){
			links[i].onclick=function(){
			popUP(this.getAttribute("href"));
			return false;
			}
		}
	}
}

把popUp函数保存到javascript文件中

function popUp(winURL){
	window.open(winURL, "popUp", "width=320, height=480");
}

7.对象检测

检测对浏览器的支持程度 把方法打包在if里，经过条件表达式的求值结果，true or false来决定采起怎样的行动 用if会多花括号，可使用逻辑非操做符。

if (!document.getElementById){
	ruturn false;
}

能够简写成if (!document.getElementById) ruturn false; 在上面例子中插入一条if语句，检测是否支持该方法

window.onload = prepareLinks；
function prepareLinks{
	if (!document.getElementBuTagName) return false;
	var links = document.getElementByTagName("a");
	for (var i=0; i<links.length; i++){
		if (links[i].getAttribute("class") = "popUp"){
			links[i].onclick=function(){
			popUP(this.getAttribute("href"));
			return false;
			}
		}
	}
}

8.浏览器嗅探技术

保证向后兼容性的另外一种方法。 ”浏览器嗅探”指经过提取浏览器供应商提供的信息来解决向后兼容性问题 有很大的技术风险

• 浏览器会撒谎
• 为适应不一样浏览器，脚本会变得复杂

此技术正在被对象检测替代 ####9.性能考虑

1. 尽可能少访问DOM，尽可能减小标记

if (document.getElementByTagName("a").lenth > 0){
	var links = document.getElementByTagName("a");
	for(var i=0; i<links.length; i++){
		//对每一个连接处理
   }
}

上述代码性能不高，浪费了一次搜索

var links = document.getElementByTagName("a");
if (links.length > 0){
		for(var i=0; i<links.length; i++){
		//对每一个连接处理
}

这样搜索DOM的次数下降为1次 2. 合并和放置脚本 推荐把多个javascript文件放到一个中 脚本在标记中的位置也对初次加载时间有很大的影响。 按照渐进加强和分离javascript的观点，把全部script标签放在文档末尾，/body以前，页面更快。

3. 压缩脚本 指把脚本中的没必要要的字节，如空格和注释，通通删除。与不少工具能够替代你作这种事 你应该有两个版本，一个工做副本，一个精简副本，精简版本应有min字样以便区分 推荐有表明性的代码压缩工具

• Douglas Crockford的JSMin (http://www.crockford.com/javascript/jsmin.js)
• 雅虎的YUI Compressor (http://developer.yahoo.com/yui/compressor)
• 谷歌的Closure Compiler (http://closure-compiler.appspot.com/home)