haorooms博客前端小知识点总结

5584次浏览

前言

几个月没有更新了,百度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 很牛逼的拖拽组件

https://daybrush.com/moveable/storybook/?path=/story/advanced-snappable--advanced-snappable-custom-element-guidelines

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);

相关文章:

  1. 蛋仔派对无限蛋币
    1
    蛋仔派对无限蛋币https://www.wzryzs.com/
  2. 投入到厚
    2
    王者荣耀无限点券http://av325.com/ gg修改器http://www.zavx.cn/