[译文]The seven rules of Unobtrusive JavaScript
作者:Dreamer 来源:Dreamer’s Blog 时间:2008-09-29 12:10:00
英文原文:The seven rules of Unobtrusive JavaScript
原文地址:http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/
原文作者:Chris Heilmann
写在前面:前一段时间kejun给我们培训JavaScript的时候,在幻灯片上推荐了很多特别经典的文章,其中就有这一篇。读过之后感觉很不错,不过我看文章往往理解不深入,恰好这篇文章我没有发现中文版本,所以就萌生了把这个东西翻译过来的想法,这样既可以分享,又可以加深自己的理解。本文的作者Chris Heilmann是 Yahoo! 英国的一位工程师(据kejun说是“教父”级的人物 ),本文的翻译也是征得了他本人的同意的。
这里多说一句,以前我也翻译过不少东西,不过那时候我更多是为了翻译而翻译,很多技术文章都没领悟,所以到现在还是个菜鸟。以后我还会继续翻译一些文章,不过应该只会翻译那些需要仔细体会的经典文章。有时间还是要多写代码,实践才是王道。
术语的翻译:关于“Unobtrusive JavaScript”一词,我现在也没想到一个特别贴切的译法。在网上搜了一下,发现有翻译成“低调JavaScript”的,也有翻译成“非侵入式JavaScript”的,台湾那边有的翻译成“不乱入JavaScript”……经过多方考证,我决定采用“不唐突的JavaScript”这种译法(虽然这个还是不太合我心意),具体请看这篇文章。其实“Unobtrusive JavaScript”包含了很多意思,也很难用一个词来概括,有兴趣的可以看一下 * 上面对“Unobtrusive JavaScript”的解释。另外,我觉得翻译就是要把作者的意思表达出来,而不一定非要逐字逐句翻译,所以文章中我为了方便读者理解,删减了一些,增加了一些,不过这些都是在不伤害原文意思的基础上进行的。
要说明的还有一点,那就是我翻译水平很业余,所以译文中难免有纰漏,还请多多指正。
译者:Dreamer 。转载请注明英文原文地址和译文地址,谢谢。
不唐突的JavaScript的七条准则
经过多年的开发、教学和编写不唐突的JavaScript, 我发现了下面的一些准则。我希望它们可以帮助你对“为什么这样设计和执行JavaScript比较好”有一点理解。这些规则曾经帮助我更快地交付产品,并且产品的质量更高,也更容易维护。
1.不要做任何假设
(JavaScript是一个不可靠的助手)
可能不唐突的JavaScript 的最重要的一个特性就是——你要停止任何假设:
不要假设JavaScript是可用的,你最好认为它很有可能是不可用的,而不是直接依赖于它。
在你经过测试确认一些方法和属性可以使用之前,不要假设浏览器支持它们。
不要假设HTML代码如你想象的那样正确,每次都要进行检查,并且当其不可用的时候就什么也不要做。
让JavaScript的功能独立于输入设备
要记住其他的脚本可能会影响你的JavaScript的功能,所以要保证你的脚本的作用域尽可能地安全。
在开始设计你的脚本之前,要考虑的第一件事情就是检查一下你要为其编写脚本的HTML代码,看看有什么东西可以帮助你达到目的。
2.找出钩子和节点关系
(HTML是脚本的基石)
在开始编写脚本之前,要先看一下你要为之编写JavaScript的HTML。如果HTML是未经组织的或者未知的,那么你几乎不可能有一个好的脚本编写方案——很可能就会出现下面的情况:要么是会用JavaScript创建太多标记,要么就是应用太依赖于JavaScript。
在HTML中有一些东西需要考虑,那就是钩子和节点关系。
<1>.HTML 钩子
HTML最初的和最重要的钩子就是ID,而且ID可以通过最快的DOM方法——getElementById 访问到。如果在一个有效的HTML文档中所有的ID都是独一无二的话(在IE中关于name 和 ID 有一个bug,不过有些好的类库解决了这个问题),使用ID就是安全可靠的,并且易于测试。
其他一些钩子就是是HTML元素和CSS类,HTML元素可以通过getElementsByTagName方法访问,而在多数浏览器中都还不能通过原生的DOM方法来访问CSS类。不过,有很多外部类库提供了可以访问CSS类名(类似于 getElementsByClassName) 的方法。
<2>.HTML 节点关系
关于HTML的另外比较有意思的一点就是标记之间的关系,思考下面的问题:
要怎样才可以最容易地、通过最少的DOM遍历来到达目标节点?
通过修改什么标记,可以尽可能多地访问到需要修改的子节点?
一个给定的元素有什么属性或信息可以用来到达另外一个元素?
遍历DOM很耗资源而且速度很慢,这就是为什么要尽量使用浏览器中已经在使用的技术来做这件事情。


猜你喜欢
Python列表生成式与生成器操作示例
MySQL关系型数据库事务的ACID特性与实现
不是原型继承那么简单!prototype的深度探索
Python PyQt5模块实现一个浏览器的示例代码

安装sql server 2008 management提示已安装 SQL Server 2005 Express的解决方法
vue动态注册组件实例代码详解
Pycharm配置远程调试的方法步骤

Python 实现数据库更新脚本的生成方法
如何操作Access数据库?
python3学习笔记之多进程分布式小例子

SQL汇总统计与GROUP BY过滤查询实现

基于PHP实现解密或加密Cloudflar邮箱保护
Go整合captcha实现验证码功能

PyQT5之使用QT Designer创建基本窗口方式

用户体验与心流理论
Mysql免安装版设置密码教程详解
SpringBoot 集成 Jasypt 对数据库加密以及踩坑的记录分享

python 中的9个实用技巧,助你提高开发效率
Python迭代器Iterable判断方法解析
python3.6+selenium实现操作Frame中的页面元素
