写代码的海怪_社区达人页

2022年05月

• 05.09 02:27:14
  发表了文章 2022-05-09 02:27:14

  造一个 supertest 轮子

  supertest 是一个短小精悍的接口测试工具，比如一个登录接口的测试用例如下：整个用例感观上非常简洁易懂。这个库挺小的，设计也不错，还是 TJ Holowaychuk 写的！今天就带大家一起实现一个 supertest 的轮子吧，做一个测试框架！

  
• 05.09 02:15:00
  发表了文章 2022-05-09 02:15:00

  造一个 redux-thunk 轮子

  很多分析 redux-thunk 源码的文章一般会说：如果 action 是函数的话就传入 dispatch，在 action 函数里面使用 dispatch，如果action 不是函数的话就正常 dispatch(action)。不过，我觉得这是从结果出发找造这个轮子的原因，并不能从需求层面解释这个中间件到底解决了什么问题。 本文希望从解决问题的角度来推导 redux-thunk 诞生的原因。

  
• 05.09 01:51:06
  发表了文章 2022-05-09 01:51:06

  造一个 react-contenteditable 轮子

  需求很简单，在输入框里添加按钮就好了。这种功能一般用于邮件群发，这里的按钮“姓名”其实就是一个变量，后端应该要自动填充真实用户的姓名，然后再把邮件发给用户的。这个需求第一感觉像是 textarea 里加入一个 button，但是想想又不对：textarea 里加不了 button。那用 div 包裹呢？也不对：div 不能输入啊，唉，谁说不能输入的？contentEditable 属性就是可以让用户手动输入的。 下面就带大家手写一个 react-contenteditable 的轮子吧。

  
• 05.09 01:34:54
  发表了文章 2022-05-09 01:34:54

  造一个 react-infinite-scroller 轮子

  无限滚动是一个开发时经常遇到的问题，比如 ant-design 的 List 组件里就推荐使用 react-infinite-scroller 配合 List 组件一起使用。假如我们想自己实现无限滚动，难免要去查 scroll 事件，还要搞清 offsetHeight, scrollHeight, pageX 这些奇奇怪怪变量之间的关系，真让人脑袋大。今天就带大家造一个 reac-infinite-scroller 的轮子吧。

  
• 05.09 01:18:21
  发表了文章 2022-05-09 01:18:21

  Vim 真的那么难吗？

  如果玩过知乎都会被那些大 V 洗脑说 Vim 好用，Vim 牛逼，也是因为这个原因才开始用 Vim 的，也想着总有一天会变成 Vim 高级玩家。 那这篇文章会教你怎么用 Vim 么？会，但是我不想像官方手册去说，只想提供一个学习 Vim 的学习方法和基本的指令。我更希望这篇文章做到的是 “授人以渔”。我不想写这种像 Vim 官方手册那种文章，因为复制粘贴所有指令过来，你也不会记多少的，更不会记住。

  
• 05.09 01:06:00
  发表了文章 2022-05-09 01:06:00

  造一个 copy-to-clipboard 轮子

  用 JS 来复制文本在网页应用里十分常见，比如 github 里复制 remote 地址的功能：今天就来带大家一起写一个 JS 复制文本的轮子吧~

  
• 05.09 00:57:18
  发表了文章 2022-05-09 00:57:18

  造一个 promise-poller 轮子

  轮询，一个前端非常常见的操作，然而对于很多人来说第一反应竟然还是用 setInterval 来实现， setInterval 作为轮询是不稳定的。下面就带大家一起写一个 promise-poller 的轮子吧。

  
• 05.09 00:47:11
  发表了文章 2022-05-09 00:47:11

  造一个 js-cookie 轮子

  Cookie 相信大家都不陌生，但是很多时候我们都是这样：“啊，我这个地方要用 Cookie 了，怎么办？没事，装一个 npm 包嘛”，或者去 MDN 去抄一两个函数。没什么机会手写一个 js-cookie 的库，今天就带大家一起来写一个 js-cookie 的小库。

  
• 05.09 00:23:35
  发表了文章 2022-05-09 00:23:35

  redux 文档到底说了什么（下）

  上一篇文章主要介绍了 redux 文档里所用到的基本优化方案，但是很多都是手工实现的，不够自动化。这篇文章主要讲的是怎么用 redux-toolkit 组织 redux 代码。
• 05.09 00:05:42
  发表了文章 2022-05-09 00:05:42

  redux 文档到底说了什么（上）

  最近又认真重读了一遍 redux 的文档，不出意料，还是一样的晦涩难懂。 虽然文档写得不怎么样，但是里面确实给了很多比较好的代码组织方式，推荐了很多很有用的工具和插件，也慢慢地理解为什么这么简单的一个状态中心可以搞出这么多概念和库。 redux 文档除了一些概念的介绍，主要包含了 1. 怎么只用 redux 这个库来组织 redux 代码 2. 怎么用 redux-toolkit 的 API 更智能地组织 redux 代码 这篇文章通过一步步的代码优化来呈现 redux 的最佳写法。

  
• 05.08 23:45:17
  发表了文章 2022-05-08 23:45:17

  为了解析后端数据，我竟然写了个递归？

  经的我特别讨厌 LeetCode 算法题，当时就觉得写项目好玩，算法没什么用。不喜欢归不喜欢，为了面试，还是写了 476 道题 = =。非常感激默默地刷题的那段时光，在处理数据方面确实给了我不一样的思路。算法和数据结构果然还是基本功呀。

  
• 05.08 12:43:46
  发表了文章 2022-05-08 12:43:46

  有趣的 contentEditable

  以前在知乎看到一篇关于《一行代理可以做什么？》的回答： 当时试了一下确实很好玩，于是每次都可以在妹子面前秀一波操作，在他们惊叹的目光中，我心里开心地笑了——嗯，又让一个不懂技术的人发现到了程序的美🐶，咳咳。 一直以来，我都觉得这个属性只是为了存在而存在的，然而在今天接到的需求之后，我发现这个感觉没什么用的属性竟然完美地解决了我的需求。

  
• 05.08 11:06:58
  发表了文章 2022-05-08 11:06:58

  造一个 idb-keyval 轮子

  相信不少人看过阮一峰的 《浏览器数据库 IndexedDB 入门教程》。我自己的感觉是依然不会使用 indexedDB，感觉每一步操作都很简单但是就是不会把整个流程跑通。 正好最近用到了 idb-keyval 这个库，阅读了一下源码后终于是有点感觉了。下来就从一个简单的例子开始，一步步来造一个 idb-keyval 库吧。

  
• 05.08 10:48:12
  发表了文章 2022-05-08 10:48:12

  造一个 react-error-boundary 轮子

  朋友们好啊，我是海怪，刚才老板对我说：海怪，发生甚么事了，怎么页面白屏了？我说：怎么回事？给我发了几张截图。我打开控制台一看：哦！原来是昨天，有个后端年轻人，说要和我联调接口，我说：可以。然后，我说：小兄弟，你的数据尽量按我需要的格式来：踏不服气，他说你这个没用，我说我这个有用，这是规范，传统前后端联调返回数据是要讲规范的，对项目质量的提高可以起到四两拨千斤的作用。100多万行代码的系统，只要有了类型规范，都不会轻易崩溃。他说试试，我说行。 我请求刚发出去，他的数据，啪！的一下就返回了！很快啊！！

  
• 05.08 10:00:57
  发表了文章 2022-05-08 10:00:57

  守望先锋 UI 库

  去年 12 月玩守望等匹配的时候就无聊萌生出做一套守望 UI 的想法，因为觉得守望的 UI 比较简洁，而且对于那些小组件的实现都有个大概的思路。当时 Hey UI 的作者也在知乎上宣传自己的 UI 库，所以更加坚定了做这个 UI 库的想法。 调研了之后还真发现已经有人用 React 写了 4 个守望的组件了。

  
• 05.08 09:48:36
  发表了文章 2022-05-08 09:48:36

  抄了个在线吉他谱编辑器

  这个项目其实是去年期末考复习的时候写的，因为实在不想复习所以无聊参照 有谱么 用 React 写的一个在线吉他谱编辑器。我还将项目里的和弦组件和歌词组件提取出来放在 npm 上。当时就觉得这个网站很不错，玩过吉他的人都知道每次搜吉他谱的时候总会出现谱子要么是 JPG，要么是 PNG，字体大小不样的问题。虽然问题不是很大，但是就是很难看，而这个网站完美解决了这个问题。

  
• 05.08 09:40:08
  发表了文章 2022-05-08 09:40:08

  嘿，我造了个代码高亮的插件

  写这个插件的初衷是因为 Medium 总是不高亮作者的代码。当然也有人用 Codepen, CodeSandbox 或者 Gist 来嵌入代码。 但是这样实在麻烦，有些人（比如我）就很不想为了几句代码而创建一个 Gist 文件，然后直接用 Medium 提供的代码块。所以我经常看到这样的代码块 为了解决这个问题，我就写了这个插件来高亮 Medium 里的代码块，后面还意外发现简书，知乎，StackOverflow 等网站都能高亮，嘻嘻！

  
• 05.08 00:30:39
  发表了文章 2022-05-08 00:30:39

  用 Peer.js 愉快上手 P2P 通信

  哈喽，大家好，我是海怪。 最近公司项目需要用到视频流的技术，所以就研究了一下 WebRTC，正好看到 Peer.js 这个框架，用它做了一个小 Demo，今天就跟大家做个简单的分享吧。

  
• 05.07 23:31:32
  发表了文章 2022-05-07 23:31:32

  爷青回！用 Audio API 实现一个千千静听

  哈喽，大家好，我是海怪。 最近看了一下钟文泽的 Macbook Pro 测评视频（唉，最近又想买电子产品了），他在测评音响的时候，点播了一首蔡琴的《渡口》。当听到这首歌的时候，我真的是情不自禁地感叹： “爷青回！！”，想当年，第一次听这首歌的时候还是在 Windows XP 系统上的 千千静听 这个播放器里听到的，那时印象最深刻的就是里面的 音频可视化（频谱图） 了。当我在发呆、无聊的时候，音频频谱图里的小浮块总能让我盯上一整天。而如今，在各大音乐软件中已很少看到这样的频谱图了。那今天就跟大家一起用原生的 Audio API 来实现这个频谱图吧。

  
• 05.07 16:11:16
  发表了文章 2022-05-07 16:11:16

  来聊聊我们为什么要写单测

  哈喽，大家好，我是海怪。 最近在组里我又领了一个新任务：前端单元测试。 关于这个话题在很早的时候就想和大家聊了，奈何一直没机会。对于我个人来说，我是非常喜欢写单测的。最近还买了本《软件测试》的书，算是再次复习一下大学时学过的专业课，平时在捣鼓一些个人项目的时候也会做一些基础的单测。

  
• 05.07 15:42:05
  发表了文章 2022-05-07 15:42:05

  如何用 WebRTC 给自己拍照？

  哈喽，大家好，我是海怪。 最近一直在看 WebRTC 的用法，也学了一下音视频流的东西，今天就跟大家分享一个好玩的小实战吧——给自己拍照。

  
• 05.07 15:03:38
  发表了文章 2022-05-07 15:03:38

  用JS轻松实现一个录音、录像、录屏的工具库

  哈喽，大家好，我是海怪。 最近项目遇到一个要在网页上录音的需求，在一波搜索后，发现了 react-media-recorder 这个库。今天就跟大家一起研究一下这个库的源码吧，从 0 到 1 来实现一个 React 的录音、录像和录屏的功能。