用vue写了一个日历组件,在Firefox、Edge、Chrome以及360等浏览器极速模式中运行一切正常,如图:
但在IE和360等浏览器的兼容模式下却显示了模板,看起来像乱码一样,如图:
按F12查看控制台,发现IE下报错,如图:
根据报错信息找到报错位置,代码如下:
var myVue = new Vue({
el: '#calendar',
data: [
// some data...
],
created: function(){
this.init();
},
methods: {
init: function(year=null, month=null){ // 这里就是报错的行
// some code...
}
}
})
观察上述代码,发现并没有任何语法错误,括号对也是完整无误,但IE却报错提示缺少右括号,这是怎么回事呢?
左思右想,突然灵光一闪,在ES5的函数声明中并不能为形参赋默认值,这种写法是ES6新增的,而IE是不兼容ES6的,那就把代码改一改,这里不再赋默认值,为了让方法可以正确执行而不报错,在调用这个方法的地方都强制传参就好了,修改后的代码如下:
var myVue = new Vue({
el: '#calendar',
data: [
// some data...
],
created: function(){
this.init(null, null);
},
methods: {
init: function(year, month){ // 这里就是报错的行
// some code...
}
}
})
既然是不兼容ES6语法造成的问题,那么我们还需要把其他地方所用到的ES6新增的语法一起修改掉,例如:
//ES6
a=> {}
b = {c(){}}
//ES5
function(a){}
b = {c:function(){}}
更多ES6新增的特性和语法,可查看以下资料:
ES6还对数组对象进行了增强,其中增加了find
方法,要在IE下继续使用find
方法,那就需要为ES5扩展find
方法,否则IE就会报出如图所示的错误:
扩展find
方法的代码如下:
if (!Array.prototype.find) {
Array.prototype.find = function (predicate) {
'use strict';
if (this == null) {
throw new TypeError('Array.prototype.find called on null or undefined');
}
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
var list = Object(this);
var length = list.length >>> 0;
var thisArg = arguments[1];
var value;
for (var i = 0; i < length; i++) {
value = list[i];
if (predicate.call(thisArg, value, i, list)) {
return value;
}
}
return undefined;
};
}
引入了axios
后,IE再次报出Promise未定义
的错误,如下图:
这是因为axios
使用了es6
新增的Promise
对象导致,我们只需要在引入前先引入es6-promise.auto.min.js
即可解决问题。
es6-promise
项目github地址
现在,这个组件终于可以在IE上正常展示了!
最后,我们的项目是否需要兼容ES5需要您对您的用户有一个较为明确的认知,并不是所有项目都需要去做ES5兼容,毕竟因此会增加不少的工作量。
本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
原文出处:Yiiven https://cloud.tencent.com/developer/article/2193251