《JavaScript精粹(修订版)》——1.4 为没有JavaScript的用户着想(渐进增强)-阿里云开发者社区

开发者社区> 异步社区> 正文

《JavaScript精粹(修订版)》——1.4 为没有JavaScript的用户着想(渐进增强)

简介: 有时候,开发者可能会碰到除JavaScript之外再无更好的办法来实现功能的情况。这时,我认为用一些静态信息来提示用户网页遇到兼容性问题是合理的(当然,这些和技术无关)。不过,在大多数情况下,应尽量避免显示这种信息,除非它的确有意义而且是必须要告知用户的。
+关注继续查看

本节书摘来自异步社区《JavaScript精粹(修订版)》一书中的第1章,第1.4节,作者:【英】Edwards, J. , 【澳】Adams, C.著,更多章节内容可以访问云栖社区“异步社区”公众号查看

1.4 为没有JavaScript的用户着想(渐进增强)

由于以下原因,用户可能会无法使用JavaScript:

  • 他们用的设备根本就不支持脚本,或者仅以某种受限制的方式支持;
  • 他们位于代理服务器或者防火墙之后,JavaScript代码被过滤;
  • 他们故意禁用了JavaScript。

第一种原因的用户很多,而且这些用户还在逐渐增长,包括一些小屏幕设备,如PDA;中等大小屏幕设备,如WebTV和Sony的PSP;还有一些老的不支持JavaScript的浏览器。

也许上面列出的那些用户占用户总数的比例不算很高,但那不重要。不管怎样,一些用户没有JavaScript,但还是需要向他们提供服务。没有什么好的办法来统计这样的用户究竟有多少,因为从服务器端检测客户端对JavaScript的支持是非常不可靠的,不过我曾经看过一个数据,关闭支持JavaScript功能的用户的比例大约是5%~20%,当然,前提是我们把各种搜索引擎的爬虫机器人程序也算成了用户。

方 法
一种解决方案就是使用HTML的noscript元素。那么页面内容就可以被所有不支持脚本的浏览器以及被关闭了JavaScript支持的浏览器正确查看。

虽然这也是一个可行的办法,不过在实际操作中不是太有用。因为noscript无法区分浏览器对脚本的支持程度。那些只是部分支持或者受限制地支持JavaScript的浏览器会试图执行比较复杂的脚本,因为它们甚至可能根本就不认识noscript标签,其结果是在这些浏览器中代码会不正常地终止,然后什么也没干。

一个更好的办法是使用静态HTML,然后通过脚本对静态内容进行修改或者增加动态行为。

下面看一个简单例子。这个代码片段是用一个未排序的列表作为主菜单结构,产生一个DHTML菜单。第15章将详细讨论有关内容,不过这个简单的例子在这里可以充分展示我们的方法:

<ul id="menu">
 <li><a href="/">Home</a></li>
 <li><a href="/about/">About</a></li>
 <li><a href="/contact/">Contact</a></li>
</ul>
<script type="text/javascript" src="menu.js"></script>

链接的列表是纯HTML,所以对于所有的用户来说,不管使用什么浏览器,都可以正常显示。如果脚本是被支持的,那么menu.js脚本就可以执行动态的操作,但是如果脚本不被支持时,内容仍然会显示。我们没有用什么明确的方法来区分不同浏览器对于JavaScript的支持程度,而只是提供了动态的内容,如果浏览器能够处理,它就会去处理,如果不能,那么只显示静态内容就行了。

这种脚本编写方法叫做渐进式增强,并且这是我们在整本书中所使用的方法。

讨 论
传统的方法是,用纯JavaScript代码生成独立的动态菜单,然后用noscript元素提供一个备用的静态的内容:

<script type="text/javascript" src="menu.js"></script>
<noscript> 
  <ul>
   <li><a href="/">Home</a></li>
   <li><a href="/about/">About</a></li>
   <li><a href="/contact/">Contact</a></li>
  </ul>
</noscript>

不过,正如前面所说的,这样的代码在很多设备中无效,因为对JavaScript的支持往往不是一个简单的“是或不是”的问题。而这个方法提供了给所有浏览器的默认内容,又提供了一个可能有效的脚本功能。
不要提示太多!

不管是这种方法还是noscript元素,都不应该被用来产生这样的消息给用户:“请打开JavaScript选项再继续。”对于某些用户,这种消息有点蛮横(“我干嘛要听你的?”);对于另外一些用户,这种消息可能是无用的(“我压根无法打开!”)或者根本是无意义的(“JavaScript是啥?”)。就像很多启动页面总是说:“请升级您的浏览器”。这种消息对于大多数Web用户而言,就像在路上看到一个牌子,提示:“请换一辆车。”

有时候,开发者可能会碰到除JavaScript之外再无更好的办法来实现功能的情况。这时,我认为用一些静态信息来提示用户网页遇到兼容性问题是合理的(当然,这些和技术无关)。不过,在大多数情况下,应尽量避免显示这种信息,除非它的确有意义而且是必须要告知用户的。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【2020 Java基础快速学习路线】写了很久,这是一份最适合普通大众、非科班的路线
【2020 Java基础快速学习路线】写了很久,这是一份最适合普通大众、非科班的路线
3 0
云迁移SaaS如何入驻阿里云工具应用市场
HyperMotion SaaS是一款基于云原生理念开发的云迁移和云灾备的SaaS平台,2020年7月,HyperMotion迁移版本正式入驻阿里云工具应用市场。用户登陆阿里云后,可以直接以SaaS模式使用产品,而无须再到云市场启动实例的方式。由于与阿里云的用户体系、RAM系统、支付系统彻底打通,用户在使用感受上更加便捷。
5 0
雇佣劳工冒充AI?校园外卖机器人竟是远程人工操纵,时薪2美元
活跃在美国著名学府加州大学伯克利分校(UC Berkeley)校园的「明星」外卖机器人 Kiwibot,尽管看起来像是自动驾驶,实际上却是雇佣了远在哥伦比亚的真人进行远程人工操纵。最近,创业公司 Kiwibot 也陷入了用真人冒充 AI 的舆论漩涡。
3 0
除了闹过腥风血雨的fastjson,你还知道哪些Java解析JSON的利器?(1)
除了闹过腥风血雨的fastjson,你还知道哪些Java解析JSON的利器?
4 0
别翻了,Lambda 表达式入门,看这篇就够了(1)
别翻了,Lambda 表达式入门,看这篇就够了
3 0
JVM中的类加载器
把类加载阶段中的"通过一个类的全限定名来获取描述此类的二进制字节流"这个动作放到Java虚拟机外部去实现,以便让应用程序自己决定如何去获取所需要的类,实现这个动作的代码模块称为类加载器。
3 0
除了闹过腥风血雨的fastjson,你还知道哪些Java解析JSON的利器?(2)
除了闹过腥风血雨的fastjson,你还知道哪些Java解析JSON的利器?
5 0
将博客从Hexo迁移至Hugo
自从了解了Github Pages这种静态博客后,开始喜欢上这种技术人员才能鼓捣明白的协作方式。自己的博客系统也从最初的Octopress,切换到Hexo,直到最近看到Hugo这种号称全球最快的静态博客系统,被适合技术人员的风格样式所吸引。于是在经历了三天的折腾后,顺利的将Hexo迁移至Hugo中。
4 0
教妹学Java(七):究竟什么是JVM?
教妹学Java(七):究竟什么是JVM?
3 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
11938
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载