为什么我要牺牲现代浏览器用户的体验去兼容 ie8？
上述对话不是真实的，是我一个朋友最近的需求，Questions 是他对我阐述的领导需求，Answers 是我的想法，也是我想写这篇文章和大家探讨的原因。
从对话中可以看出需求是重构一个旧项目，但在前端生态蓬勃发展的今天仍使用旧的开发方式进行重构。就以我个人的想法而言，是觉得这种重构是无效且无益的；以我看过的很多政府或偏政府项目来说，忽略了占据更大比例的使用现代浏览器的用户，而以 ie 这种古早浏览器为主向上兼容，而不是以现代浏览器为主去向下兼容，个人觉得是非常不合理的。
当然在最近一次的面试中也和面试官聊了这个话题，他的回答感觉也是有一定道理的：
感觉就是领导者和开发者的思维不同吧。
这篇文章也不是为了吐槽这种需求，而是讨论如何以现代开发的方式去兼容类似 ie8 这种古早浏览器。本人是没有相关经验的，所以提出的还是一些自己的想法来和大家探讨。
语法兼容
像对话中说的，为了考虑 ie8 而禁止使用新语法，这是完全没有必要的。以 let、const 举例，如果我们禁止使用它而使用 var，那我们就不得不面对 var 缺失的块作用域以及变量提升所带来的烦恼；更何况还有更多有用的 js 新特性能够帮助我们大大得提升开发效率。
为此，我们可以使用 babel 的 babel-loader 和 babel-plugin-transform-es3-* 来实现语法的兼容处理，即使是 ie8：
20230917154941
API 兼容
即使能够兼容现有语法了，但仍不能说得上方便，我们平时还会经常使用一些新的 API 来完成项目开发，比如 Promise 以及数组的一些常用方法等，这些对于 ie 而言默认是不支持的，为此我们需要添加支持。
我们可以使用 babel 的 babel-polyfill 来帮助我们填补这些功能的缺少。
polyfill，也就是腻子脚本，作用是填充不支持的功能。原理也很简单，对于一个不支持的功能，使用旧有特性进行模拟实现，比如：
if (typeof Function.prototype.call !== 'function') {
Function.prototype.call = function call(self) {
self.__fn = this;
var args = [];
for (var i = 1; i < arguments.length; i++) {
args.push('arguments[' + i + ']');
}
var callbackStr = 'self.__fn(' + args.join(',') + ')';
var result = eval(callbackStr);
delete self.__fn;
return result;
}
}
if (typeof Array.prototype.filter !== 'function') {
Array.prototype.filter = function filter(cb, self) {
var results = [];
for (var i = 0; i < this.length; i++) {
if (cb.call(self, this[i], i, this)) {
results.push(this[i]);
}
}
return results;
}
}
<< · Back Index ·>>
下一篇