文档章节

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

Mr.Zheng
 Mr.Zheng
发布于 2015/06/05 13:48
字数 1301
阅读 169
收藏 6

一个小问题引发的血案

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

作者博客:百码山庄

© 著作权归作者所有

共有 人打赏支持
Mr.Zheng
粉丝 53
博文 22
码字总数 38792
作品 0
杭州
网页/平面设计
私信 提问
该选哪个方向呢?请各位前辈指点

当今社会IT方面技术太多,自己也不知对哪方面感兴趣(归根底自己了解得太少),作为一个女程序员,想通过研究生提高技术水平,但不知该选哪个方面,有人说读硕士的话就选个热门的技术,但感觉...

猫猫66
2014/09/01
674
10
黑帽手法,且行且珍惜。

随着SEO的发展,很多人掌握了搜索引擎的抓取习惯,研究出来许多作弊的手法,甚至开发出了专门的作弊工具,这就是人们俗称的黑帽。当然,各大搜索引擎的工程师自然也都不是吃白饭的。顶尖的程...

成都辰星建站
2016/07/02
0
0
日本A.I.挑选美少女的眼光,你满意吗?

大家知道新垣结衣、能年玲奈、川岛海荷、菊地亚美等女艺人么?她们所属的LesPros Entertainment事务所联系时尚销售公司dazzy最近搞了一个“Miss.AI:基于人工智能的选美大赛”。 一般情况下,...

robotsking
2017/12/22
0
0
成为技术老大团队管理篇2一人有自由意志吗

上一篇,我们聊到管理是一种驱动力。驱动力来源于管理者和被管理者双方。我们可以看到,人是这里面的核心,我们只有了解人的决策行为模式,才能做好管理。 人有自由的意志吗?大家是否觉得这...

铁棍山药
2018/06/19
0
0
Spring Boot 配置文件不能获取数据

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/aiTCR/article/details/82961454 小编开始学习Spring Boot,开始记录问题啦。 报异常信息 百度说: 此时配置文...

TTcccCarrie
2018/10/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Nginx反向代理

Nginx反向代理 应用场景 A 机器运行的nginx提供的web服务,只有一个内网地址192.168.254.128(内网) B机器有两块网卡,一个地址是192.168.254.137(内网),另一个是192.168.79.128(外网)...

李超小牛子
今天
2
0
数据库事务隔离级别

当数据库上有多个事务同时执行的时候,可能出现下面问题: 脏读(dirty read):指当一个事务正在访问数据,并且对数据进行了修改,而这种修改还没有提交到数据库中,这时,另外一个事务也访...

Jacktanger
今天
1
0
4.61 - 第二个JAVA应用 4.62/63 - Tomcat的管理功能

4.61 - 第二个JAVA应用 方法一:配置文件: /usr/local/tomcat/conf/server.xml <Host name="www.aminglinux.cc" appBase="/data/wwwroot/www.aminglinux.cc" unpackWARs="tr......

Champin
今天
0
0
MariaDB密码重置

MariaDB密码重置 如果记得root的密码: mysqladmin -uroot -paminglinux password "aming-linux" //用此方式将原密码aminglinux重置为aming-linux 如果不记得原密码: # vi /etc/my.cnf......

wzb88
昨天
1
0
印度封禁抖音,称导致该国年轻人“文化堕落”!

本文经授权转载自顶级程序员 (ID:TopCoding) 作者 | 江户川雨 责编 | https://weavi.com/13775725 https://weavi.com/13775726 https://weavi.com/13775724 https://weavi.com/13775723 ......

陈刚生
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部