[译文]The seven rules of Unobtrusive JavaScript

英文原文：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很耗资源而且速度很慢，这就是为什么要尽量使用浏览器中已经在使用的技术来做这件事情。