CodeSky 代码之空

之前本来在 12 月就应该写这一篇文章的，大致是同事需要做 SDK 开发，我要求必须要有对应测试，但对于怎么去设计测试比较迷茫，本来早在 19 年就写过一篇如何构造一些有意义的测试，但从某种角度来说这更偏后端一些，对于前端的测试来说有一些不同。 然后被裁了，本来不想写了，但之前帮做模拟面试以及被面试时其实都有提到一些内容，所以这里简单谈下我对前端测试的一些看法。 新读者注意：本人屁话较多，不喜勿喷，上角点叉。（我好脆弱啊哥哥.jpg）

什么时候我们需要测试

如果你的回答是：「当然是什么时候都需要测试」——那么恭喜你，你还没有接受过现实排期和业务的毒打（这里指的是国内互联网的情况）。

在过去的几个月里，除了写后端接口以外，大部分时间都在搞一些前端基础建设、技术方案的确立和整个链路的监控告警体系的搭配，而在整条链路中，SSR 起到了比重很大的一环。

有许许多多的文章都致力于教大家：怎么样去做一个 SSR 的 demo（包括一些库的文档），而作为系统的一环，除了怎么开发外，有许多更现实的问题等着我们去解决，而本文就以我们遇到的一些问题来抛砖引玉。

曝光埋点，顾名思义，是当元素出现在视口范围内上报的埋点。

这里有两个要点：

• 在视口范围内
• 元素可见

这两个内容决定了一个元素是否被曝光。

从使用的角度去看，这可能是个老生常谈的问题，就连 TypeScript 官方文档都会给你一个个介绍：

Interfaces vs Types in TypeScript

Documentation - Everyday Types

Learn about difference between Type & Interface in Typescript

具体来说（翻译成中文来说）：

好久没更新博客了拿着很久之前记的笔记凑个更新吧。

package.json | npm Docs

package.json，一个前端项目的归属——万万没想到的是，它有很多学问，因此现在我们就来完整的盘点一下。

本文根据演讲 PPT 口胡输出而成，如有雷同纯属巧合。

开篇，我们先来引入一个问题：什么是前端工程化。

对于我来说，前端工程化大致分为下面的几个内容：

• 代码规范化：eslint
• 流程规范化：git flow / Code Review
• 测试规范化：写不写，怎么写
• 组件与模块：项目与模块治理
• 基础设施：CI / CD
• ……

Notification API 只能在 HTTPS 中使用：Using the Notifications API

This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

但是在开发某游戏网站脚本的时候，虽然它用的是 HTTP，但是仍然想用 Notificition 做一下提醒功能，当然，可以降级成过去 800 年的闪 Title 策略：

1let shaking = false
2setInterval(() => {
3    if (shaking) document.title = `[Notification] ${word}!!`
4    else document.title = word
5    shaking = !shaking
6}, 200)
7

但是实测效果还是不够显眼，最终在和群友的交流之后，发现了 chrome://flags/ 。

Insecure origins treated as secure 中填写需要开启 Notification API 的域名，重启浏览器，就可以在 HTTP 中使用 Notification API 了。

之前有一个奋斗了 N 小时才搞定的问题，在 Nestjs 的单元测试中反复测试会报类似于：

Starting Nest throws following error: Nest can't resolve dependencies of the EventResolver (EventService, ?). Please make sure that the argument at index [1] is available in the EventModule context.

Nest throws an error about a circular dependency that doesn't exist. Here is the error thrown:
Nest cannot create the module instance. Often, this is because of a circular dependency between modules. Use forwardRef() to avoid it. (Read more https://docs.nestjs.com/fundamentals/circular-dependency.) Scope [RootModule -> XXXModule]

这次有一个需要关闭页面的需求，于是自然而然想到了经久不衰的 window.open 兄弟款：window.close。在 MDN 中，对于 window.close 的描述也相当简单：window.close

然而我们需要注意的是下面这句话：

Firefox 35.0.1：脚本不能关闭不是他打开的窗口

关于 WebSocket，在四年前做实验室习题时第一次接触，当时基本上没怎么介绍 WebSocket，只贴了一份链接，而恰巧这次做了一些 WebSocket 上的工作，所以会从头开始介绍一下 WebSocket。

WebSocket 的原理

在 WebSocket 以前，Web 工作人员已经探索过好多种方法了，由于我没有生在那个时代，所以除了 ajax 轮询之外的方法，我完全都没有记住，不过 WebSocket 确实是站在了巨人的肩膀上，终于成为了一套事实方案，而其维护成本和原理也比 TCP 的 socket 链接要简单不少。