其实学习大牛源代码是一种很好的进步,可以给你一种新的视野。
看到这篇大牛的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作为跳出判断。
额滴神,还可以这样,长见识了吧,赶快去试试,这就是大牛的代码,只能惊叹+惊叹!
到这里就完了,短短几行的代码,是多么的优雅。希望大家能从中学习到想要的知识和开阔你的视野。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。