不唐突的JavaScript的七条准则

英文原文:http://icant.co.uk/articles/seven-rules-of-unobtrusive-Javascript/

1.不要做任何假设(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就是安全可靠的,并且易于测试,而且如果直接用name来作为对象进行操作,在FF下是无效的,会报此对象未定义的错误。

其他一些钩子就是是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选择器取代:
JS代码

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;
}

it知识库不唐突的JavaScript的七条准则,转载需保留来源!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。