工作记录零碎

Posted on | In

Charles mock 数据

Charles mock 数据，眼看着 Charles 抓到的包都是正常的，可是浏览器中间就是收不到响应。忽然回忆起，跨域实际上是浏览器本身做的一个限制，为用户的安全，及时收到数据也不返回。考虑到可能是跨域的问题，开了禁止跨域的浏览器，解决。

position: fixed 问题

fixed 的元素不一定相对视口定位。在祖先元素中出现某些特定属性时，会相对于该祖先元素定位。

相关文章：fixed 定位失效 | 不受控制的 position:fixed

写全局组件的方法

如常见的 Modal 弹窗，之前一直都会在组件中设置一个 modalShow 的值，用来在组件内控制 Modal 组件的显示/隐藏。最近忽然意识到，其实可以更加方便。直接 ReactDOM.render Modal 组件，然后将其插入某节点即可。不需要依赖组件内部的某个值来显示隐藏。详见：Modal 组件

Flex 做到子元素无条件等分空间

不知道我的做法对不对劲……毕竟是自己想到的。众所周知，Flex 布局中，子元素会先占据自己应有的大小，然后再等分剩余空间。导致子元素如果自然状态时大小并不一样大，则无法真正做到等分父元素。因此，可以给所有子元素设置 width: 100%。这样，所有子元素都会同样大小自然等分父元素。

触底定位不准

奇怪的一加手机：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 视窗到网页底端的距离，为 0 即为触底
export const getBottom = () => {
  let el
  if (document.documentElement.scrollTop) {
    el = document.documentElement
  } else {
    el = document.body
  }
  // 在（至少是）Chrome 浏览器下，当 documentElement.scrollTop 为 0 时，clientHeight 不为视口高度，而是整个网页的高度，与 scrollHeight 相等
  // 在安卓 webview 中，clientHeight 也是与 scrollHeight 相等的
  // 因此，用 window.innerHeight 替换 clientHeight
  // 在一加手机中，可能出现计算值为小于 0 或 大于 0 小于 1 的情况，因此将触底计算更改为 < 1
  return el.scrollHeight - el.scrollTop - window.innerHeight <= 1
}

Number.parseInt

低版本浏览器不支持 Number.parseInt，但是支持 window.parseInt。

webview 中刷新页面

前端在 webview 中刷新页面的行为是不可靠的，部分机型前端没有刷新页面的权利，需要客户端来刷新。

create-react-app 升级后问题

create-react-app 最近应该是进行了升级，和我几个月前拉的代码完全不一样。有两个小坑：

  1. eject 项目后会报缺包错误，按照它的错误提示装三个包就可以了；
  2. css module 不再默认开启，看 webpack 配置代码会发现，文件名为 ‘xxx.module.css’ 的文件才会开启 css module，否则会报一个根本完全看不出来是因为没有开启 css module 的错误。真的完全看不出来，从字面意义上看，完全就是在告诉你另一回事……

fastclick 造成的坑

  • ios 引入 fastclick 会导致 contenteditable 的元素无法正常聚焦。表现为非常不灵敏，需要长按才能聚焦。

React Hooks 闭包问题

setTimeout 之类的闭包问题可能就必须用 ref 一类的方式解决。但是事件监听方法不必要啊！
你下意识地将元素的 dom 实例取出，用原生事件绑定。这样回调方法永远是绑定时候创建的那一个，就触发了闭包问题。
实际上，应该直接在元素上面绑定事件监听方法。这样每次渲染，都创建了一个新的回调方法，这个方法所获取的值就一直都是最新的。
就不存在闭包问题了。

mobile safari 点击事件失效

部分不可点击的元素，需要明确指定 cursor: pointer 才可以。