[译文]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很耗资源而且速度很慢,这就是为什么要尽量使用浏览器中已经在使用的技术来做这件事情。
猜你喜欢
- 我们可用下面的代码将服务器端变量转换为客户端的JavaScrit变量:<%@ Language=VBScript
- Display SQL Server Login Mode. Supported Plat
- 我将示范微优化(micro optimization)如何提升python代码5%的执行速度。5%!同时也会触怒任何维护你代码的人。但实际上
- 引言“ 这是MySQL系列笔记的第八篇,文章内容均为本人通过实践及查阅资料相关整理所得,可用作新手入门指南,或
- python字符串,元组,列表,字典互相转换直接给大家上代码实例#-*-coding:utf-8-*- #1、字典dict = {'
- 客户/服务器体系结构图形化的用户界面,使系统的管理更加直观和简单。丰富的编程接口,为用户进行应用程序设计提供了更大的选择余地。与Window
- 本文实例讲述了Python计时相关操作。分享给大家供大家参考,具体如下:内容目录:1. 时间戳2. 当前时间3. 时间差4. python中
- windows下vue-cli及webpack 构建网站(一)环境安装 windows下vue-cli及webpack 构建网站(
- 1. 服务器优化优化原则:内存里的数据要比磁盘上的数据访问起来快;站数据尽可能长时间地留在内存里能减少磁盘读写活动的工作量;让索引信息留在内
- 下面就是今天下午的研究成果。发布系统需要响应用户的中断请求,需要在GET方法中杀掉由subprocess派生的子进程,刚开始直接用os.ki
- 阅读上一篇:FrontPage2002简明教程四:网页超级链接 一、三种添加CSS的方式 在FrontPage 2002里可以通过三种方式给
- 什么是上采样上采样,在深度学习框架中,可以简单的理解为任何可以让你的图像变成更高分辨率的技术。 最简单的方式是重采样和插值:将输入图片inp
- 在MySQL主从复制环境的搭建中,常常会遇到一种场景,主库和从库都要初始化用户的账号密码,正常的情况下,需要在主
- 和网友们讨论了数组取交集的方法,下面是两个实现arr1=["1","5","6"
- python安装第三方库大都是通过pip命令安装,这个命令确实是很简便的,而对于每个独立的项目来说,需要用到的库或许会不同,如果删除或更新原
- 今天老肥让我试试百度知道的新功能:插入地图。该功能需要登录才能操作,因此我意外的发现百度用户登录的弹出层变了。我很喜欢这个改进,利用TAB来
- python是一种跨平台的计算机程序设计语言。python是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言,可以应用于科学计算
- python中的导入关键字:import 以及from import1、import import一般用于导入包以及模块。不过有
- 本文为大家分享了pygame游戏之旅的第5篇,供大家参考,具体内容如下在游戏中添加显示文字:这里自己定义一个crash函数接口:def cr
- 除了C/C++以外,我也接触过不少流行的语言,PHP、java、javascript、python,其中python可以说是操作起来最方便,