javascript快速入门21--DOM总结

跨浏览器开发

市场上的浏览器种类多的不计其数，它们的解释引擎各不相同，期待所有浏览器都一致的支持JavaScript,CSS,DOM,那要等到不知什么时候，然而开发者不能干等着那天。历史上已经有不少方法来解决浏览器兼容问题了，主要分为两种：1.userAgent字符串检测，2.对象检测；当然，也不能考虑所有的浏览器，我们需要按照客户需求来，如果可以确信浏览网站的用户都使用或大部分使用IE浏览器，那么你大可放心的使用IE专有的那些丰富的扩展，当然，一旦用户开始转向另一个浏览，那么痛苦的日子便开始了。下面是市场上的主流浏览器列表：

• Internet Explorer
• Mozilla Firefox
• Google Chrome
• Opera
• Safari

注意，浏览器总是不断更新，我们不但要为多种浏览器作兼容处理，还要对同一浏览器多个版本作兼容处理。比如IE浏览器，其6.0版本和7.0版本都很流行，因为微软IE随着操作系统绑定安装（之前也是同步发行，微软平均每两年推出一款个人桌面，同样IE也每两年更新一次；直到现在，由于火狐的流行，IE工作组才加快IE的更新），所以更新的较慢，6.0版和7.0版有很大差别。

市场上还存在一些其它浏览器，但由于它们都是使用的上面所列浏览器的核心，或与上面浏览器使用了相同的解释引擎，所以无需多作考虑。下面是主流的浏览器解释引擎列表：

1. Trident

   Trident （又称为MSHTML），是微软的窗口操作系统（Windows）搭载的网页浏览器—Internet Explorer的排版引擎的名称，它的第一个版本随着1997年10月Internet Explorer第四版释出，之后不断的加入新的技术并随着新版本的Internet Explorer释出。在未来最新的Internet Explorer第七版中，微软将对Trident排版引擎做了的重大的变动，除了加入新的技术之外，并增加对网页标准的支持。尽管这些变动已经在相当大的程度上落后了其它的排版引擎。使用该引擎的主要浏览器：IE，TheWorld，MiniIE，Maxthon，腾讯TT浏览器。事实上，这些浏览器是直接使用了IE核心，因为其userAgent字符串中返回的信息与IE是一模一样的！

2. Gecko

   壁虎，英文为"Gecko"。Gecko是由Mozilla基金会开发的布局引擎的名字。它原本叫作NGLayout。Gecko的作用是读取诸如HTML、CSS、XUL和JavaScript等的网页内容，并呈现到用户屏幕或打印出来。Gecko已经被许多应用程序所使用，包括若干浏览器，例如Firefox、Mozilla Suite、Camino,Seamonkey等等

3. Presto

   Presto是一个由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。Presto取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。Presto在推出后不断有更新版本推出，使不少错误得以修正，以及阅读Javascript效能得以最佳化，并成为速度最快的引擎。

4. KHTML

   是HTML网页排版引擎之一，由KDE所开发。KDE系统自KDE2版起，在档案及网页浏览器使用了KHTML引擎。该引擎以C++编程语言所写，并以LGPL授权，支援大多数网页浏览标准。由于微软的Internet Explorer的占有率相当高，不少以FrontPage制作的网页均包含只有IE才能读取的非标准语法，为了使KHTML引擎可呈现的网页达到最多，部分IE专属的语法也一并支援。目前使用KHTML的浏览器有Safari和Google Chrome。而KHTML也产生了许多衍生品，如：WebKit,WebCore引擎

利用userAgent检测

下面是各大浏览器使用弹窗显示的userAgent字符串

IE浏览器：Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727)

火狐浏览器：Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

Opera浏览器：Opera/9.64 (Windows NT 5.1; U; Edition IBIS; zh-cn) Presto/2.1.1

Safari浏览器：Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16

Google Chrome浏览器：Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/530.5 (KHTML, like Gecko) Chrome/2.0.172.33 Safari/530.5

可以使用下面的代码进行浏览器检测

    var Browser = {
        isIE:navigator.userAgent.indexOf("MSIE")!=-1,
        isFF:navigator.userAgent.indexOf("Firefox")!=-1,
        isOpera:navigator.userAgent.indexOf("Opera")!=-1,
        isSafari:navigator.userAgent.indexOf("Safari")!=-1
    };

 

但这样做并不是万无一失的，一个特例便是Opera可以使用userAgent伪装自己。下面是伪装成IE的userAgent：Mozilla/5.0 (Windows NT 5.1; U; Edition IBIS; zh-cn; rv:1.8.1) Gecko/20061208 Firefox/2.0.0 Opera 9.64；在完全伪装的情况下，最后的“Opera 9.64”这个字符串也不会出现，但Opera也有特殊的识别自身的方法，它会自动声明一个opera全局变量！

不但如此，我们的检测还忽略了一点，就是那些使用相同引擎而品牌不同的浏览器，所以，直接检测浏览器是没有必要的，检测浏览器的解释引擎才是有必要的！

    var Browser = {
        isIE:navigator.userAgent.indexOf("MSIE")>-1 && !window.opera,
        isGecko:navigator.userAgent.indexOf("Gecko")>-1 && !window.opera 
        && navigator.userAgent.indexOf("KHTML") ==-1,
        isKHTML:navigator.userAgent.indexOf("KHTML")>-1,
        isOpera:navigator.userAgent.indexOf("Opera")>-1
    };

 

对象检测

浏览器检测就到此结束了，下面应该讲一下对象检测！对象检测其实是比浏览器检测更加有效更加科学方法，而且我们之前一直在使用！

    function addEvent(obj,evtype,bubbles) {
        if (obj.addEventListener) {....}
        else if (obj.attachEventListener) {....}
    }

 

对象检测避免了浏览器引擎的多样性，即当我们需要某种功能时，我们直接检测浏览器是否支持该功能，而不用管浏览器是什么牌子的！

什么时候该使用浏览器检测？什么时候该使用对象检测？

答案是能使用对象检测时总该使用对象检测，只有当必须对浏览器进行识别或无法使用对象检测时才进行userAgent判断

    //一段用于将当前页面添加到用户收藏夹的代码,两个不同的版本
    window.external.addFavorite(location,"收藏页面");//IE
    window.sidebar.addPanel("收藏页面",location,"");//火狐
    //由于在火狐下window也具有external属性，并且在IE下判断window.external.addFavorite会出错
    if (window.external.addFavorite) {...}//代码在IE下会出错
    //可以使用浏览器检测，避免意外
    if (Browser.isIE) {
        window.external.addFavorite(location,"收藏页面");//IE
    } else if (Browser.isGecko) {
        window.sidebar.addPanel("收藏页面",location,"");//火狐及其它相同引擎的浏览器
    }

 

当你的脚本和其它脚本一起工作时（尤其和那些有问题的脚本），有时候需要同时使用对象检测与浏览器检测

    //对于window.innerWidth这些属性,可能有些脚本会创建一个兼容多个浏览器的同名属性
    if (isIE) {//它聪明的使用了浏览器检测
        window.onresize = function () {
            window.innerWidth =document.documentElement.clientWidth;
            window.innerHeight = document.documentElement.clientHeight;
        };
        window.onresize();
    }
    //然而我们的脚本对其进行检测时就麻烦了
    if (window.innerWidth) {//仅当在FF下时（FF支持position:fixed）才这样做
        obj.style.position="fixed";
        obj.style.right=window.innerWidth/2+"px";
        obj.style.bottom=window.innerWidth/2+"px";
        ....
    }

 

当然，使用浏览器检测始终是困难重重的，而对于测试文档是否支持某种特性，使用对象检测可能是最有效的，还有另一种方法可以直接测试浏览器是否支持某标准！

测试与DOM标准的一致性

document对象有个implementation属性，该属性只有一个方法hasFeature(),用来测试浏览器是否支持某个DOM标准！

    //测试是否支持XML DOM 1.0
    var supportXML = document.implementation.hasFeature("XML", "1.0");

 

特 征	支持的版本	描 述
Core	1.0, 2.0, 3.0	基本的DOM，给予了用层次树来表示文档的能力
XML	1.0，2.0，3.0	核心的XML扩展，增加了对CDATA Section、处理指令和实体的支持
HTML	1.0，2.0	XML的HTML扩展，增加了对HTML特定元素和实体的支持
Views	2.0	基于特定样式完成对文档的格式化
StyleSheets	2.0	为文档关联样式表
CSS	2.0	支持级联样式表1（CSS Level 1）
CSS2	2.0	支持级联样式表2（CSS Level 2）
Events	2.0	通用DOM事件
UIEvents	2.0	用户界面事件
MouseEvents	2.0	由鼠标引起的事件（点击、鼠标经过，等等）
MutationEvents	2.0	当DOM树发生改变时引发的事件
HTMLEvents	2.0	HTML 4.01的事件
Range	2.0	操作DOM树中某个特定范围的对象和方法
Traversal	2.0	遍历DOM树的方法
LS	3.0	在文件和DOM树之间同步地载入和存储
LS-Async	3.0	在文件和DOM树之间异步地载入和存储
Validation	3.0	用于修改DOM树之后仍然保持其有效性的方法

尽管这个相当方便，但是，使用implementation.hasFeature()有其明显的缺陷——决定DOM实现是否对DOM标准的不同的部分相一致的，正是去进行实现的人（或公司）。要让这个方法对于任何值都返回true，那是很简单的，但这并不一定表示这个DOM实现真的和所有的标准都一致了。目前为止，最精确的浏览器要数Mozilla，但它多少也有一些并不完全和DOM标准一致的地方，这个方法却返回为true。

错误处理

无尽的DOM兼容性问题，如果总是使用对象检测，就会带来无尽的if else之类的分支语句，而且检测某些对象的某些属性时还会引发错误（尤其是在IE下），因为一般的JavaScript对象都可以转换成布尔值，但浏览器内置的一些方法或对象并不是JavaScript创建了，它们不一定能够转换成布尔值！所以，使用错误处理语句不但避免了分支判断，而且可以很优雅的处理错误！

try {} catch(e) {} finally {}

    function addFav(address,name) {
        try {
            window.sidebar.addPanel(name,address,"");//FF方法
            //在try语句中，如果脚本出错，会自动跳转到catch语句执行
        } catch(e) {//这里的e是必须的，是语法的一部分，它表示一个错误对象
            window.external.addFavorite(address,name);//IE
            //如果在这里还出现错误，浏览器就会将这个错误抛出
        }
    }

 

Error对象

JavaScript内置了一个Error构造函数，可以创建一个错误对象，并可以使用throw语句手动抛出错误！

    var err = new Error();
    throw err;
    //在IE中，会在错误窗口中显示“未指明的错误”，而FF中则是空字符串
    //抛出错误后，脚本便会停止往下执行
    var message = "我抛出的错误！";//错误描述
    err = new Error(message);
    throw err;

 

错误对象的属性：message属性保存与错误对象相关的描述文字，number对象保存错误代码。（错误号是 32 位的值。高 16 位字是设备代码，而低字是实际的错误代码，不过错误代码对我们来说是没什么意义的）

        try {
            undefined();//当try语句中脚本出现错误时，会自动抛出一个错误对象
        } catch(e) {//e是自动创建是局部变量，是Error的实例
            alert("错误信息是："+e.message+"\n"+"错误代码是："+e.number);
        } finally {
            //finally语句不管出现不出现错误，都将执行，一般用于出错时释放对象
        }

 

onerror事件处理

DOM还有个onerror事件处理，当页面载入出错，图象载入出错及页面脚本出错时会执行注册的事件处理函数，一个常用的方法便是，在事件处理函数中返回true可以阻止浏览器出现错误提示！

    window.onerror = function () {
        alert("出错时你会看到我的！");
        return true;
    };

 

另外一个用法是，可以监测图像的载入，如果图像载入出错，可以重新载入图像（重新设置src属性），也可以利用这个方法来测试一下图像是否存在（比如检测用户输入的远程图像的URL是否有效）

尽管使用try {} catch(e) {}语句，及使用onerror事件处理可以处理脚本运行时错误，但它们是不能处理语法错误的！另外，使用错误处理语句并不是为了隐匿错误，而只是为了不干扰脚本的继续执行！

记录错误

处理了这么多错误后，记录错误这样的事情其实已经做过很多次了，主要有下面几种方法

• 使用alert语句，好处是可以让脚本暂停运行，坏处便是弹窗不那么好控制
• 使用document.write方法，这种方法自然避免了弹窗没法关闭的情况，但不好控制脚本运行！另一点便是，使用document.write会清空当前页面！
• 与document.write方法类似的是使用一个自建的控制台（比如一个DIV），然后将错误信息一条一条的添加进去，这种方法肯定比document.write好多了！
• 还有另一种方法便是使用浏览器内置的控制台，如在JavaScript里面可以调用Java控制台并向其中写入信息（前提是安装了JRE）

    java.lang.System.out.println("错误信息！");//使用Java控制台
    console.log("错误信息！");//使用火狐的控制台
    opera.postError("错误信息！");//使用Opera的控制台

 

使用库提高开发效率

库，就是一些可以方便的应用到当前的开发体系中的代码资源，JavaScript库又被称之为JavaScript框架，它是由一些类和普通函数构成。使用库，可以使开发者不必关心程序的实现细节而只专心于业务逻辑。有很多流行的库，它们大都能够跨浏览器工作，并且采用了面向对象的良好编码方式。 事实上，库就是将之前我们写的那些可以跨浏览器运行的函数集中到一个JS文件中，以便能在所有页面都能够重复利用这些代码！当然，它们不是简简单单的将函数放到一起！下面是一些流行的库及其优缺点：

• Prototype

  不要把它和JavaScript里面的prototype相混淆，Prototype是一个JS框架（官方称之为框架），可以说是最早也是最出名的JS框架了。 它提供了许多JS面向对象的扩展及DOM操作API，之前它一直由于缺乏API文档而备受诟病，但现在其文档已很充足。 它的优点显而易见，它只提供一些核心的，底层的功能，所以代码精简，体积较小，易学易用，但由于其只具有底层功能，往往需要协同其它UI库来运行！ 目前，基于Prototype的库已经有很多，著名的有集成Prototype库的RoR Ajax库，以及为Prototype提供许多视觉特效的Scriptaculous库。

• jQuery

  jQuery是一款同Prototype一样优秀js开发库，特别是对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优秀的js效果，jQuery可以帮你达到目的！并且简洁的语法和高效率一直是jQuery追求的目标。（其官网标语：jQuery将改变您书写JavaScript的方式！）。 连YAHOO-UI都重用了很多jQuery的函数。支持插件是jQuery的另一大优点，可以无即的扩展其功能。其缺点便是内部结构复杂，代码较为晦涩，一般的新手根本无法看懂其源码。所以jQuery适合开发而不适合一个刚开始学习创建JS库的新手研究其源码。

• EXT-JS

  EXT-JS前身是YAHOO-UI，EXT-JS是具有CS风格的Web用户界面组件 能实现复杂的Layout布局，界面效果可以和BackBase（另一JS库）媲美，而且使用纯javascript代码开发。真正的可编辑的表格Edit Grid，支持XML和Json数据类型，直接可以迁入grid。许多组件实现了对数据源的支持，例如动态的布局，可编辑的表格控件，动态加载的Tree 控件、动态拖拽效果等等。1.0 beta版开始同Jquery合作，推出基于jQuery的Ext 1.0，提供了更多有趣的功能。 对于一个喜欢JAVA的开发者来说，EXT-JS类似于java的结构，清晰明了，另一特点其可以实现华丽的令人震撼的WEB应用程序。当然，缺点也很严重，由于很多HTML及CSS代码都是EXT-JS自已创建的，所以其界面构造十分复杂，没有让我们自己写CSS的余地。

• Dojo

  Dojo是目前最为强大的工业级JS框架。它在自己的Wiki上给自己下了一个定义，dojo是一个用JavaScript编写的开源的DHTML工具箱。dojo很想做一个“大一统”的 工具箱，不仅仅是浏览器层面的，野心还是很大的。Dojo包括ajax, browser, event, widget等跨浏览器API，包括了JS本身的语言扩展，以及各个方面的工具类库，和比较完善的UI组件库，也被广泛 应用在很多项目中，他的UI组件的特点是通过给html标签增加tag的方式进行扩展，而不是通过写JS来生成，dojo的API模仿Java类库的组织 方式。 用dojo写Web OS可谓非常方便。dojo现在已经4.0了，dojo强大的地方在于界面和特效的封装，可以让开发者快速构建一些兼容标准的界面。 Dojo几乎集了成了上面的JS库的优点，其功能非同一般的强大，已得到了IBM和SUN的支持，但是自然的，其体积也十分大，总共有200多KB，另外，其语法也不如jQuery灵活，对JavaScript语言的增强也不如Prototype。

• Scriptaculous

  Scriptaculous是基于prototype.js框架的JS效果。包含了6个js文件，不同的文件对应不同的js效果，所以说，如果底层用 prototype的话，做js效果用Scriptaculous那是再合适不过的了。优点便是基于Prototype，可以说是Prototype的插件，不同的效果用不同的JS文件分开存放，当然，依赖于Prototype也是其缺点。

• moo.fx

  moo.fx是一个超级轻量级的javascript特效库（3k）,能够与prototype.js框架一起使用。它非常快、易于使用、跨浏览器、符合标准，提供控制和修改任何HTML元素的CSS属性，包括颜色。它内置检查器能够防止用户通过多次或疯狂点击来破坏效果。moo.fx整体采用模块化设计，所以可以在它的基础上开发你需要的任何特效。轻量是其最大的优点，当然其缺点便是轻量级的，但是轻量级的JS库能有如此强大已经很不错了。

命名空间

在创建库之前，第一个要考虑的问题便是如何防止变量重名的问题！解决方案便是使用命名空间！命名空间是JAVA等语言中的一个概念，JavaScript并不支持命名空间，但由于JavaScript的灵活性，我们可以使用对象来模似命名空间！

    var NameSpace={};
    NameSpace.fn1 =function () {};
    NameSpace.fn2 =function () {};

 

现在，fn1与fn2两个函数就同属于NameSpace命名空间中了，它们不会也全局中的fn1或fn2冲突，当然，在使用的时候必需加上NameSpace前缀。这样使用命名空间并不是最简单的，因为我们不得不在任何地方调用这些函数的时候都加上NameSpace前缀。下面是使用JavaScript闭包来解决的方案：

    var NameSpace={};
    (function () {
        function fn1() {
        }
        function fn2() {
            fn1();//在这里调用fn1不需要加NameSpace前缀
        }
        NameSpace.fn1=fn1;//将其添加为全局变量NameSpace的属性，以便能在函数外访问
        NameSpace.fn2=fn2;
    })();