不唐突的JavaScript的七条准则[翻译](2)
作者:Dreamer 来源:蓝色理想 发布时间:2008-12-09 13:33:00
不唐突的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很耗资源而且速度很慢,这就是为什么要尽量使用浏览器中已经在使用的技术来做这件事情。
3.把遍历交给专家来做(CSS,更快地遍历DOM)
有关DOM的脚本和使用方法或属性(getElementsByTagName, nextSibling, previousSibling, parentNode以及其它)来遍历DOM似乎迷惑了很多人,这点很有意思。而有趣的是,我们其实早已经通过另外一种技术—— CSS ——做了这些事情。
CSS 是这样一种技术,它使用CSS选择器,通过遍历DOM来访问目标元素并改变它们的视觉属性。一段复杂的使用DOM的JavaScript可以用一个CSS选择器取代:
var n = document.getElementById('nav');
if(n){
var as = n.getElementsByTagName('a');
if(as.length > 0){
for(var i=0;as[i];i++){
as[i].style.color = ‘#369′;
as[i].style.textDecoration = ‘none’;
}
}
}
/* 下面的代码与上面功能一样 */
#nav a{
color:#369;
text-decoration:none;
}
这是一个可以好好利用的很强大的技巧。你可以通过动态为DOM中高层的元素添加class 或者更改元素ID来实现这一点。如果你使用DOM为文档的body添加了一个CSS类,那么设计师就很可以容易地定义文档的静态版本和动态版本。
JavaScript:
var dynamicClass = 'js';
var b = document.body;
b.className = b.className ? b.className + ' js' : 'js';
CSS:
/* 静态版本 */
#nav {
....
}
/* 动态版本 */
body.js #nav {
....
}
猜你喜欢
- 1、授权机制的主要作用是什么?授权机制的基本作用是给某个主机上的用户对某个数据库以select,insert,update和detete的权
- 非常好的边框样式设置工具,使用该工具您可以很方便的为DIV设置简单的边框样式,如果放在DW中会更好。会制作DW插件的高手,请帮忙制作成DW插
- 如果是在Oracle10g之前,删除一个表空间中的数据文件后,其文件在数据库数据字典中会仍然存在,除非你删除表空间,否则文件信息不会清除。但
- 浏览网页的时候经常会碰到一些不认识的英文单词,或者想知道一些中文单词的翻译,这时候再去找翻译软件或者翻译网站就有些麻烦了。因此我做了一个“中
- 在 JavaScript 中,可以用 instanceof 来判断一个对象是不是某个类或其子类的实例。比如:// 代码
- 关于书写习惯,遵循曾经总结过的风格标准,现在一点都没有变。并且近来翻看高手作品,横向连排似乎在大产品项目中逐渐成为主流,个人认为如此维护效率
- Function getIpvalue(clientIP)'得到客户端的IP转换成长整型,返回值getIpvalue&nb
- 代码如下:use tempdb if object_id('tempdb..#table') is not null dro
- 数据库操作类在网上一搜一大把,我这并不比那些好,只是是自己写的,用着更习惯。所以我这个类没有什么特别的地方,只是自己用着习惯罢了,至于效率等
- 假如某个电脑生产商,它的数据库中保存着整机和配件的产品信息。用来保存整机产品信息的表叫做pc;用来保存配件供货信息的表叫做parts。在pc
- 工欲善其事,必先利其器。作为更专业的前端工程师,我们需要强劲的IDE协助我们写出规范、美观、漂亮的JavaScript代码,首先要作的就是对
- 内容摘要:您是否想让您的网站有多种显示风格呢,本文介绍了如何使用CSS结合js实现动态更换页面皮肤风格。看了下面的介绍您就明白了如何实现了这
- Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验、开发了
- 方法一.Image { max-width:600px;height:
- 在进行CSS网页布局开发时,您肯定遇到过形形色色的布局问题,虽然有大量的教程提供帮助,但最后可能被搞得焦头烂额。本文的目的是让您的设计过程更
- JavaScript 读取、删除 Cookie 的函数* * WebFXCookie class */ fun
- 今天编ZBlog上传模块的时候,需要用到一个提取文章中文件名的子程,开始我把问题想复杂了,匹配了所有可能的文件名,不仅正则表达
- NOMONEYDAY123114321-45324212-102250331008为了符合阅读习惯,最终报表希望是如下格式:NOMONTUE
- 1.delete不能使自动编号返回为起始值。但是truncate能使自动增长的列的值返回为默认的种子 2.truncate只能一次清空,不能
- 假设现有一张人员表(表名:Person),若想将姓名、身份证号、住址这三个字段完全相同的记录查找出来,使用1: SELECT p