分离式脚本编程

前端技术 everyinch 1156℃ 0评论

分离地、自然地编写JavaScript程序是一个相当重要的目标。使代码可以在现代浏览器中工作,而对于古老的浏览器可以做到预留退路。如果正确地使用了JavaScript脚本,就可以让访问者在他们的浏览器不支持JavaScript的情况下仍然能顺利地浏览网站,这就是所谓的平稳退化(graceful degradation),就是说,虽然某些功能无法使用,但最基本的操作仍能顺利完成。还有一种思想叫做渐进增强(progressive enhancement),即从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能。渐进增强方案并不假定所有用户都支持javascript,而总是提供一种候补方法,确保用户可以访问(主要的)内容。
平稳退化和渐进增强的区别在于:平稳退化是从复杂的现状开始,并试图减少用户体验的供给;而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。平稳退化意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。
为了达到这个目标,可以考虑以下3点来完成一个分离式编程的应用程序:
1. 应用程序中的所有功能都需要检验。比如要访问HTML DOM则需要检验它是否存在,是否拥有需要使用的函数(比如,getElementById())
2. 使用DOM统一地访问文档中的元素
3. 使用DOM和addEvent函数动态绑定事件,不再允许写注入:<a href=”#” onclick=”doStuff();”>…</a>
处理禁用JavaScript的情形
第一个需要做的是删除HTML文档内所有的行内绑定事件。保证:
1. 如果禁止了JavaScript并点击页面的链接,会引导到链接的网址
2. 如果禁止了JavaScript,仍然能正确提交表单
确保链接不依赖于JavaScript
需要确保用户执行动作前提供适当的提示。
监听CSS何时禁用
如果浏览器不支持JavaScript,但支持CSS。对于这种情形可能会有一些特殊的问题,比如一种流行的DHTML技术是事先隐藏元素(设置display为none或visibility为haidden)然后在用户首次访问页面时渐显,但如果用户并未启用JavaScript就永远没有机会看到这个元素了。这个问题的一个解决方法是:

<html>
<head>
    <!—一旦JavaScript启用,为元素增加一个相信的class,就可以判断JavaScript是否启用 -->
    <script>document.documentElement.className = "js";</script>

    <!—如果JavaScript启用,先隐藏文本,然后淡入-->
    <style>.js #fadein { display: none }</style>
</head>
<body>
    <div id=”fadein”>Block of stuff to fade in…</div>
</body>
</html>

事件的可访问(accessibility)
确保事件在不使用鼠标的情况依然具备可访问性。这样做可以帮助那些需要无障碍辅助工具的人和不喜欢用鼠标的人。
1. click事件:绑定点击事件和按回车键事件。有的开发者喜欢在表单的提交按钮上绑定点击事件处理函数来监听用户是否提交表单,其实应该表单对象绑定的是提交事件。
2. mouseover事件:实际改变的是元素的焦点,通过同时为mouseover和focus事件绑定事件处理函数可以解决这个问题
3. mouseout事件:当用户的焦点从元素移开就会触发blur事件,因此可以同时使用mouseout和blur事件来解决。



转载请注明:陈童的博客 » 分离式脚本编程

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无觅相关文章插件,快速提升流量