首页 » 编写高质量代码:改善JavaScript程序的188个建议 » 编写高质量代码:改善JavaScript程序的188个建议全文在线阅读

《编写高质量代码:改善JavaScript程序的188个建议》建议159:推荐根据浏览器特性进行检测

关灯直达底部

不同浏览器对JavaScript的兼容性是不同的,尤其是IE与其他浏览器之间,甚至不同版本的IE之间,也会有所不同。解决办法有以下3种:

❑检测浏览器的名称、版本等属性或其他辨别特性,根据不同引擎编写不同的代码。

❑坚持编写符合JavaScript标准的代码,运行在支持标准的浏览器上。

❑使用第三方技术,如jQuery等JavaScript框架,这样就不用考虑兼容性问题。

第二种方法目前来说还不太现实,因为IE市场份额还很大,并且IE与其他浏览器在对标准的支持方面存在很大的差异,特别是IE定义了很多私有属性或用法,兼容问题靠标准不能够完全解决,只能寄希望于未来浏览器开发商都自觉遵循国际标准。

第三种方法其实是迂回做法,把兼容的事情交给第三方开发商去做。很多中小企业会选择这种做法,一些大企业也会使用这一类框架。但在一些场合可能不会使用框架,或许是因为应用很简单,不想用框架,也或许其他什么原因需要考虑兼容性问题。

第一种方法是最通常的做法,不过这种做法也有缺陷,即有些时候判断的浏览器的类型版本号并不准确。那么,更好做法是判断运行当前代码的浏览器是否支持正在使用的JavaScript特性。

(1)检测浏览器的名称

不同的浏览器对JavaScript标准的支持也不同,有时希望脚本能够在不同的浏览器上都运行良好,这时需要对浏览器进行检测,确定其名称,以针对不同的浏览器编写相应的脚本。

一般使用navigator对象的appName属性,并且通过正则表达式检测返回字符串标识符中是否包含该浏览器特定的字符标志。

(2)检测浏览器的版本号

随着浏览器版本的更迭,浏览器所支持的脚本特性也在变化,有时需要针对不同的版本编写相应的脚本,一般通过解析navigator对象的userAgent属性来获得浏览器的完整版本号。

(3)检测客户端的操作系统类型

navigator.userAgent属性通常含有操作系统的基本信息,但没有统一的规则去根据userAgent获取准确的操作系统信息,因为这些值与浏览器的种类、浏览器的版本甚至浏览器的OEM版本都有关系。

通常可以检测一些更为通用的信息,如操作系统是Windows还是Mac,而不是去检测操作系统是Windows 7还是Windows X,其规则是所有的Windows版本都含有“Win”,所有的Macintosh版本都含有“Mac”,所有的UNIX则含有“X11”,而在Linux下则同时包含“X11”和“Linux”。


var isWin=(navigator.userAgent.indexOf(/"Win/")!=-1);

var isMac=(navigator.userAgent.indexOf(/"Mac/")!=-1);

var isUnix=(navigator.userAgent.indexOf(/"X11/")!=-1);


上面代码适合检测不同的操作系统,并根据不同的操作系统为应用设置不同的字体或位置等样式。

(4)检测浏览器对特定对象的支持

要编写对多种浏览器或浏览器的多个版本都能适用的脚本,就要检测一下浏览器是否支持某个对象。当然这种检测主要是针对那些潜在的不兼容对象的语句。

例如,早期的浏览器对img元素的支持差别很大,因此,要在脚本中操作img元素,需要检测浏览器是否支持。这时不需要对所有可能的浏览器一一检测,只需在必要的地方用下面的方式进行检测。


function rollover(imgName,imgSrc){

if(document.images){

//执行语句

}

}


如果document.images对象不存在,那么if求值的结果为false。这种方法使对象的检测变得简单易行,但要注意,对于那些不支持该对象的浏览器需要更好地进行处理,例如:


function getImgAreas{

var result=0;

for(var i=0;i<document.images.length;i++){

result+=(document.images[i].width*document.images[i].height);

}

return result;

}

function reportImageArea{

document.form1.imgData.value=getImgAreas;

}


这里没使用对象支持的检测。如果浏览器支持document.images,那么这两个函数运行正常,否则就会抛出异常。下面对上面的代码进行优化:


function getImgAreas{

var result;

if(document.images){

result=0;

for(var i=0;i<document.images.length;i++){

result+=(document.images[i].width*document.images[i].height);

}

return result;

}

function reportImageArea{

var imgArea=getImgAreas;

var output;

if(imgArea==null){

output=/"Unknown/";

}else{

output=imgArea;

}

document.reportForm.imgData.value=output;

}


这样不管浏览器是否支持该对象,都能向用户提供比较合理的信息,而不会只简单地跳出错误信息。

(5)检测浏览器对特定属性和方法的支持

检测一个对象是否含有某个特定的属性或方法,可以使用如下代码进行判断:


if(objectTest&&objectPropertyTest){

//执行语句

}


先检测对象是否存在,然后检测对象的属性是否存在。如果对象确实不存在,那么该方法有效;如果属性存在,但其值为null、0、false,那么if语句的求值结果也将是false,因此,这种方法并不安全,最好的方法是这样的:


if(objectReference&&typeof(objectReference.propertyName)!=/"undefined/"){

//执行语句

}


对方法的检测也可使用如下方法:


function myFunction{

if(document.getElementById){

//这里可以使用getElementById方法

}

}