插件或工具

插件

浏览器插件

1. SuperCopy 超级复制 (浏览器插件，破解一些需要登录等才能复制的场景)

vscode 插件

1. 别名路径跳转 可以随意跳转到文件
2. path-alias 路径跳转插件，这个貌似更好用点
3. koroFileHeader 文件注释插件
4. Project Manager 项目切换

juejin.cn/post/684490…

工具

• ediary 笔记工具
• Q-dir 桌面整理工具
• 抓包工具 fidder 可以抓http和https 请求
• uTools 神器
• 不同屏幕下页面预览
• 扩展右键打开软件(eg:右键用vscode打开等)

API

不常用但是很好用的一些API

IntersectionObserver

可以自动"观察"元素是否可见，Chrome 51+ 已经支持。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"

用法：

var io = new IntersectionObserver(callback, option);

上面代码中，IntersectionObserver是浏览器原生提供的构造函数，接受两个参数：callback是可见性变化时的回调函数，option是配置对象（该参数可选）。

构造函数的返回值是一个观察器实例。实例的observe方法可以指定观察哪个 DOM 节点。

// 开始观察
io.observe(document.getElementById('example'));

// 停止观察
io.unobserve(element);

// 关闭观察器
io.disconnect();

上面代码中，observe的参数是一个 DOM 节点对象。如果要观察多个节点，就要多次调用这个方法。

callback参数

目标元素的可见性变化时，就会调用观察器的回调函数callback。

callback一般会触发两次。一次是目标元素刚刚进入视口（开始可见），另一次是完全离开视口（开始不可见）。

var io = new IntersectionObserver(
  entries => {
    console.log(entries);
  }
);

上面代码中，回调函数采用的是箭头函数的写法。callback函数的参数（entries）是一个数组，每个成员都是一个IntersectionObserverEntry对象。举例来说，如果同时有两个被观察的对象的可见性发生变化，entries数组就会有两个成员。

www.ruanyifeng.com/blog/2016/1…

scrollIntoView

DOM元素的scrollIntoView()方法是一个IE6浏览器也支持的原生JS API，可以让元素进入视区，通过触发滚动容器的定位实现。

随着Chrome和Firefox浏览器开始支持CSS scroll-behavior属性，顺便对，scrollIntoView()方法进行了升级，使支持更多参数，其中一个参数就是可以使滚动平滑。