近有一个项目是以华为的响应式效果为参考的，为了把项目做好，必然要把华为的源代码重头到尾过一遍，在切图工作这已是家常便饭，当中有几点发现，华为是基于bootstrap布局，运用了bootstrap的幻灯片组件，又进行了一些二次方法添加改造，而这次个过程中又碰触到了另外一个超屌的js判断ie版本的解决方案，决定将它分享：

jQuery在1.9版本之前，提供了一个浏览器对象检测的属性$.browser，使用率极高。但是在1.9版本发布之后，大家钟爱的这个属性被jQuery无情的抛弃了。大家开始着手寻找$.browser的替代方案。于是各种利用IE bug的检测方法被搜了出来：

// shortest from a Russianvar ie=!-[1,]// Option from Dean Edwards:var ie=/*@cc_on!@*/false// Use the commented line:var ie//@cc_on=1// Variation (shorter variable):var ie='\v'=='v'// Option to Gareth Hayes (former record-holder):var ie=!+"\v1"

还有一些读取navigator.userAgent的方式，在苹果看来这些写法都不够友好，也不容易记忆，在搜索和挑选之后，终于找到了一个容易理解且友好方便的写法！

解决方案

IE知道自身毛病很多，于是提供的一套官方的HTML hack方式：

<!--[if IE]>

// 全部IE版本可见

<![endif]-->

<!--[if IE 6]>

// IE6可见

<![endif]-->

依次等等。

这样的写法在其它浏览器里，完全就是一坨注释而直接遭到无视，但在IE里却不会。IE会分析里面的提到的版本号，并根据版本号确定要不要解析里面的DOM元素和文本内容。等一下！DOM元素？那岂不是可以使用js来获取里面的DOM元素？反正谁看到了，谁就是IE！于是，国外大神就有了下面的写法：

var isIE=function(){ var b=document.createElement('b')

b.innerHTML='<!--[if IE]><i></i><![endif]-->'

return b.getElementsByTagName('i').length===1}

这也太巧妙了！首先生成了一个b元素，设置它的innerHTML为一坨只有IE才认识的注释，注释里只有一个空的标签，然后读取里面的出现的元素i的个数是不是等于1，是不是等于1，是不是等于1。。。。

在大苹果看来，这样的写法比其它任何一种都要好。至于为什么生成一个b元素并且里面写一个i元素而不是div或者strong，更多是考虑到前者字节量更小。

检测各个IE版本的方法也就顺理成章了：

var isIE6=function(){ var b=document.createElement('b')

b.innerHTML='<!--[if IE 6]><i></i><![endif]-->'

return b.getElementsByTagName('i').length===1}// var isIE7// ...

更进一步

在苹果看来，还可以进一步将版本号提取成参数，就能生成一个通用的检测IE版本的函数了：

var isIE=function(ver){ var b=document.createElement('b')

b.innerHTML='<!--[if IE ' + ver + ']><i></i><![endif]-->'

return b.getElementsByTagName('i').length===1}if(isIE(6)){ // IE 6}// ...if(isIE(9)){ // IE 9}

这样想检测哪个版本都毫无压力。但是，如果只想检测是不是IE，而不关心浏览器版本，那只需要在调用函数的时候，不传递参数即可。

var ie=isIE()

最后依次贴下在各大浏览器里测试代码的截图。

alert('ie6:' + isIE(6) + '\n' + 'ie7:' + isIE(7) + '\n' + 'ie8:' + isIE(8) + '\n' + 'ie9:' + isIE(9) + '\n' + 'ie:' + isIE())

切图网常年专注h5前端开发技术，关注用户体验，如果你对h5前端，响应式，微场景等该兴趣请加公众微信账号：qietuwang

言

在前端开发编写Javascript代码的过程中，经常要考虑不同浏览器之间的差异，找出兼容性方案。

今天这篇文章我们来看看两个有意思的问题，都是因为浏览器不同带给我们理解上的差异。

本篇文章的测试主要以最新Chrome，Firefox和IE8为代表。

Javascript

函数声明与函数表达式

• 函数标识符
  

根据ECMAScript标准，变量名，函数方法名等标识符只能包含数字，字母，'$'，'_'等，是不能包含点运算符('.')的。

目前最新的Chrome，Firefox，Safari等浏览器都遵循这一原则，但是IE6，IE7，IE8却不一样，它们支持点运算符来进行函数方法命名。

我们将下面一段代码在不同的浏览器中运行测试。这段代码是定义一个对象A，然后在prototype上定义一个变量b，b为一个Function，然后生成一个A的实例a，最后返回a.b的类型。

测试代码

首先是在Chrome浏览器中。

Chrome浏览器运行结果

通过报的错误，我们发现不支持点运算符'.'操作。

然后在IE8中测试。

IE8测试结果

在IE8中测试后发现，输出了function，证明b已经明确定义为了对象A的一个属性。

（吐槽一下：IE8的调试真的是相当麻烦！！！）

• 函数表达式标识符

根据ECMAScript标准，函数表达式的标识符只能在函数体内部访问，它的作用域只存在于该函数体内部。

代码

以上代码中，b就是函数表达式的标识符。

在Chrome等高级浏览器中，在外部是无法访问到b的，以下为测试结果。

Chrome测试结果

返回undefined，证明Chrome浏览器是遵循了ECMAScript规则的。

而在IE8中测试结果如下所示。

IE8测试结果

最后返回的结果是function，就证明IE8并没有遵循ECMAScript规则。

• 解决方案

为了防止上述的问题发生，请避免使用IE的这些不遵循规则的特性，保证浏览器的兼容性。

块级函数声明处理

什么是块级函数声明呢？我们先来看看下面这段代码。

块级函数声明

就是在一段判断语句中，满足条件后才去定义函数，不满足条件就不去定义函数。

如果在这段代码后再去执行zero方法，结果会有什么差异呢？

首先来看看在Chrome浏览器下的运行结果。

Chrome运行结果

从运行结果来看，zero不是一个函数，说明zero的声明为生效。

然后看看IE8的运行结果。

IE8运行结果

通过运行结果可以看出，在IE8中，即使变量variable不为true，方法zero仍然被成功定义。

对于块级函数声明问题，是在ES6中新增的标准，在早期不支持ES6标准的浏览器中和IE8中都一样，包括早期的Chrome和Firefox等高级浏览器。

• 解决方案
  

遇到IE8级以下版本的浏览器，就避免使用块级函数声明的处理。

结束语

今天这篇文章总结了两个与函数声明和函数表达式有关的浏览器兼容性问题。在测试过程中发现IE浏览器真的是超级难用啊，而且有很多兼容性的问题都是来自于IE，所以大家尽可能的远离IE吧。