Javascript DOM编程艺术读书笔记5

发表于 | 分类于 ，

第5章 最佳实践

  • 平稳退化：如果正确地使用了JavaScript脚本，就可以让访问者在他们地浏览器不支持JS地情况下仍能顺利地浏览你地网站。
1
2
3
4
5
6
7
8
function popUp(winURL){
	window.open(winURL,"popUp","width=320,height=480");
}
<a href="javascript:popUp('http://www.baidu.com/');">Example</a> //伪协议，不好
<a href="#" onclick="popUp('http://www.baidu.com/'); return false;">Example</a> //使用内嵌事件处理函数，不好
<a href="http://www.baidu.com/" onclick="popUp('http://www.baidu.com/'); return false;">Example</a> 
//或者采用更加简介的写法 
<a href="http://www.baidu.com/" onclick="popUp(this.href); return false;">Example</a>
  • getElementsByTagName记住这其中有S !!

CSS渐进增强

  • 渐进增强就是用一些额外的信息层去包裹袁术数据，按照渐进增强原则创建出的来的网页几乎都符合平稳退化原则

分离JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//<a href="http://www.example.com/" class="popup"> Example </a>
//要把点击链接之后的行为与html分离可以使用以下代码

//行为与结构分离的例子
function popUp(winURL) {
    window.open(winURL, "popup", "width=320,height=480");
}

//JS代码必须在html文档全部加载到浏览器后开始执行。将JS代码打包在prepareLinks函数里，并把这个函数添加到window对象的onload事件上去。

window.onload = prepareLinks;

function prepareLinks() {
    //让脚本有更好的向后兼容性，如果浏览器不能理解getElementByTagName就退出函数。
    if (!document.getElementsByTagName) return false;
    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;
            }
        }
    }
}

总结

与DOM脚本变成工作有关的问题：

  1. 平稳退化：如果正确地使用JS脚本，就可以让访问者在他们的浏览器不支持JS的情况下仍能顺利地浏览你的网站
  2. 向后兼容：确保网页在古老的浏览器中也可以被正常浏览
  3. 分离JS：将JS和HTML分离开来
  4. 性能考虑：脚本对web应用整体性能的影响。应该尽量减少访问DOM和尽量减少标记、合并和防止脚本、压缩脚本。