《JavaScript Dom 编程艺术》读书笔记-第5章

上一篇随笔中记录了用JavaScript建一个基础图片库，但实际上还有很多地方可以改进。第五章将逐步进行改进，这一章里需要明白的道理是达到目标的过程和达到目标同样重要~

第五章：最佳实践

5.1 过去的错误

如果要使用JavaScript，就要确认，这么做对于用户的浏览体验产生怎样的影响，如果用户的浏览器不支持JavaScript怎么办？

5.2 平稳退化

平稳退化：如果正确使用JavaScript脚本，就可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利访问你的网站。即，虽然某些功能无法使用，但最基本的操作仍然能顺利完成。

例子：在新窗口里打开一个链接。（点击某个链接时弹出一个新窗口）

ps：应该旨在绝对必要的情况下才使用弹出窗口，因为这将牵涉到网页的可访问性问题。

window.open(URL,name,features);
//三个参数都是可选
//第一个参数代表想在新窗口中打开的URL地址，如果省略，将打开空白的窗口。
//第二个参数是新窗口的名字。可以通过这个名字与新窗口通信。
//第三个参数是以逗号分隔的字符串，其内容是新窗口的各种属性。原则：新窗口的浏览功能要少而精。

一个典型应用：

function popUp(winURL){//将打开一个320像素宽，480像素高的新窗口“popup”
    window.open(winURL,"popup","width=320,height=480");
}

1. 在 HTML中调用此函数的一个方法就是使用“javascript: ”伪协议，让我们通过一个链接来调用JavaScript函数。

<a href="javascript:popUp('https://www.baidu.com')">example</a>

在较老的浏览器中尝试打开链接但失败，支持这种伪协议但禁用JavaScript的浏览器会什么也不做。总之这种方式不好。

2. 用onclick事件处理函数来调用popUp函数。

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

也不能平稳退化。

3. 第2种的改进，满足平稳退化

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

5.3 向CSS学习

CSS 层叠样式表，能够帮助你将web文档的内容结构（标记）和版面设计（样式）分离开来，这样能保证页面的平稳退化。

渐进增强：用一些额外的信息层去包裹原始数据。按“渐进增强”原则创建出来的页面几乎都符合平稳退化。

“标记良好的内容就是一切”，即使去掉CSS，文档的内容也可以访问。

5.4 分离JavaScript

之前的JavaScript已经和HTML分开了，问题出在内嵌的事件处理函数中。

 <a href="https://www.baidu.com" class="popup">example</a>

window.onload=function(){ //在HTML加载完毕后会触发onload事件
    var links=document.getAttributeByTagName("a");//将文档里的所有连接发至到一个数组里。
    for (var i=0;i<links.length ;i++ )//遍历数组
    {
                //如果某个classs属性等于popup，就在这个链接被点击时调用popUp函数。
        if (links[i].getAttribute("class")=="popup")
        {
            links[i].onclick=function(){
                popUp(this.getAttribute("href"));
                return false;
            }
        }
    }
}

5.5 向后兼容

对象检测：检测浏览器对于JavaScript的支持程度。

window.onload=function(){
    if (!document.getAttributeByTagName)//检测 浏览器是否支持getAttributeByTagName这个方法
    {
        return false;
    }
    var links=document.getAttributeByTagName("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
            }
        }
    }
}

5.6 性能考虑

尽量减访问DOM，尽量减少标记。

合并和放置脚本。

压缩脚本。

5.7 小结

平稳退化。

分离JavaScript。

向后兼容。

性能考虑。