Yaocylulu

导航

《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。

向后兼容。

性能考虑。

 

posted on 2018-11-11 23:04  Yaocylulu  阅读(128)  评论(1编辑  收藏  举报