使用 nodejs 中的 http 模块实现几个超实用的工具 nodejs 方便了我们前端开发者进行一些服务端上的操作，可以进行无缝地衔接。像其他一些后端语言，如 php, golang, java 等，都需要一定的学习成本，而 nodejs 则就是为前端开发者定制的。在 nodejs 中，提供了原生的 http 模块，我们可以利用 http 模块搞几个常用的小工具，能够大大方便我们的工作。我在之前从 0 到 1 学习 node(二)之搭建 http 服务器的文章中也讲解过 http 模块，不过我们这里主要是利用 http 模块来打造几个使用的工具。 1. 一个简单的 HTTP 服务 # 使用 nodejs 搭建 http 服务非常地简单，只需要引入 http 模块即可：// server.js const http = require('http'); const ip = '127.0.0.1'; const port = 3000; http .createServer((req, res) => { res.end('heelo world!'); }) .listen(port, ip); console.log(`server has started at ${ip}:${port}`); 然后执行 server.js 文件：$node server.js 在控制台就会输出：server has started at 127.0.0.1:3000 然后在浏览器上访问http://127.0.0.1:3000，就能看到**hello world!**的输出。如果想在启动时，通过参数指定 IP 或端口。那么我们可以通过process.env来获取命令行中指定的参数：// 通过process.env来获取指定的参数 // 并设置兜底的数据 const ip = process.env.IP || '127.0.0.1'; const port = process.env.PORT || 3000; 在执行 sever.js 时，就可以通过参数指定 IP 和端口：$PORT=3030 node app.js 2. 一个有延迟的请求 # 在做开发和调试过程中，经常需要考虑到一个请求或者图片等加载很慢时，应该怎么处理。比如有用户反馈某些图片加载很慢，导致页面看起来不正常。那么我就应该针对图片加载慢进行一些处理，可是怎么模拟这个加载很慢的图片呢？很多现有的接口，都无法模拟出这种有特殊延迟的情况，这里我们可以使用 http 模块来实现。我们在第 1 个 http 服务器的基础上，进行改进。 res.end()方法会告知服务器当前次响应结束，若没有调用，则一直处于等待状态。 我们要实现一个有延迟的响应，可以使用 setTimeout 延迟调用 end()方法即可。这里先实现一个有延迟的接口。http .createServer((req, res) => { const index = req.url.indexOf('?'); if (index >= 0) { const query = req.url.slice(index); const ss = new URLSearchParams(query); const timeout = ss.get('timeout'); const type = ss.get('type'); if (timeout && Number(timeout)) { return setTimeout(() => { if (type === 'json') { res.writeHead(200, { 'Content-Type': 'application/json' }); res.end(JSON.stringify({ code: 0, msg: 'hello world' })); } else if (type === 'image') { // 输出本地一个图片 } else { res.end(`delay ${timeout}ms response`); } }, Number(timeout)); } } res.end('hello world!'); }) .listen(port, ip); 想要延迟输出图片时，需要通过数据流的方式读取本地的图片，然后输出到前端：const stream = fs.createReadStream('./img/s.jpg'); const responseData = []; //存储文件流 if (stream) { //判断状态 stream.on('data', function (chunk) { responseData.push(chunk); }); stream.on('end', function () { const finalData = Buffer.concat(responseData); // response.write(); res.writeHead(200, { 'Content-Type': 'image/jpg' }); res.end(finalData); }); } 3. 实现接口的中转代理 # 我们有时会遇到需要的接口存在跨域，或者是内网接口的问题，这时我们就需要通过一个中间层，来对接口进行中转代理，才能正常地访问接口。 3.1 原生 http 模块来实现 # 实现接口代理时要注意亮点： 透传，接收到的所有数据，根据需要尽量都传给代理的接口，例如 cookie，参数等； 设置跨域头，为了方便前端的访问，我们需要在返回的头部加上 3 个可以跨域的字段； 跨域的方式有很多种，比如 jsonp 也是其中一种，但 cors 跨域是比较好的一种，前端可以有效地控制请求时间和取消请求。在设置跨域头Access-Control-Allow-Origin时，这里是不建议直接设置成*。一方面是不安全，所有的域名都可以访问；再有就是前端不会再传送 cookie，无法进行一些登录态的校验等。在设置Access-Control-Allow-Origin之前，我们要先校验下 headers 中的 referer，如果为空或者不满足白名单的要求，则可以直接返回 403。const allowList = ['joke.qq.com', 'www.qq.com']; if (!req.headers || !req.headers.referer) { res.writeHead(403, 'forbidden'); res.end('403 forbidden'); return; } const { hostname } = new URL(req.headers.referer); if (!allowList.includes(hostname)) { res.writeHead(403, 'forbidden'); res.end('403 forbidden'); return; } 满足要求之后，需要将 referer 最后的斜杠/去掉，否则会设置不成功。完成的代码样例如下：const http = require('http'); const https = require('https'); const ip = process.env.IP || '127.0.0.1'; const port = process.env.PORT || 3001; http .createServer((req, res) => { const allowList = ['joke.qq.com', 'www.qq.com']; if (!req.headers || !req.headers.referer || allow) { res.writeHead(403, 'forbidden'); res.end('403 forbidden'); return; } console.log('发起请求', req.headers); https .get('https://www.v2ex.com/api/topics/latest.json', (response) => { let data = ''; response.on('data', (chunk) => { data += chunk; }); response.on('end', () => { res.setHeader('Access-Control-Allow-Origin', (req.headers.referer || '').replace(/\/$/, '')); res.setHeader('Access-Control-Allow-Methods', 'GET, POST'); res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type'); res.end(data); }); }) .on('error', (e) => { console.error(`请求遇到问题: ${e.message}`, e); res.end('error'); }); }) .listen(port, ip); console.log(`server has started at ${ip}:${port}`); 3.2 proxy 代理组件 # 若需要代理更多的接口，或者路径是从前端传过来的，我们自己倒是也可以实现，不过还有更方便的 proxy 代理组件了。这里我们用 http-proxy 组件来实现：const http = require('http'); const httpProxy = require('http-proxy'); const ip = process.env.IP || '127.0.0.1'; const port = process.env.PORT || 3000; const proxy = httpProxy.createProxyServer({ target: 'https://www.v2ex.com', // 代理的接口地址 changeOrigin: true, }); http .createServer((req, res) => { // 设置跨域头 res.setHeader('Access-Control-Allow-Origin', (req.headers.referer || '').replace(/\/$/, '')); res.setHeader('Access-Control-Allow-Methods', 'GET, POST'); res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type'); // 将请求和响应的对象传给proxy proxy.web(req, res); }) .listen(port, ip); 然后前端直接按照路径发起请求即可：axios('http://localhost:3000/api/topics/latest.json').then(console.log).catch(console.error); 4. 模拟数据 # 前端在写页面逻辑时，经常要考虑到数据的各种情况，比如无数据时，长列表，各种长度的昵称等。无论是读取配置的 json 文件，还是用代码生成的数据，都不具有随机性。现在，我们可以利用 mockjs 来实现各种数据的模拟：const http = require('http'); const Mock = require('mockjs'); const ip = process.env.IP || '127.0.0.1'; const port = process.env.PORT || 3000; http .createServer((req, res) => { const result = Mock.mock({ code: 0, msg: 'success', 'x-from': 'mock', data: Mock.mock({ 'rank|20': [ { 'no|+1': 1, // no 字段从 1 开始自增 uin: () => Mock.Random.string(32), // 32 长度的随机字符串 nick: () => Mock.Random.string(1, 20), // 长度在 1-20 之间的随机字符串 face: () => Mock.Random.image('120x120'), // 120*120 的图片 score: () => Mock.Random.integer(1, 2000), // 分数 }, ], }), }); res.setHeader('Access-Control-Allow-Origin', (req.headers.referer || '').replace(/\/$/, '')); res.setHeader('Access-Control-Allow-Methods', 'GET, POST'); res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type'); res.writeHead(200, { 'Content-Type': 'application/json' }); res.end(JSON.stringify(result, null, 2)); }) .listen(port, ip); 生成的数据：关于 Mockjs 更多的语法规则，可以访问https://github.com/nuysoft/Mock/wiki/Getting-Started。 5. 总结 # 使用 nodejs 还可以实现更多的功能，这里我们也仅仅是实现了其中简单的几个。基于我们的前端知识和业务需求，我们还能实现更多的小工具。

公众号改名叫“前端小茶馆”啦 之前公众号的名字一直是叫“蚊子的博客”，后来觉得这个名字没什么特色，也没有有突出业务特点。想了很长时间，终于把公众号的名字改成了“前端小茶馆”。就是希望这里作为一个休憩的地方，慢慢品读文章里的知识。感谢一直还在关注着我的朋友们，我也会持续输出一些多少有点质量的文章。或许只有在孤独中，我们才可以静静地、默默地谛听，谛听这个灯火阑珊的城市，谛听城市之外的旷野、远山，和比远山更远的一切生生不息的律动，同时也谛听自己生命的足音以及深邃的内心。或许在孤独中，我们才能强烈意识到生命荣枯兴衰的不朽轮回，从而坦然应对到来的一切。人生旅途中孤独是必然的，在真正的孤独中我们才能不断地成长。

JS 中一些高效的魔法运算符 这两天有同事说我挺久没更新文章了，不过最近一段时间确实有点忙，一直在忙着两个活动中心的改版，没什么时间来更新文章。今天终于抽空可以写一写。JavaScript 现在每年都会发一个新版本，里面也会新增一些操作更加便利、高效的运算符。今天我们就来盘点下几个高效的魔法运算符。 1. 可选链运算符 # 之前当我们想要使用某个结构比较深的属性，同时又无法确定所有的父级一定存在时，我们需要进行一连串的判断，例如一个数据结构：const student = { score: { math: 98, }, }; 我们想要获取最内层的 math 属性的值时：if (student && student.score) { console.log(student.score.math); } 1.1 获取深层次的属性 # 不过当我们使用可选链运算符后，判断就简单很多了，可选链运算符会在链路上遇到 null 或者 undefined 时，直接返回 undefined，而不会抛出错误异常：console.log(student?.score?.math); 1.2 执行一个可选的方法 # 同时在执行一个可能存在的函数时，也可以用到。例如一个 react 组件中，传入的方法是可选的：// getScore 是一个可选参数，要么是 undefined，要么是一个函数 const Student = ({ getScore }: { getScore?: () => void }) => { useEffect(() => { // 当 getScore 存在时，正常执行 getScore()方法 getScore?.(); }, []); return ; }; 或者我们执行一个 dom 元素的方法时，也可以使用。document.querySelector 会返回两种类型，当 dom 元素真实存在时会返回该元素，否则返回 null。写过 typescript 的都知道，当我们要调用某个方法时，总是要先确定该 dom 元素是存在的：const dom = document.querySelector('.score'); if (dom) { dom.getBoundingClientRect(); // 当 dom 元素存在时，才执行该方法 } 使用可选链操作符时，就直接调用即可：document.querySelector('.score')?.getBoundingClientRect(); 1.3 获取数组中的值 # 若数组存在，则获取某个下标的值，我们现在也不用再判断数组是否存在了，可以直接使用：arr?.[1]; // 若 arr 存在时，则正常获取 arr[1]中的值 上面的 3 种情况也是可以组合使用的。若一个结构比较复杂时，各种类型都有，这里我们要执行数组 math 下标 2 的方法：const student = { score: { math: [ 98, 67, () => { return 99; }, ], }, }; 执行：student?.score?.math?.[2]?.(); // 99 1.4 无法进行赋值操作 # 可选链运算符只能执行获取操作，是无法进行赋值操作的。例如给一个可能的数组或者 dom 元素赋值时，会直接抛出语法异常：arr?.[1] = 2; // x document.querySelector('.score')?.innerHTML = 98; // x 当我们执行上面的语句时，会抛出如下的提示： Uncaught SyntaxError: Invalid left-hand side in assignment 即不能给左侧的可选链进行赋值操作。 2. 双问号运算符 # 双问号运算符??，我理解是为了解决或运算符||而设计出来的。我们先来回顾下或运算符的操作，当左侧的数据为假值(数字 0, 布尔类型的 false，空字符串，undefined, null)时，则执行右侧的语句。false || 123; 0 || 123; '' || '123'; undefined || 123; null || 123; 可是在有些情况下，false 和 0 都是正常的值，但若使用或运算符时，会导致出错。比如下面的这个例子，当 score 为空时，则默认值为 1。当输入正常值 0 时应当返回 0（但实际上返回了 1）：const getSCore = (score: number) => { return score || 1; }; getScore(0); // 1 这时，我们就用到了双问号运算符??。双问号运算符只会在左侧为 undefined 或者 null 时，才会执行右侧的语句。const getSCore = (score: number) => { return score ?? 1; }; getScore(0); // 0 同时，双问号运算符还可以与=结合成为一个赋值操作，当左侧为 null 或者 undefined 时，则将右侧语句的结果赋值给左侧的变量：score ??= 1; // 1 3. 或运算和与运算的赋值操作 # 我们在之前使用或运算符进行赋值操作时，是这样写的：score = score || 1; age = age && 24; 现在可以直接简写成：score ||= 1; // 等同于 score = score || 1 age &&= 24; // 等同于 age = age && 24 4. 双星号运算符 # 双星号运算符**是比较早引入到 js 中的，只是我们用到的比较少而已。其实它执行的是一个幂运算，等同于 Math.pow()。2 ** 10; // 1024, 2的10次方，等同于 Math.pow(2, 10); 5. 总结 # 以上所有的样例均已在 chrome90 上运行通过。我们在已经有 babel 帮助转换的情况下，可以适当的在代码运用这些运算符，能够极大地简化我们的代码。

如何解决移动端的安全区域为0的问题 从 iPhone X 开始出现了刘海和底部的黑条的区域，而 Android 系统通常也会模仿 iPhone 的一些设计，然后就是现在越来越多地新机型有了安全区域的概念。若完全不考虑这些，可能就会出现类似这样的情况：因此我们需要对这些区域做些特殊地处理。 1. 适配 iOS 中的安全区域 # 在大部分机型，尤其是 iOS 设备中，适配安全区域还是比较简单的，主要是 3 个步骤。 1.1 设置网页在可视窗口的布局方式 # 新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口： 只有设置了 viewport-fit=cover，才能使用 env()。 1.2 限定安全区域 # iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量： safe-area-inset-left：安全区域距离左边边界的距离 safe-area-inset-right：安全区域距离右边边界的距离 safe-area-inset-top：安全区域距离顶部边界的距离 safe-area-inset-bottom：安全区域距离底部边界的距离 这里我们只需要关注safe-area-inset-bottom这个变量，因为它对应的就是小黑条的高度。注意：当 viewport-fit=contain 时 env() 是不起作用的，必须要配合 viewport-fit=cover 使用。对于不支持 env() 的浏览器，浏览器将会忽略它。 The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward. 这就意味着，之前使用的 constant() 在 iOS11.2 之后就不能使用的，但我们还是需要做向后兼容，像这样：body { padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */ } 注意：env() 跟 constant() 需要同时存在，而且顺序不能换。在竖屏的情况下，若要限定顶部的刘海区域，则要使用safe-area-inset-top；若要限定底部的区域，则要使用safe-area-inset-bottom。若需要进行计算，则可以使用calc()函数：body { padding-bottom: calc(12px + constant(safe-area-inset-bottom)); padding-bottom: calc(12px + env(safe-area-inset-bottom)); } 2. 部分奇特的 Android 手机 # 很多 Android 手机也会按照 iOS 的标准来实现安全区域，因此上面的属性在大部分 Android 手机上也能正常使用。但是，我们在测试的过程中发现，有几个奇特的手机，会出现下图的状况：通过 Chrome 查看样式，发现他会识别 safe-area-inset-top 等预定义变量，但又将其解析为 0。这就导致即使我们设置了兜底的数据，也无法使用。例如我们在不支持安全区域属性时，使用兜底的 padding-top: 25PX 样式（大写的 PX 是为了不被插件转义成 vw 或 rem），但上述的 Android 设备中，兜底样式也不会生效：body { /* prettier-ignore */ padding-top: 25PX; padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); } 那么如何解决这个问题呢？ 3. 解决方案 # 这里我们就要借助 js 来实现了。首先我们向页面中插入一个看不见的 div，将 div 的高度设置为安全距离的高度，然后再通过 js 获取其高度，若高度为 0，则说明没有生效。let status = 0; // 0:还没数据，-1:不支持，1:支持 /** * 判断当前设置是否支持constant(safe-area-inset-top)或env(safe-area-inset-top)； * 部分Android设备，可以认识safa-area-inset-top，但会将其识别为0 * @returns {boolean} 当前设备是否支持安全距离 */ const supportSafeArea = (): boolean => { if (status !== 0) { // 缓存数据，只向 body 插入一次 dom 即可 return status === 1; } const div = document.createElement('div'); const id = 'test-check-safe-area'; const styles = [ 'position: fixed', 'z-index: -1', 'height: constant(safe-area-inset-top)', 'height: env(safe-area-inset-top)', ]; div.style.cssText = styles.join(';'); div.id = id; document.body.appendChild(div); const areaDiv = document.getElementById(id); if (areaDiv) { status = areaDiv.offsetHeight > 0 ? 1 : -1; // 该 div 的高度是否为 0 areaDiv.parentNode?.removeChild(areaDiv); } return status === 1; }; 那么在已经设置了安全区域属性的地方，都需要额外执行下 supportSafeArea()方法：const SignTaskDetail = () => { const [safaArea, setSafeArea] = useState(true); // 当前页面是否支持 safe-area-inset-top useEffect(() => { setSafeArea(supportSafeArea()); }, []); return ( ); }; 4. 总结 # 设备兼容性一直我们前端在解决的问题，无论是在 PC 端还是在移动端，浏览器的多样性和编程语言的发展，必然需要解决这些问题。

基于 IntersectionObserver 实现一个组件的曝光监控 我们在产品推广过程中，经常需要判断用户是否对某个模块感兴趣。那么就需要获取该模块的曝光量和用户对该模块的点击量，若点击量/曝光量越高，说明该模块越有吸引力。那么如何知道模块对用户是否曝光了呢？之前我们是监听页面的滚动事件，然后通过getBoundingClientRect()现在我们直接使用IntersectionObserver就行了，使用起来简单方便，而且性能上也比监听滚动事件要好很多。 1. IntersectionObserver # 我们先来简单了解下这个 api 的使用方法。IntersectionObserver 有两个参数，new IntersectionObserver(callback, options)，callback 是当触发可见性时执行的回调，options 是相关的配置。// 初始化一个对象 const io = new IntersectionObserver( (entries) => { // entries是一个数组 console.log(entries); }, { threshold: [0, 0.5, 1], // 触发回调的节点，0表示元素刚完全不可见，1表示元素刚完全可见，0.5表示元素可见了一半等 }, ); // 监听dom对象，可以同时监听多个dom元素 io.observe(document.querySelector('.dom1')); io.observe(document.querySelector('.dom2')); // 取消监听dom元素 io.unobserve(document.querySelector('.dom2')); // 关闭观察器 io.disconnect(); 在 callback 中的 entries 参数是一个IntersectionObserverEntry类型的数组。主要有 6 个元素： { time: 3893.92, rootBounds: ClientRect { bottom: 920, height: 1024, left: 0, right: 1024, top: 0, width: 920 }, boundingClientRect: ClientRect { // ... }, intersectionRect: ClientRect { // ... }, intersectionRatio: 0.54, target: element } 各个属性的含义：{ time: 触发该行为的时间戳（从打开该页面开始计时的时间戳），单位毫秒 rootBounds: 视窗的尺寸, boundingClientRect: 被监听元素的尺寸, intersectionRect: 被监听元素与视窗交叉区域的尺寸, intersectionRatio: 触发该行为的比例, target: 被监听的dom元素 } 我们利用页面可见性的特点，可以做很多事情，比如组件懒加载、无限滚动、监控组件曝光等。 2. 监控组件的曝光 # 我们利用IntersectionObserver这个 api，可以很好地实现组件曝光量的统计。实现的方式主要有两种： 函数的方式； 高阶组件的方式； 传入的参数：interface ComExposeProps { readonly always?: boolean; // 是否一直有效 // 曝光时的回调，若不存在always，则只执行一次 onExpose?: (dom: HTMLElement) => void; // 曝光后又隐藏的回调，若不存在always，则只执行一次 onHide?: (dom: HTMLElement) => void; observerOptions?: IntersectionObserverInit; // IntersectionObserver相关的配置 } 我们约定整体的曝光量大于等于 0.5，即为有效曝光。同时，我们这里暂不考虑该 api 的兼容性，若需要兼容的话，可以安装对应的 polyfill 版。 2.1 函数的实现方式 # 用函数的方式来实现时，需要业务侧传入真实的 dom 元素，我们才能监听。// 一个函数只监听一个dom元素 // 当需要监听多个元素，可以循环调用exposeListener const exposeListener = (target: HTMLElement, options?: ComExposeProps) => { // IntersectionObserver相关的配置 const observerOptions = options?.observerOptions || { threshold: [0, 0.5, 1], }; const intersectionCallback = (entries: IntersectionObserverEntry[]) => { const [entry] = entries; if (entry.isIntersecting) { if (entry.intersectionRatio >= observerOptions.threshold[1]) { if (target.expose !== 'expose') { options?.onExpose?.(target); } target.expose = 'expose'; if (!options?.always && typeof options?.onHide !== 'function') { // 当always属性为加，且没有onHide方式时 // 则在执行一次曝光后，移动监听 io.unobserve(target); } } } else if (typeof options?.onHide === 'function' && target.expose === 'expose') { options.onHide(target); target.expose = undefined; if (!options?.always) { io.unobserve(target); } } }; const io = new IntersectionObserver(intersectionCallback, observerOptions); io.observe(target); }; 调用起来也非常方便：exposeListener(document.querySelector('.dom1'), { always: true, // 监听的回调永远有效 onExpose() { console.log('dom1 expose', Date.now()); }, onHide() { console.log('dom1 hide', Date.now()); }, }); // 没有always时，所有的回调都只执行一次 exposeListener(document.querySelector('.dom2'), { // always: true, onExpose() { console.log('dom2 expose', Date.now()); }, onHide() { console.log('dom2 hide', Date.now()); }, }); // 重新设置IntersectionObserver的配置 exposeListener(document.querySelector('.dom3'), { observerOptions: { threshold: [0, 0.2, 1], }, onExpose() { console.log('dom1 expose', Date.now()); }, }); 那么组件的曝光数据，就可以在onExpose()的回调方式里进行上报。不过我们可以看到，这里面有很多标记，需要我们处理，单纯的一个函数不太方便处理；而且也没对外暴露出取消监听的 api，导致我们想在卸载组件前也不方便取消监听。因此我们可以用一个 class 类来实现。 2.2 类的实现方式 # 类的实现方式，我们可以把很多标记放在属性里。核心部分跟上面的差不多。class ComExpose { target = null; options = null; io = null; exposed = false; constructor(dom, options) { this.target = dom; this.options = options; this.observe(); } observe(options) { this.unobserve(); const config = { ...this.options, ...options }; // IntersectionObserver相关的配置 const observerOptions = config?.observerOptions || { threshold: [0, 0.5, 1], }; const intersectionCallback = (entries) => { const [entry] = entries; if (entry.isIntersecting) { if (entry.intersectionRatio >= observerOptions.threshold[1]) { if (!config?.always && typeof config?.onHide !== 'function') { io.unobserve(this.target); } if (!this.exposed) { config?.onExpose?.(this.target); } this.exposed = true; } } else if (typeof config?.onHide === 'function' && this.exposed) { config.onHide(this.target); this.exposed = false; if (!config?.always) { io.unobserve(this.target); } } }; const io = new IntersectionObserver(intersectionCallback, observerOptions); io.observe(this.target); this.io = io; } unobserve() { this.io?.unobserve(this.target); } } 调用的方式：// 初始化时自动添加监听 const instance = new ComExpose(document.querySelector('.dom1'), { always: true, onExpose() { console.log('dom1 expose'); }, onHide() { console.log('dom1 hide'); }, }); // 取消监听 instance.unobserve(); 不过这种类的实现方式，在 react 中使用起来也不太方便： 首先要通过useRef()获取到 dom 元素； 组件卸载时，要主动取消对 dom 元素的监听； 2.3 react 中的组件嵌套的实现方式 # 我们可以利用 react 中的useEffect()hook，能很方便地在卸载组件前，取消对 dom 元素的监听。import React, { useEffect, useRef, useState } from 'react'; interface ComExposeProps { children: any; readonly always?: boolean; // 是否一直有效 // 曝光时的回调，若不存在always，则只执行一次 onExpose?: (dom: HTMLElement) => void; // 曝光后又隐藏的回调，若不存在always，则只执行一次 onHide?: (dom: HTMLElement) => void; observerOptions?: IntersectionObserverInit; // IntersectionObserver相关的配置 } /** * 监听元素的曝光 * @param {ComExposeProps} props 要监听的元素和回调 * @returns {JSX.Element} */ const ComExpose = (props: ComExposeProps): JSX.Element => { const ref = useRef(null); const curExpose = useRef(false); useEffect(() => { if (ref.current) { const target = ref.current; const observerOptions = props?.observerOptions || { threshold: [0, 0.5, 1], }; const intersectionCallback = (entries: IntersectionObserverEntry[]) => { const [entry] = entries; if (entry.isIntersecting) { if (entry.intersectionRatio >= observerOptions.threshold[1]) { if (!curExpose.current) { props?.onExpose?.(target); } curExpose.current = true; if (!props?.always && typeof props?.onHide !== 'function') { // 当always属性为加，且没有onHide方式时 // 则在执行一次曝光后，移动监听 io.unobserve(target); } } } else if (typeof props?.onHide === 'function' && curExpose.current) { props.onHide(target); curExpose.current = false; if (!props?.always) { io.unobserve(target); } } }; const io = new IntersectionObserver(intersectionCallback, observerOptions); io.observe(target); return () => io.unobserve(target); // 组件被卸载时，先取消监听 } }, [ref]); // 当组件的个数大于等于2，或组件使用fragment标签包裹时 // 则创建一个新的div用来挂在ref属性 if (React.Children.count(props.children) >= 2 || props.children.type.toString() === 'Symbol(react.fragment)') { return {props.children}; } // 为该组件挂在ref属性 return React.cloneElement(props.children, { ref }); }; export default ComExpose; 调用起来更加方便了，而且还不用手动获取 dom 元素和卸载监听： console.log('expose')} onHide={() => console.log('hide')}> dom1 always Vue 组件实现起来的方式也差不多，不过我 Vue 用的确实比较少，这里就不放 Vue 的实现方式了。 3. 总结 # 现在我们已经基本实现了关于组件的曝光的监听方式，整篇文章的核心全部都在IntersectionObserver上。基于上面的实现方式，我们其实还可以继续扩展，比如在组件即将曝光时踩初始化组件；页面中的倒计时只有在可见时才执行，不可见时则直接停掉等等。IntersectionObserver 还等着我们探索出更多的用法！