一个小问题引发的血案
最近又开始接触一些PC端需要兼容IE的业务需求了，几段代码写下来，才发现我对IE了解还是太少了。做了个老虎机抽奖的需求，需要对中奖结果区分显示，简单可以描述为这样：三个滚轮，每个可能产生三种图标，若用户中奖，则三个滚轮显示结果完全相同，否则三个滚轮显示结果不能完全相同。
于是，我开始设计了以下算法：
var isWin = (json.result && json.winner), // json抽奖接口返回结果
rs = [],
str = ‘123‘,
num = 2;
if (isWin) {
num = +(str[Math.floor(Math.random() * 3)]);
rs = [num, num, num];
} else {
rs[0] = +(str[Math.floor(Math.random() * 3)]);
str = str.replace(rs[0] + ‘‘, "");
rs[1] = +(str[Math.floor(Math.random() * 2)]);
rs[2] = +(str[Math.floor(Math.random() * 2)]);
}
这一切看起来如此简单，Chrome、Firefox、IE9运行结果都很理想，然后自信满满的忽略了IE6/7，提交了代码。然而，现实总是残酷的，没过多久就有测试人员告诉我：我出现三个滚轮显示一样，结果却显示我未中奖了！
毕竟也算是个程序员，我本能的反应：不会吧，我本地是好的啊，是不是你的hosts没绑？浏览器有问题？缓存了？…好吧，结果还是我错了，因为接二连三有人发现了这类现象。
于是，我开始反复的琢磨上面的代码，我将上面的代码拷贝到控制台单独执行，最后查看rs数组中三个结果值，而我的每次执行结果都跟我预期的一样，感觉完全没有问题。由于没有了解清楚问题的必现环境，我误以为是概率性事件，我又写了一个用例，让我的代码执行了3万次，而结果还一如既往的正常！于是我大胆的确定这不是概率性事件，应该是有某种特定的条件。所以我开始向遇到同类问题的测试人员咨询他们的运行环境，终于让我找到了问题所在：他们有的是在高版本IE的低版本文档模式中发现，有的是在低版本的IE浏览器中发现。我在IE9的IE7文档模式中执行了一下我的代码，发现rs得到的竟然是[NaN, NaN, NaN]，好吧，那么问题就显而易见了——str[Math.floor(Math.random() * 3)]没有得到预想的结果，原来低版本IE不支持中括号形式获取指定位置的字符。
于是，有了下面这段代码：
var isWin = (json.result && json.winner), // json抽奖接口返回结果
rs = [],
str = ‘123‘,
num = 2;
if (isWin) {
num = +(str.split(‘‘)[Math.floor(Math.random() * 3)]);
rs = [num, num, num];
} else {
rs[0] = +(str.split(‘‘)[Math.floor(Math.random() * 3)]);
str = str.replace(rs[0] + ‘‘, "");
rs[1] = +(str.split(‘‘)[Math.floor(Math.random() * 2)]);
rs[2] = +(str.split(‘‘)[Math.floor(Math.random() * 2)]);
}
好吧，先将字符串拆分成数组，再去取值就没问题了。
上面虽是个低版本IE浏览器中的小case，但确实证明我对IE了解得太少了，下面再给大家分享一个最近刚学到的高版本IE中的坑！
“高大上”的高版本IE
前几天刚收到一本《移动Web手册（双色）》，介于目前移动开发是趋势，我花了三天时间将这本书通读了一遍。总的来说，书的内容不多，但讲得确实精彩，其中谈到了移动Web开发的方方面面，我从中学到了很多尚未悉知的东西。但在这里我们不讨论其他的东西，只跟大家分享一个关于IE的case。
我们知道，在移动Web开发中，从事件角度来讲，大致可以分为两个派别：一将触屏事件和鼠标事件分开，二将触屏事件和鼠标事件整合。而微软则是支持将触屏事件和鼠标事件整合为**指针事件**。在事件这方面似乎微软的事件理论更具前瞻性和扩展性，所以Mozilla和Google也正在考虑实现指针事件，但是我们这里也不讲事件的优劣，我们只看IE10、IE11的事件绑定差异。
// IE10、IE11都支持
element.addEventListener(‘MSPointerDown‘, function(ev){}, false);
// 仅IE11支持
element.addEventListener(‘pointerdown‘, function(ev){}, false);
且不说加前缀
ms已经够蛋疼了，还搞出个事件名称驼峰与全小写的区别，这也真是够了。顺便提一句，似乎IE已经声明驼峰事件命名终将会被抛弃。
好了，bug说了，槽也吐完了，我对IE的了解又多了…
最后附上《移动Web手册（双色）》读书笔记
作者博客：百码山庄