避坑技巧

行首括弧

当行首以括弧开头时会与上一行的函数合并成一个表达式而引起语法错误:Cannot read property 'name' of undefined
log(1)
(2 > 3) ? log(4) : log(5)
上面表达式会被解释成如下表达式而导致错误 =>
log(1)(2 > 3) ? log(4) : log(5)
在前一个表达式末尾加上分号; 就可以绕过此坑。

翻页后页面有点怪异,刷新一下页面就正常了

通常是因为上一页使用了外部插件(比如swiper)而影响到本页面同一个位置的元素。众触使用了ReactJS技术,翻页时会把两个页面做一次diff比较,对于完全相同的元素(位置也相同,所有祖宗元素也相同)将保留不变而不重新渲染,从而加速新页面的渲染。通常这没有问题,但当元素被外部插件改变时React并不知情,恰恰新页面也有完全相同的元素,结果翻页后被改变后的元素被保留下来而使新页面变得怪异了。
避免这种情况我们只需要使被外部插件影响到的元素跟新页面不相同即可,也可以把位置变换一下或者改变其中一个祖宗元素。

CSS被转换

平台会使用当前浏览器对组件样式和页面CSS进行整合、转换,使得样式更简洁易读,但有时会出现不兼容老浏览器的情况。
比如最新的chrome浏览器会把top: 0; right: 0; bottom: 0; left: 0;转换成inset: 0;,但有些老旧浏览器并不支持inset,导致显示问题。一个办法是更改写法,如把right: 0;改成width: 100%或者把bottom: 0;改成height: 100%,另一个办法是把样式写到外部(全局)CSS中,那里的样式不会被转换。

Make in ZC APP Platform