JS平稳退化——《JavaScript DOM编程艺术》总结

原创 xdan 随笔 JavaScript 195阅读 2017-05-15 17:43:05 举报

个人理解,JS平稳退化即当浏览器不支持或者禁用JS时网用户仍然可以顺利地浏览你的网站。在这里引用书里的几段话来说明一下“平稳退化”的重要性:

“请想象一下,有个访问者来到了你的网站,他总是在浏览Web时同时禁用图像和JavaScript。你肯定认为如今这样的用户已经非常少见,而事实也正是如此,但这个访问者非常重要。
你想象的那个用户是一个搜索机器人(searchbot)。搜索机器人是一种自动化程序,它们浏览Web的目的是为了把各种网页添加到搜索引擎的数据库里。各大搜索引擎都有类似的程序。目前,只有极少数搜索机器人能够理解JavaScript代码。所以,如果你的JavaScript网页不能平稳退化,它们在搜索引擎上的排名就可能大受损害”。——《JavaScript DOM编程艺术》

简单来说,就是正常情况下你的JS不支持平稳退化并没有什么影响,但是存在这样一些用户,他们要求你必须实现平稳退化,否则你将遭受一定的损失。

接下来用一个简单的小例子来说明一下怎么实现平稳退化:

一、首先我们实现一个切换图片的网页

html 代码

二、现在我们来一步步检查它是否符合平稳退化的需求,若不是,则帮助其实现平稳退化

我们发现它的JavaScript与HTML标记并不是分离的,它们混杂在了一起。理想情况下,应该在HTML外部文件里完成onclick事件处理函数添加的工作,那么现在我们就来实现这样的预想:

“把JavaScript代码移除HTML文档并不是难事,但为了让浏览器知道页面里都有哪些链接有着不一样的行为,我必须找到一种‘挂钩’把JavaScript代码与HTML文档中有关标记关联起来。”——《JavaScript DOM编程艺术》

1.我们采用给整个清单设置一个独一无二的ID来作为将JS与HTML中有关标记关联起来的一个“挂钩”,设置<ul id="imagegallery">;

2.在JS中实现onclick事件处理函数与HTML标记的关联。由于浏览器的多种多样,它们对JS的理解也五花八门,所以我们在这里检测了所有用到的JS方法是否得到浏览器的支持

javascript 代码

3.为了执行上面的函数,我们将其绑定到网页加载完毕立即会触发的一个onload事件上,但是由于每个事件处理函数只能绑定一条指令,当我们需要绑定多个指令时后面绑定的指令将会覆盖前面绑定的指令,所以此处给出一个能够实现多条指令绑定的例子(单单对于我们上面的例子来说是不需要实现多指令绑定的,此处只是一个拓展,这个脚本在很多地方非常有用)

javascript 代码

我们使用这个小脚本将prepareGallery函数绑定到window.onload事件处理函数上

javascript 代码

4.第一步中showPic函数的实现的前提假设是HTML页面中各种我们需要的ID或者属性都存在,但是实际情况中我们也许并不能实时掌握我们需要的这些真的存在,也许被别人误删,也许被换了名字都未可知,一旦这些假设存在的不存在,那么我们的程序将会报错,将会阻塞,因此我们需要增加一些语句来检测这些元素是否真的存在

javascript 代码

5.第二步的步骤2中prepareGallery函数是在假设showPic函数肯定会正常返回的前提下实现的,但是如果showPic由于任何原因没有正常执行,那么将出现点击任何一个链接都没有反应的现象,所以此处需要根据showPic是否成功来决定是否取消onclick事件的默认行为(跳页,当onclick返回false时,不会跳页)

javascript 代码

最终得到的代码,此时当浏览器禁用JS时网页仍然可以正常使用:

html 代码

注:此处的style和script都应该放在外部的css和js文件中,下面插入的图片是为了代码里的图片可以正常显示,可自行忽略

宫崎骏-1

宫崎骏-2

宫崎骏-3

宫崎骏-4

如有错误,望大家不吝赐教

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复