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/，如需转载文章，请注明出处。