• IE兼容性开发的笔记


    当前项目组开发的产品对外承诺支持IE9和IE11,但在推广应用过程中发现存在相当比例的用户实际上还在使用IE8。而这相当比例中的用户还包含了大部分的公司领导。为了满足公司内部各阶层人士体验我们产品的诉求,开发团队的上层领导经过协商,决定投入专门的精力来完毕IE8的支持。本文是笔记,记录了整改过程中发现、解决的一些问题。

    IE兼容模式

    简单的说,即是在jsp页面的头部添加例如以下的代码,指定浏览器以最高模式来呈现页面。对于我们项目组的产品来说。例如以下的代码能够保证IE8、IE9、IE11的用户在打开页面时,都能够得到最佳的体验。
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    至于这行代码的详细含义,能够问度娘。相信会有惬意的答复。
    假设没有这行代码。当前项目开发的jsp页面在IE8模式下打开时,会报一些稀奇古怪的、和jquery、JSON相关的错误,加上这行代码之后,这些错误就消失了。

    字符串的trim方法

    项目组内开发者在页面上大量应用到了字符串的trim方法,IE9及其以上版本号的IE浏览器都默认提供了trim方法,但IE8并没有提供,因此页面上使用trim方法的地方都会报js错。

    解决方法比較简单,直接使用jquery提供的trim方法,比方"axdfa ".trim()替换为$.trim("axdfa "),问题就可以解决。

    变量定义

    页面上有一个div,id为xxxx,代码样比例如以下。

    <div id="xxxxx"></div>
    此时js代码中如出现例如以下的代码。而且xxxxx没有使用var来声明,那么js在运行到例如以下一行时会报错,提示信息是对象不支持此属性或方法。


    xxxxx = 1;
    这个问题初始发现时让我纠结了相当长时间。分析思路一度跑偏。以为是IE8的js引擎对于语法要求比較高,而IE9和IE11的语法要求比較低;但奇怪的是。网上并没有搜索到相关的话题,所以并不确定。后来经高手启示,并重复尝试之后。才发现当页面上存在前述场景时,IE8模式下js代码是一定会报错的。


    明白了问题之后,改动方法就很明白了,要么改动div的id,要么使用变量前用var来显式初始化。

    数组的遍历

    对于数组var a = [1,2,4,],在IE8下。使用下标方式和jquery的each方法遍历数组时。会多遍历得到一个null对象;而使用IE9、IE11则不会存在这个问题。因此数组的最后一个元素之后切记不可添加“,”,否则会导致页面的js在IE8时出现诡异的表现。

    数组的indexOf方法

    IE8不支持数组的indexOf方法,为了满足在数组中查找对象的须要,代码中一般会为数组扩展indexOf方法。这引入一个问题,在使用foreach方式遍历数组时,indexOf方法也会作为数组的一个成员被遍历到,这比較讨厌;而使用下标方式和jquery的each方法来遍历数组。则不会引入这个问题。


    if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function () {
    // ...
    }
    }

    因此我个人建议是不要为数组提供indexOf方法的实现。直接使用jquery的inArray方法,也能够达到同样的效果。但须要注意的是inArray方法在使用时。被查询对象在前,数组对象在后。



    欢迎訪问Jackie的家,http://jackieathome.sinaapp.com/,如需转载文章,请注明出处。

  • 相关阅读:
    各种骚操作线段树
    CCPC qinhuangdao
    ACM ICPC 2017 Warmup Contest 3
    ACM ICPC 2017 Warmup Contest 2[菜鸡选手的成长]
    树状数组总结篇
    XDOJ 1152: 数据库查询
    POJ 1511Invitation Cards
    React非受控组件
    React 组件优化之函数防抖节流---使用 debounce +throttle 函数
    React脚手架工程化项目里ServiceWorker.js文件作用
  • 原文地址:https://www.cnblogs.com/yjbjingcha/p/7118510.html
Copyright © 2020-2023  润新知