前言
几个月没有更新了，百度seo搜索引擎不知道是抽风了还是咋了。搜索关键词都找不到本博客了。本博客已经10年了，目前也在考虑其他创新形式，博客将作为一种形式存在。好了，废话少说，先说下今天要介绍的东西吧。首先介绍几个常用的前端库，然后介绍chrome的一些调试方法，最后讲讲高亮的实现方式。
介绍几个常用的前端库
1、radash
2、use-debounce
3、timeago.js 我上一篇文章用的是自己的方式实现的时间，这个库可以方便实现。
4、react-use
5、dayjs
6、filesize
7、driver.js
8、drag-and-drop
9、localForage
10、react-cropper
图片裁剪，很强的
11、moveable 很牛逼的拖拽组件
chrome的调试方法
下面介绍chrome调试的一些方法
引入插件
现在的前端开发过程，离不开各种 npm 插件，但你可能没有想过，有一天我们竟然可以在 Dev Tools 里面来使用 npm 插件！
有时你只是想玩玩新出的 npm 包，现在不用再大费周章去建一个项目测试了，只需要在 Chrome插件:Console Importer 的帮助之下，快速的在 console 中引入和测试一些 npm 库。
运行 $i('lodash') 或者 $i('moment') 几秒钟后，你就可以获取到 lodash / momentjs 了:
截屏
打开 Command 菜单，输入screen ，全屏截图 - 通过 Capture full size screenshot 命令。就可以截屏了。
文本高亮的新实现
之前我的文章里面有介绍过文本高亮的一些做法，但是是不同的技术来实现的，目前css也支持了一些文本高亮的方法，但是需要配合js来实现。可以看mdn案例：https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API
实现CSS纯文本高亮需要下面四步：
创建Range对象（使用JS）；
使用第一步创建的range创建Highlight对象（使用JS）；
使用HighlightRegistry方法注册上一步创建的Highlight对象（使用JS）；
使用::highlight()伪元素让设置注册的文本选区样式（使用CSS）；
由此可见，CSS自定义文本高亮API其实是JavaScript代码完成了大部分的工作。
下面是一个隐藏手机号的案例
//CSS代码：
::highlight(tel-highlight) {
background-color: currentColor;
}
//HTML代码：
<p id="p">如有疑问可以WX加13208033621或者15812345678咨询。</p>
//JS代码：
// 文本字符内容
const str = p.textContent;
// 手机号起始索引值
const arrIndex = str.match(/1\d{10}/g).map(tel => str.indexOf(tel));
// 创建range数组
const arrRange = arrIndex.map(start => {
const range = new Range();
range.setStart(p.firstChild, start + 3);
range.setEnd(p.firstChild, start + 7);
return range;
});
// 定义高亮
const highlight = new Highlight(...arrRange.flat());
// 注册高亮
CSS.highlights.set("tel-highlight", highlight);