第五章 最佳实践

平稳退化

JS用window对象的open()方法来创建新的浏览器窗口。

window.open(url,name,feature);

第一个参数：要打开网页的url。
第二个参数：窗口的新名字，可以通过这个名字与新窗口通信。
第三个参数：是一个字符串，内容是新窗口的属性，尺寸…

伪协议
真协议如http，伪协议则是一种非标准化的协议

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

支持伪协议的浏览器可以运行，不支持或者禁用的就不行了

内嵌的事件处理函数

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

如果禁用了浏览器的javascript功能，和上面代码相同，也不能平稳退化。
正解

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

分离JavaScript

在html文档里使用诸如onclick之类的属性也是一种既没有效率又容易引发问题的做法。如果我们用一个“挂钩”，如css中的id、class属性，把JS代码调用行为与HTML文档的结构和内容分开，网页就会健壮的多。

var links = document.getElementsByTagName("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;
		}
	}
}

但是上述代码，因为第一句，可能不能正常执行。如果JS文件是在头部调用的，它将在HTML文档之前加载到浏览器里。如果在身体底部，也不能保证哪个文件最先加载结束。因为脚本加载时文档可能不完整，所以没有完整的DOM模型，getElementsByTagName等方法就不能正常执行。

综上：必须让这些代码在HTML文档全部加载到浏览器之后马上开始执行。

文档被加载到一个浏览器里，document对象又是window对象的一个属性。当window对象触发onload事件时，document对象已近存在。
所以我们要像下面修改代码，DOM就可以正常工作了。

window.onload = prepareLinks;
function prepareLinks() {
	var links = document.getElementsByTagName("a");
	for (var i=0; i < links.length; i++){
		links[i].onclick = function () {
			popUp(this.getAttribute("href"));
			return false;
	}
}
function popUp(winURL){
	window.open(winURL,"popup","width=320,height=480");
}

向后兼容

对象检测

检测浏览器对JS的支撑程度，把某个方法打包在一个if语句里，来决定应该采取怎样的行动。这种检测称为对象检测。
检测的时候一定要删除方法名后面的圆括号

浏览器嗅探技术

指通过提取浏览器供应商提供的信息来解决向后兼容的问题。（逐渐淘汰）

性能考虑

尽量少访问DOM和尽量减少标记

低性能案例

if (document.getElementsByTagName("a").length > 0){
	var links = document,getElementsByTagName("a");
	for( var i = 0; i < links.length; i++){
		//对每个链接做点处理
	}
}

低性能原因：不管什么时候，只要是查询DOM中的某些元素，浏览器都会搜索整个DOM树。
正解

var links = document,getElementsByTagName("a");
if (document.getElementsByTagName("a").length > 0){
	for( var i = 0; i < links.length; i++){
		//对每个链接做点处理
	}
}

合并和放置脚本

<script src="script/functionA.js"></script>
<script src="script/functionB.js"></script>
<script src="script/functionC.js"></script>
<script src="script/functionD.js"></script>

上面的做法是不推荐的，推荐的是把四个脚本合并到一个脚本文件中。

脚本放置的位置："</b o d y>"标签前面。

压缩脚本

所谓压缩脚本，就是把脚本文件中不必要的字节，如空格和注释，都删除掉，从而达到“压缩“文件的目的。