DOM 编程四大原则

发表于 | 分类于

《Javascript DOM 编程艺术》中第五章有四个概念讲述的非常好，分别是平稳退化、分离JavaScript、向后兼容、性能考虑。这也是很多野生前端选手可能忽视的地方。

平稳退化

让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利的访问你的网站，这就是平稳退化的思想。
例如，当我们要实现一个弹窗效果可能会写到：

1
2
<a href="javascript:popUp('http://www.example.com/')"></a>
// <a href="#" onclick="popUp('http://www.example.com/')"></a>
1
2
3
function popUp(objectUrl) {
	window.open(objectUrl,'popup','width=320,height=480');
}
但有两种情况使得网页的可访问性降低：一是当用户禁用JavaScript时,点击无效；二是大多数搜索机器人无法理解js代码，它们在搜索引擎上的排名就会降低。因此平稳退化的目的就是当Javascript无效时，仍能让我们的网站显示给用户有效的信息。这里实现平稳退化的方式如下：
1
<a href="http://www.example.com/" onclick="popUp(this.href);return false;"></a>
1
2
3
function popUp(objectUrl) {
	window.open(objectUrl,'popup','width=320,height=480');
}

分离JavaScript

在HTML文档里使用onclick之类的属性较容易出现问题，这里我们将使用类似CSS的挂钩机制来将HTML和JavaScript分离开来，这样将使得我们的网页健壮得多。实现方式如下：

1
<a href="http://www.example.com/" class="popup"></a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.onload = prepareLinks;
function prepareLinks() {
	var links = document.getElementsByTagName('a');
	for (var i = 0; i < links.length; i++) {
		if (links[i].className == "popup") {
			links[i].onclick = function () {
				popUp(this.href);
				return false;
			}
		}			
	}
}
function popUp(objectUrl) {
	window.open(objectUrl, "pop", "width=320,height=480");
}
这里的基本思想是给每个需要弹窗的a标签加上样式popup，然后再循环遍历文档里所有具有该样式的a标签，并给其添加上相应的点击事件，并返回false，使得href值无效。这里有一点要注意的是需要在文档加载完成之后再遍历所有的a标签，因此需要用到window的onload方法。这样的实现思想就比较好的演示了如何将HTML和JavaScript分离开来。

向后兼容

考虑到部分老的浏览器对JavaScript支持的并不是很好，我们需要用到对象检测的方法来给我们的浏览器设置门槛。一般的思想是：

1
2
3
4
5
6
if (condition) { statements } 
<!-- 例如 -->
if (document.getElementById('pop')) {
	var pop = document.getElementById('pop');
	...
}
也就是说如果浏览器支持某行为，我们则使用某段代码，但这样会给我们的方法添加很多碍于阅读的花括号。因此我们不妨换一个思维：
1
if (!condition) { return false; }
即在使用的方法前进行否定判断：“你若不支持我，我就离开”。这是一种更为简洁的思路，在使用相应的api之前进行对象检测，检测过关则进行下一步，不过关则离开。其代码也更加清晰。

性能考虑

基本的性能提升策略有以下几种：

  • 尽量减少访问DOM和尽量减少标记
  • 合并和放置脚本
  • 压缩脚本