近期工作踩坑和学习总结

Array.prototype.sort

这个地方是实现不同而导致的问题,而且我认为这属于一个比较重大的坑。

表现上是:safari 和 chrome 两者的结果返回是不一致的。

// 在chrome中:
[1, 10, 100].sort(x => 10 - x)
// <- [10, 100, 1]

// 在safari中:
[1, 10, 100].sort(x => 10 - x)
// <- [100, 1, 10]

规避这个坑有两种解决方案:

  1. 自己手动写一个排序

  2. 将对比中间值插入到需要对比的Array<Object>中。对比参数中拿到两个值,这样相比较。

[{a: 1}, {a: 10}, {a: 100}].map(i => {
i._tmp = 10
return i
}).sort((p, c) => p._tmp - c.a)
.map(i => {
delete i._tmp
return i
})

table in iOS

ios里面的tbody有个属性,如果不检查会导致在iOS上显示出多余的空白部分。

iOS中的样式是这样的:

-webkit-border-horizontal-spacing: 2px;
-webkit-border-vertical-spacing: 2px;

解决方案是重置这两个属性

td 中使用 flexbox上下居中

同样是在iOS中才会出现的问题。很操蛋。解决方式还好了,可以用其他的上下居中方案。网上一搜一大堆。

fetch

这个坑只有用fetch才会有,其实说坑也不合适,算是文档没有细读吧。

表现形式:fetch发送的请求,服务端set-cookie,然而客户端并不会保存cookie。然而转成XMLHttpRequest就不会有问题。

解决方案:需要刷一下fetch关于credentials字段的解释。

fetch里这个credentials字段有三个参数,分别是:忽略,同源策略,全部。所以基本上只要设置成同源策略就可以了。

而XMLHttpRequest默认就是同源策略,所以不会产生问题。

css文字截取

文字截取最简单的方式是用这样CSS属性。js难度很大。

这个方案的问题在于兼容性,因为是一个私有属性,其实实际看来还好。

-webkit-line-clamp: 3; // 这个表示行数
overflow: hidden;
flex-direction: column;
-webkit-box-orient: vertical;
display: -webkit-box;

Thanks

谢谢 @可诚 的指导,让我学会了很多。感谢。

最后

我是应届生,需要一份上海的工作。能写前端能写中间层。如果对我有兴趣欢迎发邮件给我:iamhele1994@gmail.com

(又要找工作了,好烦)