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和尽量减少标记
  • 合并和放置脚本
  • 压缩脚本