你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
MrZheng

我对IE了解得还是太少了 5个回复 专栏 @ Javascript

MrZheng 发布于 2 年前

一个小问题引发的血案

最近又开始接触一些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手册(双色)》读书笔记

《移动Web手册(双色)》读书笔记

作者博客:百码山庄

  • evan2x

    charAt

    #1
  • sparrow

    charAt

    #2
  • kericw

    哎? 你这个读书比较用什么软件做的啊? 好棒!

    #3
  • ourfeel

    ie8 开始支持字符串下标访问
    经常拿这个特性来区分IE8+

    #4
  • MrZheng

    @kericw 用的MindManager,当然也可以用xmind等其他思维导图软件

    #5
登录后回复,如无账号,请使用邀请码注册