Fork me on GitHub

记一次ios9的适配bug

最近项目要上线,客户五月初等着要用,然后用ipad的ios9测试兼容性的时候又出了一些问题

然后排查发现是因为项目代码里使用了 es2017 的语法 Object.entries(),而 vue cli 配置的 .babelrc 如下:

1
2
3
4
5
6
7
8
9
10
11
12
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}

这并不会处理 es2017 的语法。

经过王二一番分析,于是有了如下五种解决方案:

1、改变遍历语法

后台给我的数据结构类似如下:

1
2
3
4
5
{
'姓名':'王二',
'年龄':23,
'爱好':'敲代码'
}

我需要将这组对象的 key 和 value 都遍历出来:

我开始在vue里是这样遍历的:

1
2
3
4
<div v-for="i in data">
<div>{{Object.entries(i)[0][0]}}:</div>
<div>{{Object.entries(i)[0][1]}}</div>
</div>

改成如下遍历:

1
2
3
4
5
6
<div v-for="i in data">
<template v-for="(j,k) in i">
<div>{{k}}:</div>
<div>{{j}}</div>
</template>
</div>

问题也就解决了。

2、让后台改变数据结构

王二认为,其实以上的数据结构并不合理,如果改成如下这种写法的话,前端遍历就方便多了:

1
2
3
4
5
6
7
8
9
10
[{
key: '姓名',
value: '王二'
},{
key: '年龄',
value: 23
}{
key: '爱好',
value: '敲代码'
}]

3、写一个 Object.entries() 的polyfill

没有 Object.entries() 这个语法,我们就来创造一个呗,方法如下:

1
2
3
Object.entries = x =>
Object.keys(x).reduce((y, z) =>
y.push([z, x[z]]) && y, []);

此方法参考自 stackoverflow 下 Randy 的回答

4、修改 .babelrc 配置文件

stackoverflow 里的大神,我们可以修改 .babelrc 配置文件来解决这个问题,修改如下:

1
2
3
4
{
"plugins": ["transform-runtime"],
"presets": ["es2017"]
}

但是王二尝试了一下,没有成功。后来在github上发现了这个issue,似乎 babel-preset-es2017 也不会支持 Object.entries() ,于是就此打住。

5、引用 core-js/fn/object/entries

stackoverflow 里的大神提醒,加上 require('core-js/fn/object/entries'); 就能使用 Object.entries 了,试了试,还真管用。

-------------本文结束感谢您的阅读-------------