以下列举了几个经常被我忘记的点，有的来源于业务项目，有的来源于组件库开发，还有的是两者都有的。
汉字输入（JS）
当我们需要统计文本框或文本域输入内容的字数时，我敢说 80% 以上的前端童鞋都会忘记考虑「输入汉字」这种情况，如果再碰到像我一样“处女座”的产品或测试童鞋，bug 更在所难免。
先来看下现象，敲字母时，按空格前也会统计字数。
解决方案是使用 `compositionstart` 与 `compositionend` 这对搭档。
const handleKeyup = () => {
len = textarea.value.length;
if(!typing) {
count.innerText = len;
}
}
const handleCompositionstart = () => {
typing = true;
}
const handleCompositionend = () => {
typing = false;
}
textarea.addEventListener('compositionstart', handleCompositionstart);
textarea.addEventListener('compositionend', handleCompositionend);
此时，只有当最后按下空格时才改变字数。
代码健壮性（JS）
健壮性又称“鲁棒性”，是体现代码质量的一个重要指标。特别是面试的时候，别人只实现了功能，而你还多考虑了代码的健壮性，结果可想而知。
这里主要说的是一些接口数据的容错问题，比如：
很多人往往都是带着数据写的业务逻辑，等到上线后也没考虑到返回数据为 null 或者 undefined 的情况。
-
如果点儿背的话，可能会引发线上事故，造成客诉。
-
如果幸运的话，你可能提前接入了监控平台，可以尽早发现问题。
但为了解决根本问题，还是建议大家养成良好的习惯，为可能出现 null 或者 undefined 的字段添加容错（拿不准的话，所有地方都加上，也不会出问题）。
很简单，现在几乎所有的项目都使用了 TS，只需要参考下面的写法就行：
let data = res?.data
除了 null 和 undefined，这里再列举下几个常见的错误关键字：
- length
- filter
- map
- find
- style
不了解 “?.” 的童鞋可以去恶补 ES 规范。
Rollbar 监控平台于 2018 年统计了前端项目中 Top10 的错误类型，以上错误都被包含在内。
置灰不可点（JS & HTML & CSS）
置灰不能点击，谁都知道，但是真正开发时，还是容易被忘记的。
常见的做法，增加个判断：
if(disabled) return;
如果被点击元素是 button 的话，连上面判断都不需要加，直接：
<button disabled>我不可点击</button>
带有 disabled 属性的 button 元素默认是不能被点击的。
或者是增加一行 CSS 代码：
/* 置灰状态不可点击 */
.disabled,
[disabled] {
pointer-events: none;
}
溢出隐藏（CSS）
这里主要指一些模块没有添加以下样式。
white-space: nowrap;
overfllow: hidden;
text-overflow: ellipsis;
可能导致的后果：内容超过一行时，造成页面样式错乱。
在开发组件时，也需要提前考虑到这种情况，因为用户传入的 props 有很大的随机性，比如这个 Card 组件的标题。
最后还是建议大家不管开发业务项目还是开发组件库，都多考虑考虑这个场景。
冒泡（JS）
冒泡这个词大家都知道啥意思，但是当我们真正开发项目时也可能会忘记。当然，也许你很幸运，测试阶段就处理了这个 bug。
可能导致的后果：触发一个或多个父容器中的事件。
好了，先介绍到这里。
总之，人非圣贤，忘记是人的天性，写这篇文章，提醒我的同时，也希望给大家打个预防针。
