记录两个有意思的js坑？

作者: 习惯水文的前端苏 | 来源:发表于2022-02-10 13:35 被阅读0次

$\bullet$ 前言

这是最近遇到的3个缺陷，本身不复杂，但是很容易掉进去，故在此简单记录下

$\bullet$ on与addEventListener

这个问题展现在我开发的公共组件card内，我在组件内部使用addEventListener注册了touch事件来处理卡片中的路由跳转以及长按事件，在其他人使用过程中，碰到需要在传入的每一项中根据单独不同的值来决定路由跳转的目标，因此需要禁用掉card内部的。发现无法阻止冒泡

这主要是有react的合成事件和原生事件的区别，在react中，以on开头的是合成事件，使用addEventListener注册的则是原生事件。两者在冒泡行为上有如下区别

$\alpha$ 阻止 React 合成事件冒泡，并不能阻止原生事件的冒泡，就算使用 stopPropagation 也无法阻止原生事件的冒泡

$\beta$ 取消原生事件的冒泡也会同时取消 React 事件，并且原生事件的冒泡在 React 事件的触发和冒泡之前

$\bullet$ 对数组执行String方法后trim

这个是在昨天开发过程中遇到，请求后台接口给报的签名错误。签名相关的也就是传参了，但是在反复对比确认后确定传参无问题，考虑到该项目已经上线半年多了，故认为是后台的问题

但是后台排查后发现并不是，于是就顺着逻辑去排查，发现在请求的全局处理中对参数的处理过程中使用了String(key).tirm()。如下,它将我的数组类型的参数转换掉了！！！我直呼真坑.......

$\bullet$ 科学计数

如果要对数值做一些处理，需要留意科学计数问题

网友评论

本文标题：记录两个有意思的js坑？

本文链接：https://www.haomeiwen.com/subject/gejrzltx.html

记录两个有意思的js坑？