|
|
有时会去看看国外大牛的一些代码，并学习，引用，并感叹大牛就是大牛，差距不是一点点，也在一点点的感叹中慢慢拉进和大牛的距离
其实学习大牛源代码是一种很好的进步，可以给你一种新的视野。
看到这篇大牛的IE版本检测，只能是惊叹加惊叹。短短的代码中所包含的内容实在是太多了。
所以在这里决定来解读大牛的源代码，让准备向大牛靠近并还在努力的IT同人们从中学习到更多的知识。
我们先来看看一个世界最短ie检测代码：
复制代码 代码如下:
var isIE = !-[1,];
是不是很熟悉，但是有bug，就是不能检测ie9，为什么呢？那是因为这是国外大牛在ie9出来之前利用ie对数组转换的特性来完成的。ie9中已经进行了修复，所以在ie9中失效了，但是作为当时的我，还是感叹+感叹，大牛们对细节的研究和如此的深入（当时我也沉迷在如何用最短的代码来实现一个功能和方法，不断的修改+修改，可还是....这就是差距，差距）。
这段世界最短ie检测的代码我就不解读和分析了，毕竟对于现在有bug了，不能向后兼容，我的重点是下面的ie完美检测，理论上是向后兼容的，例如出来IE10，ok，用它，没问题，再一次提现差距。
下面来看看源代码先（我会在后面解读大牛思想和代码中的难点讲解）
复制代码 代码如下:
// ----------------------------------------------------------
// A short snippet for detecting versions of IE in JavaScript
// without resorting to user-agent sniffing
// ----------------------------------------------------------
// If you're not in IE (or IE version is less than 5) then:
// ie === undefined
// If you're in IE (>=5) then you can determine which version:
// ie === 7; // IE7
// Thus, to detect IE:
// if (ie) {}
// And to detect the version:
// ie === 6 // IE6
// ie > 7 // IE8, IE9 ...
// ie < 9 // Anything less than IE9
// ----------------------------------------------------------
// UPDATE: Now using Live NodeList idea from @jdalton
var ie = (function(){
var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
return v > 4 ? v : undef;
}());
一个很精辟的代码，但可以完美检测出ie的各个版，还可以一次按范围检测，在源码的注释中教练你怎么使用。
原理：
动态创建一个div，利用ie条件注释来往里面插入一个i标签，在来检测i标签是否添加来判断是否是ie浏览器。在while中不断循环来比对ie的版本。
下面我们来理解这段代码：
复制代码 代码如下:
var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
//这段好理解，声明变量和创建一个div，获取div中的i
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
//这个就是核心，利用的ie条件注释来完成，ie的条件注释是向后兼容的，所以可以用这检测以后出的ie10，如果下一个版本叫ie10的话。
关于ie条件注释，大家可以自己在网上查找，很容易找到的。[if IE 7][if gt IE 7]有很多模式的，我这里就不讲解这个条件注释，做过web前端兼容的应该对这还是比较了解的。
难点：
复制代码 代码如下:
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
what?while（表达式1，表达式2） 这是what？和我们学的while（表达式）不一样？
小技巧，while中如果有多个表达式，以最后一个表达式作为跳出的判断，前面的表达式，不管有多少个，都不会作为跳出的判断，而是执行里面的代码。
例如：while（表达是1，表达是2，表达式3，表达式4） 只以表达式4的true或者false作为跳出判断。
额滴神，还可以这样，长见识了吧，赶快去试试，这就是大牛的代码，只能惊叹+惊叹！
到这里就完了，短短几行的代码，是多么的优雅。希望大家能从中学习到想要的知识和开阔你的视野。 |
|
发表于 2012-1-4 16:46:59
