【原创】我对IE了解得还是太少了

标签：

一个小问题引发的血案

最近又开始接触一些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)]);
}

毕竟也算是个程序员，我本能的反应：不会吧，我本地是好的啊，是不是你的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);

好了，bug说了，槽也吐完了，我对IE的了解又多了…

最后附上《移动Web手册（双色）》读书笔记

作者博客：百码山庄

【原创】我对IE了解得还是太少了

标签：

原文地址：http://my.oschina.net/mailzwj/blog/425280