WONDER's Blog

应用场景

使用 redux-toolkit 管理全局状态（如请求的 token），将一些异步操作也写在 redux 中（如登录接口）。使用 axios 请求数据，在 axios 拦截器中又需要操作全局状态（如获取请求 token、请求发现登录过期，自动退出登录）。这就意味着要在 react-component 之外进行 store 的 state 获取、或者 action 的 dispatch 操作，而在非 tsx 文件中，无法使用 useDispatch 的 hook。

win10 系统忘记用户密码，无法登录。首先区分帐户类型：

• 已登录 windows 帐号的网络帐户，直接在 windows 的网络帐户管理网站上重置密码即可，参考重置忘记的 Microsoft 帐户密码;

• 本地帐户如记得密码提示问题，或生成过密码重置盘，则可以直接重置，否则就需要一些额外的技术手段来重置了。

重置密码，不使用第三方软件，仅需系统安装盘

原理

使 cmd 命令行工具在系统环境下，绕过 windows 密码执行，然后重置用户密码

方案

win10 登录界面右下角有一个轻松使用按钮，将轻松使用替换为 cmd 命令行，再重置用户密码

使用场景

UI 设计了一个特殊的 Tab 页效果，需要在选中某个 Tab 后，改变相邻两个 Tab 的样式。因此需要选中后一个兄弟元素与前一个兄弟元素。

为什么没有前一个兄弟元素的选择器

CSS 中有~来选中所有后续兄弟元素，+来选中紧邻的后续兄弟元素，为什么没有语法能选中紧邻的前一个兄弟元素？

查阅资料后发现，诸如 查找子元素的直接父元素、查找子元素的祖先元素、查找某元素的前一个紧邻兄弟元素 这样的选择器，CSS 中都未实现。因为这样的选择器会导致回溯。

锥形渐变简介

锥形渐变函数会创建一个围绕中心点旋转的颜色渐变图像，由于创建出的图像有锥形的效果，故称为锥形渐变。锥形渐变函数的返回值是渐变数据类型的对象，与其他渐变一样，可以理解为是一张图片，故只能在 background 属性上使用，而不能用于 background-color 属性。

锥形渐变颜色随旋转角度改变而改变，与半径无关，同一角度上不论半径为多少，都是相同的颜色。可以看出这与我们熟知的径向渐变不同，径向渐变的颜色随半径长短改变而改变，与角度无关，同一半径上无论角度为多少，都是相同的颜色。

使用锥形渐变我们可以轻易地实现出饼图、调色盘、棋盘等效果。

应用场景

公司的前端框架与项目本身存储于两个不同的远程仓库下，具体项目在创建时，基于前端框架的某个版本。开发一段时间后，若框架有比较重要的更新需要添加到项目中时，基于更新后的框架再将项目中的代码移植过去，通常比较麻烦。

实践下来，现在比较好的方案是给项目两个分支与两个远程仓库，其中一个分支与远程仓库用于项目的开发，另一个分支和远程仓库用于追踪框架的更新，当拉取框架更新后，将追踪框架更新的分支合并到项目分支中即可。这样只需要处理少量冲突，甚至不用处理冲突，就可以完成更新。

这个方案虽比较好用，但是有个风险就是如果忘记更改 dev 分支的上游分支，可能会把项目代码，错误地推送至框架代码库。那么如何方便地查看当前分支的远程上游分支呢？

查看当前分支的上游（upstream）分支

在 git branch 的帮助文档中-v 参数下有一行说明，如果给两个 v 字母，将会相比给一个 v，额外打印出上游分支的名称与链接的工作目录（如果链接的工作目录存在）。

即使用 git branch -vv 就可以查看所有分支的上游分支名称。

防抖（debounce）

指在高频触发的事件中，延迟调用事件的回调函数直到规定的延迟时间内没有再次触发该事件，若在延迟时间内触发了该事件，则重置延迟时间。

通过防抖的定义，可以知道，防抖使事件的回调只执行了最后的一次。

// 简易实现
function debounce(callback: () => void, delay: number) {
  let timer: number | null = null;
  return () => {
    if (timer) {
      window.clearTimeout(timer);
    }
    timer = window.setTimeout(callback, delay);
  };
}

使用背景

通常我们在页面中使用一个截屏按钮，通过点击截屏按钮来截图。业务中发现截屏时如果想要展示一些鼠标 hover 才能展示的数据时，与点击按钮截屏相冲突。故需要使用键盘截屏。

根据业务需求，需要在某个特定的 div 区域绑定键盘事件，发现在 div 上绑定键盘事件没有效果。

键盘事件

keydown 事件触发于键盘按下的时候，keyup 事件触发于键盘抬起的时候。与 keypress 事件（keypress 事件已弃用）不同，所有按键都会触发 keyup、keydown 事件，而 keypress 事件只有产生字符值的按键才会触发。

重点：键盘事件只能由<inputs>,<textarea>以及任何具有contentEditable或tabindex=-1属性的组件触发

这也就解释了为什么在 div 元素上绑定键盘事件无效了。因为 div 元素不是 contentEditable 元素也没有 tabindex 属性。

tabindex

tabindex 是一个所有的 html 元素都有的全局属性，该属性表示当前元素是否可以聚焦（focus），以及它以何种顺序参与键盘导航。

• tabindex 为负值（通常设置为-1），表示元素是可聚焦的，但是不能通过键盘导航访问到该元素。

• tabindex 为 0，表示元素是可聚焦的，并且可以通过键盘导航聚焦到该元素，它的相对顺序是根据元素在 DOM 中的顺序决定的。

• tabindex 为正值，表示元素可聚焦，且可以通过键盘导航聚焦，它的相对顺序根据 tabindex 递增而滞后获得焦点。若多个元素有相同 tabindex，则相对顺序按照它们在 DOM 中的顺序确定。

通常值为 0、非法值、或没有 tabindex 值的元素应该放到 tabindex 值为正值的元素后面。tabindex 最大不能超过 32767。

解决方案

给 div 元素设置tabindex=-1即可在 div 元素上监听键盘事件。

// 在tsx中
<div tabIndex={-1} onKeyDown={(event) => console.log(event)}></div>

参考资料

div 元素监听键盘事件

MDN-Element: 键盘按下事件

MDN-tabindex

伪类

:pseudo-class-name

伪类是选择器的一种，它用于选择处于特定状态的元素。它们会表现得像对文档某部分应用了一个类一样，伪类有助于减少多余的类，让代码更灵活、更易于维护。

语法

:nth-child(N)

该伪类选择器匹配属于父元素的第 N 个子元素，即指选择器的第 N 个兄弟元素。

N 可以是整数、关键字或公式 an+b。

关键字为 odd（奇数）或 even（偶数）。

公式为 an+b，其中 n 为计数器，从 0 开始递增，a 与 b 是线性函数参数，可以是任意整数。

现象

在业务中发现设置小于 12px 的字号不生效，最小只能设置为 12px 的问题。

结论

由于中文字体笔划较密，小于 12px 时，展示效果不佳，故 chrome 浏览器中文版默认最小字号为 12px，英文版则没有最小字号为 12px 的限制。为了有更为统一的用户体验，而无需用户自行修改浏览器默认配置，不使用小于 12px 的字号，是最佳实践。

修改最小字号

如果一定要修改最小字号，地址栏输入chorme://settings/fonts，进入字体设置，调整最小字号为 0，即可使小于 12px 的字号生效了。

参考资料

「每日一题」为什么不建议将 font-size 设置为 12px 以下？

再谈 Chrome 的最小字体 12px 限制