- 博客(28)
- 收藏
- 关注
RSS订阅
1原创 美式霸凌，但是前端框架
前端霸凌React：你知道嘛，这地方不收辣鸡 👎Vue：也不欢迎你~ 🫤React：现在听好了 jQuery，我和 Vue 这周要举办一个超 dio 的派对。所有前端框架都会出席，但你猜，谁会收不到邀请？Vue：你~~~~~React：麻溜回家吧 jQuery，不然就留下来替我重构 💩 山。Vue：哈，React 你吓到他了 🫣 哈哈哈React：诶~~ 气死你~Angular：嘿 jQuery，谁邀请你这个过气框架来的？Angu...
2022-06-24 21:07:20
321
原创 前端测试一共有哪几种？
前言哈喽，大家好，我是海怪。最近有不少朋友找到我聊了聊测试相关的内容，发现他们对测试的分类有些迷茫。实际上测试一共就 3 种：E2E，集成，单测，其它的功能测试、UI 测试、界面测试只是它们中里面的一种。Kent C. Dodds在这篇文章 《Static vs Unit vs Integration vs E2E Testing for Frontend Apps》也聊到了这 3 种测试的对比和区别，除此之外，还聊到它们各自的适用场景，应该对还在迷茫中的同学有所帮助。所以今天把这篇文章分享给大家
2022-04-29 13:19:39
917
原创 测试代码怎么做抽象才是有意义的？
前言哈喽，大家好，我是海怪。不知道大家在写前端单测的时候，是否有出现测试代码和测试数据重复冗余的情况？然后不得不写一些函数和类来封装他们的。然而，慢慢地会发现：过度的封装会致使你的测试用例变得越来越难读。那到底在写测试代码时，怎样的封装才是好的封装呢？今天就把 Kent 的这篇 《AHA Testing》 分享给大家~正片开始“AHA 编码原则” 指的是 “避免过度的抽象”（Avoid Hasty Abstraction）。我对这如何适用于编写可维护的测试有不一样的感觉。因为我见过太多人写的测试
2022-04-15 13:55:21
173
原创 使用 React Testing LIbrary 的 15 个常见错误
前言哈喽，大家好，我是海怪。刚开始我在写项目的单测方案的时候，老板就让我能够写一些单测的规范。虽然表面上我非常自然地说：没问题，但是心里还是慌得不行：以前我自己写单测也没啥规范呀，直接开干就好了。最近一直在看 Kent 的文章，刚好看到他写的这篇 《Common mistakes with React Testing Library》，里面列举了很多别人写单测时经常犯的一些错误 。正好可以作为单测规范的参考。所以，今天就把这篇文章也分享给大家~翻译中会尽量用更地道的语言，这也意味着会给原文加一层
2022-04-02 14:42:53
12222
原创 前端单测为什么不要测代码实现细节？
前言哈喽，大家好，我是海怪。相信不少同学在写单测的时候，最大的困扰不是如何写测试代码，而是：“应该测什么？”，“要测多深入”，“哪些不该测”。最近在给 React 组件写单测的时候，发现了 Kent （React Testing Library 的贡献者之一）的 《Testing Implementation Details》 这篇文章，里面对 “为什么不要测代码实现细节？” 这个问题写得非常好，今天就把这篇文章也分享给大家。翻译中会尽量用更地道的语言，这也意味着会给原文加一层 Buf，想看原文的
2022-03-26 10:47:41
1261
原创 用 WebRTC 给自己拍张照
前言哈喽，大家好，我是海怪。最近一直在看 WebRTC 的用法，也学了一下音视频流的东西，今天就跟大家分享一个好玩的小实战吧——给自己拍照。项目已上传至 Github，Repo地址：https://github.com/haixiangyan/webrtc-take-photo页面结构首先，我们要拆分一下实现步骤：打开摄像头，获取视频流需要一个 <video> 来播放摄像头的画面点击按钮，生成画面，并展示在 <img> 里因此，我们需要 <vide
2022-02-26 13:55:26
1403
原创 一个经常被忽略的 single-spa 微前端实践
前言大家好，我是海怪。了解过微前端的同学应该对 single-spa 这个框架都不陌生，但是我翻看了中文整个社区，发现太少文章是讲 single-spa Demo 实践的。还有一些文章讲了，但是都是以晒代码为主，只讲是什么，不讲为什么。这对读者来说并不是一个很好的体验。那今天就跟大家深入分析一下 single-spa 的 React 版 Demo 吧。让读者知其然，也能知其所然。简介其实 single-spa 的官网上就写了非常多的 Demo 示例：大家只关注 Actively maintain
2022-01-14 10:01:10
643
原创 造一个 idb-keyval 轮子
文章源码：https://github.com/Haixiang6123/my-idb-keyval预览链接：http://yanhaixiang.com/my-idb-keyval/参考轮子：https://github.com/jakearchibald/idb-keyval你真的会使用 indexdb 么相信不少人看过阮一峰的 《浏览器数据库 IndexedDB 入门教程》。我自己的感觉是依然不会使用 indexedDB，感觉每一步操作都很简单但是就是不会把整个流程跑通。正好最近用到了 .
2021-07-19 17:39:34
281
原创 造一个 react-error-boundary 轮子
以下所有代码都已整理到 Github：https://github.com/Haixiang6123/learn-error-bounday参考的轮子：https://www.npmjs.com/package/react-error-boundary发生甚么事了朋友们好啊，我是海怪，刚才老板对我说：海怪，发生甚么事了，怎么页面白屏了？我说：怎么回事？给我发了几张截图。我打开控制台一看：哦！原来是昨天，有个后端年轻人，说要和我联调接口，我说：可以。然后，我说：小兄弟，你的数据尽量按我需要的格.
2021-07-18 16:18:12
183
原创 redux 文档到底说了什么（下）
完整代码请看这里上一篇文章主要介绍了 redux 文档里所用到的基本优化方案，但是很多都是手工实现的，不够自动化。这篇文章主要讲的是怎么用 redux-toolkit 组织 redux 代码。先来回顾一下，我们所用到除 JS 之外的有：react-reduxProvider 组件useSelectoruseDispatch’reduxcreateStorecombineReducersapplyMiddlewareredux-thunk最终得到的代码大概如下（因为.
2021-03-22 00:59:29
243
原创 redux 文档到底说了什么（上）
前言最近又认真重读了一遍 redux 的文档，不出意料，还是一样的晦涩难懂。虽然文档写得不怎么样，但是里面确实给了很多比较好的代码组织方式，推荐了很多很有用的工具和插件，也慢慢地理解为什么这么简单的一个状态中心可以搞出这么多概念和库。redux 文档除了一些概念的介绍，主要包含了怎么只用 redux 这个库来组织 redux 代码怎么用 redux-toolkit 的 API 更智能地组织 redux 代码redux 文档之所以难以看懂是因为它不按线性的思维来写，很多时候突然就冒出一个概念或
2021-03-22 00:58:58
186
原创 为了解析后端数据，我竟然写了个递归？
代码仓库：https://github.com/Haixiang6123/tree-parser代理均经过单元测试曾经的我特别讨厌 LeetCode 算法题，当时就觉得写项目好玩，算法没什么用。不喜欢归不喜欢，为了面试，还是写了 476 道题 = =。非常感激默默地刷题的那段时光，在处理数据方面确实给了我不一样的思路。算法和数据结构果然还是基本功呀。需求我接到的需求很简单：后端返回一个 JSON，页面展示多个下拉选择器，根据用户不同的选择筛选不同的数据。例如：而后端给我们的数据是这样的：c.
2021-03-22 00:57:50
88
原创 有趣的 contentEditable
以前在知乎看到一篇关于《一行代理可以做什么？》的回答：当时试了一下确实很好玩，于是每次都可以在妹子面前秀一波操作，在他们惊叹的目光中，我心里开心地笑了——嗯，又让一个不懂技术的人发现到了程序的美????，咳咳。一直以来，我都觉得这个属性只是为了存在而存在的，然而在今天接到的需求之后，我发现这个感觉没什么用的属性竟然完美地解决了我的需求。需求需求很简单，在输入框里添加按钮就好了。这种功能一般用于邮件群发，这里的按钮“姓名”其实就是一个变量，后端应该要自动填充真实用户的姓名，然后再把邮件发给用户的。
2021-03-22 00:57:19
198
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人