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

2022年05月

• 05.11 18:00:39
  发表了文章 2022-05-11 18:00:39

  使用 React Testing Library 的 15 个常见错误（下）

  哈喽，大家好，我是海怪。 刚开始我在写项目的单测方案的时候，老板就让我能够写一些单测的规范。虽然表面上我非常自然地说：没问题，但是心里还是慌得不行：以前我自己写单测也没啥规范呀，直接开干就好了。 最近一直在看 Kent 的文章，刚好看到他写的这篇 《Common mistakes with React Testing Library》，里面列举了很多别人写单测时经常犯的一些错误 。正好可以作为单测规范的参考。所以，今天就把这篇文章也分享给大家~

  
• 05.11 17:57:34
  发表了文章 2022-05-11 17:57:34

  使用 React Testing Library 的 15 个常见错误（上）

  哈喽，大家好，我是海怪。 刚开始我在写项目的单测方案的时候，老板就让我能够写一些单测的规范。虽然表面上我非常自然地说：没问题，但是心里还是慌得不行：以前我自己写单测也没啥规范呀，直接开干就好了。 最近一直在看 Kent 的文章，刚好看到他写的这篇 《Common mistakes with React Testing Library》，里面列举了很多别人写单测时经常犯的一些错误 。正好可以作为单测规范的参考。所以，今天就把这篇文章也分享给大家~

  
• 05.11 17:48:51
  发表了文章 2022-05-11 17:48:51

  微前端x重构实践落地总结（下）

  大家好，我是海怪。最近换到了新部门，在做智能平台相关的内容。我接到的第一个任务就是把以前前端的项目重构一次。 说是重构，不如说是重写一遍。因为原来的项目是 ant-design-vue + vue 全家桶，要切换成 ant-design + ant-design-pro + react 全家桶。 更让人头疼的是，产品经理并不会让我们有大把大把时间专门搞重构，我们要边重构边做需求。在这样的挑战下，我想到了微前端解决方案，下面就跟大家分享这次 微前端在重构上的落地实践吧。

  
• 05.11 17:46:14
  发表了文章 2022-05-11 17:46:14

  微前端x重构实践落地总结（上）

  大家好，我是海怪。最近换到了新部门，在做智能平台相关的内容。我接到的第一个任务就是把以前前端的项目重构一次。 说是重构，不如说是重写一遍。因为原来的项目是 ant-design-vue + vue 全家桶，要切换成 ant-design + ant-design-pro + react 全家桶。 更让人头疼的是，产品经理并不会让我们有大把大把时间专门搞重构，我们要边重构边做需求。在这样的挑战下，我想到了微前端解决方案，下面就跟大家分享这次 微前端在重构上的落地实践吧。

  
• 05.11 17:00:19
  发表了文章 2022-05-11 17:00:19

  【微前端】single-spa 到底是个什么鬼（下）

  说起微前端框架，很多人第一反应就是 single-spa。但是再问深入一点：它是干嘛的，它有什么用，可能就回答不出来了。 一方面没多少人研究和使用微前端。可能还没来得及用微前端扩展项目，公司就已经倒闭了。 另一方面是中文博客对微前端的研究少之又少，很多文章只是简单翻译一下官方文档，读几个API，放个官方的 Demo 就完事了。很少有深入研究到底 single-spa 是怎么一回事的。这篇文章将不会聊怎么搭建一个 Demo，而是会从 “Why” 和 “How” 的角度来聊一下官方文档的都讲了哪些内容，相信看完这篇文章就能看懂 官方的 Demo 了。

  
• 05.11 16:55:08
  发表了文章 2022-05-11 16:55:08

  【微前端】single-spa 到底是个什么鬼（上）

  说起微前端框架，很多人第一反应就是 single-spa。但是再问深入一点：它是干嘛的，它有什么用，可能就回答不出来了。 一方面没多少人研究和使用微前端。可能还没来得及用微前端扩展项目，公司就已经倒闭了。 另一方面是中文博客对微前端的研究少之又少，很多文章只是简单翻译一下官方文档，读几个API，放个官方的 Demo 就完事了。很少有深入研究到底 single-spa 是怎么一回事的。这篇文章将不会聊怎么搭建一个 Demo，而是会从 “Why” 和 “How” 的角度来聊一下官方文档的都讲了哪些内容，相信看完这篇文章就能看懂 官方的 Demo 了。

  
• 05.11 16:39:21
  发表了文章 2022-05-11 16:39:21

  以前我没得选，现在只想用 Array.reduce（下）

  第一眼看 Array.reduce 这个函数总感觉怪怪的，用法也得花几分种才弄懂，懂了之后也不知道应用场景是啥。最近写项目的时候才慢慢对这个函数有更多的理解，可以算是 Array 类型下最强大的函数之一了。

  
• 05.11 16:37:44
  发表了文章 2022-05-11 16:37:44

  以前我没得选，现在只想用 Array.reduce（上）

  第一眼看 Array.reduce 这个函数总感觉怪怪的，用法也得花几分种才弄懂，懂了之后也不知道应用场景是啥。最近写项目的时候才慢慢对这个函数有更多的理解，可以算是 Array 类型下最强大的函数之一了。

  
• 05.11 16:21:09
  发表了文章 2022-05-11 16:21:09

  造一个 redux 轮子（下）

  Redux 应该是很多前端新手的噩梦。还记得我刚接触 Redux 的时候也是刚从 Vue 转过来的时候，觉得Redux 概念非常多，想写一个 Hello World 都难。文档也是很难看懂，并不是看不懂英文，而是看的时候总会想：TMD在说泥🐴呢。看得出文档想手把手把新手教好，结果却是适得而反，啰嗦的排版和系统性地阐述让新手越来越蒙逼。文档还有一步令人窒息的操作：把 redux、react-redux、redux-toolkit 三个库放在一起来讲。靠，你的标题叫 redux 文档啊，就讲 Redux 不就行了嘛？搞得新手总会觉得 Redux 就是像 Vuex 一样为 React 量身订做的。

  
• 05.11 16:15:35
  发表了文章 2022-05-11 16:15:35

  造一个 redux 轮子（上）

  Redux 应该是很多前端新手的噩梦。还记得我刚接触 Redux 的时候也是刚从 Vue 转过来的时候，觉得Redux 概念非常多，想写一个 Hello World 都难。文档也是很难看懂，并不是看不懂英文，而是看的时候总会想：TMD在说泥🐴呢。看得出文档想手把手把新手教好，结果却是适得而反，啰嗦的排版和系统性地阐述让新手越来越蒙逼。文档还有一步令人窒息的操作：把 redux、react-redux、redux-toolkit 三个库放在一起来讲。靠，你的标题叫 redux 文档啊，就讲 Redux 不就行了嘛？搞得新手总会觉得 Redux 就是像 Vuex 一样为 React 量身订做的。

  
• 05.10 14:59:27
  发表了文章 2022-05-10 14:59:27

  TDD 的原理和使用场景

  文章里主要讲了 3 种使用 TDD 的场景：修 Bug 时，写纯函数时，以及设计 UI 时。我感觉在写纯函数（数据转换），以及写接口时（Node 端开发）时用的比较多，修 Bug 嘛，实际情况都是业务 Bug，要用测试复现是比较麻烦的。设计 UI 前写测试也是比较麻烦的。总之，大家应该都会有自己使用 TDD 的场景，找到适合自己的就好。需要注意的是，千万别提前做优化，特别是你还不确定你的项目要发展到什么程度时。

  
• 05.10 14:54:33
  发表了文章 2022-05-10 14:54:33

  前端测试一共有哪几种？

  哈喽，大家好，我是海怪。 最近有不少朋友找到我聊了聊测试相关的内容，发现他们对测试的分类有些迷茫。实际上测试一共就 3 种：E2E，集成，单测，其它的功能测试、UI 测试、界面测试只是它们中里面的一种。 Kent C. Dodds 在这篇文章 《Static vs Unit vs Integration vs E2E Testing for Frontend Apps》 也聊到了这 3 种测试的对比和区别，除此之外，还聊到它们各自的适用场景，应该对还在迷茫中的同学有所帮助。所以今天把这篇文章分享给大家~

  
• 05.10 14:49:40
  发表了文章 2022-05-10 14:49:40

  如何测自定义的 React Hooks？

  哈喽，大家好，我是海怪。 最近把项目里的 utils 以及 components 里的东西都测完了，算是完成了这次单测引入的第一个里程碑了。之后，我又把目光放到了 hooks 的文件夹上面，因为这些自定义 Hooks 一般都当工具包来使用，所以给它们上一上单测还是很有必要的。 正好我在 Kent C. Dodds 的博客里也发现了这篇 《How to test custom React hooks》，里面正好提到了如何高效地对自定义 Hooks 进行测试。今天就把这篇文章也分享给大家吧。

  
• 05.10 14:45:15
  发表了文章 2022-05-10 14:45:15

  前端测试代码怎么做抽象？

  哈喽，大家好，我是海怪。 不知道大家在写前端单测的时候，是否有出现测试代码和测试数据重复冗余的情况？然后不得不写一些函数和类来封装他们的。然而，慢慢地会发现：过度的封装会致使你的测试用例变得越来越难读。 那到底在写测试代码时，怎样的封装才是好的封装呢？今天就把 Kent 的这篇 《AHA Testing》 分享给大家~

  
• 05.10 14:40:51
  发表了文章 2022-05-10 14:40:51

  前端单测，我们应该测什么？

  哈喽，大家好，我是海怪。 相信很多前端开发在写单测的时候，最大的问题就是：“我应该测什么东西？” 没错，解决问题不是最难的，发现问题才是！知道要测哪个远比怎么测重要很多！ 今天看了 Kent 博客的 《How to know what to test》 的这篇博客，感觉醍醐灌顶，今天就把这篇博文也分享给大家。

  
• 05.10 14:32:55
  发表了文章 2022-05-10 14:32:55

  前端单测，为什么不要测 “实现细节”？

  哈喽，大家好，我是海怪。 相信不少同学在写单测的时候，最大的困扰不是如何写测试代码，而是：“应该测什么？”，“要测多深入”，“哪些不该测”。 最近在给 React 组件写单测的时候，发现了 Kent （React Testing Library 的贡献者之一）的 《Testing Implementation Details》 这篇文章，里面对 “为什么不要测代码实现细节？” 这个问题写得非常好，今天就把这篇文章也分享给大家。

  
• 05.10 14:27:15
  发表了文章 2022-05-10 14:27:15

  秒懂 Web Component

  哈喽，大家好，我是海怪。 最近不是写了一篇关于京东微前端框架的文章嘛 《初探 MicroApp，一个极致简洁的微前端框架》，里面提到了一个叫 Web Components 的东西。虽然对它早有耳闻，但是一直也没怎么仔细看过，所以就深入了解了一下，今天给大家做个简单分享 :)

  
• 05.10 14:10:44
  发表了文章 2022-05-10 14:10:44

  初探 MicroApp，一个极致简洁的微前端框架

  哈喽大家好，我是海怪。

  
• 05.10 13:28:20
  发表了文章 2022-05-10 13:28:20

  【值得收藏】分享一个前端Linter上手教程

  哈喽大家好，我是海怪。 不知道大家有没有经常遇到这样一种情况：每次新建项目项目做代码风格的配置时总是随便找一篇文章，也不管啥意思，把 .eslintrc.js 的配置一抄，再把对应的 NPM 包装上就算完事了。 诶？不想承认？那考考你：eslint, prettier, eslint-config-prettier, eslint-plugin-prettier, prettier-eslint 这些都是个啥关系？它们的职责是什么？ 再考考你：如果想用 ESLint 和 TypeScript 结合，要用到哪些包呢？

  
• 05.10 12:43:28
  发表了文章 2022-05-10 12:43:28

  一个经常被忽略的 single-spa 微前端实践

  大家好，我是海怪。了解过微前端的同学应该对 single-spa 这个框架都不陌生，但是我翻看了中文整个社区，发现太少文章是讲 single-spa Demo 实践的。 还有一些文章讲了，但是都是以晒代码为主，只讲是什么，不讲为什么。这对读者来说并不是一个很好的体验。那今天就跟大家深入分析一下 single-spa 的 React 版 Demo 吧。让读者知其然，也能知其所然。

  
• 05.10 10:58:46
  发表了文章 2022-05-10 10:58:46

  热更新傻傻分不清：Webapck HMR vs React-Hot-Loader

  大家好，我是海怪。 最近发现接手的项目里一直有用 react-hot-loader 这个库，然后我就想：Webpack 不是已经有了一个 HMR(Hot Module Replacement) 的玩意了么？还要这个 loader 干啥的？ 然后搜到了这篇文章：Blogged Answers: Webpack HMR vs React-Hot-Loader 这是一篇关于 HMR 和 react-hot-loader 的对比总结，里面讲得还比较清楚，下面给大家分享一下。

  
• 05.10 10:53:49
  发表了文章 2022-05-10 10:53:49

  把企业微信侧边栏的 JS-SDK 封装了，还加上了所有 TS 类型

  我最近又想到了一些 idea，把侧边栏 JS-SDK 里的 API 的 TS 类型（入参、返回）都写了一遍，然后使用简单几个 API 来封装和调用原来的 wx.fn 以及 wx.invoke('xxx')。 整个封装的最终效果就是今天要说的 wecom-sidebar-jssdk，此 SDK 是专门针对企业微信侧边栏的 JS-SDK 进行封装的。

  
• 05.10 10:34:44
  发表了文章 2022-05-10 10:34:44

  当企微侧边栏遇上微前端

  同样地，为了不浪费大家的时候，如果你不知道 企微侧边栏 是什么，这篇文章可以关掉了。 如果你对 微前端 有强烈的兴趣，也可以尝试了解一下我是怎么在这个应用场景下实践微前端的，希望这篇文章可以对你有所启发。

  
• 05.10 10:12:39
  发表了文章 2022-05-10 10:12:39

  关于面试这件事

  前言 大家好，我是海怪。最近没研究太多的技术，打算这段时间都来分享一些偏向感想和经验的内容，希望能对大家有所启发。 前一段时间内推了一些简历，也听我同事分享了很多面试的一些故事，再回想自己面试时候的样子，还是有很多话想聊的，所以这期先来分享一些关于面试的心得。

  
• 05.10 01:32:56
  发表了文章 2022-05-10 01:32:56

  跨域是个什么鬼

  跨域是个老生常谈的话题了，最近不管在和后端联调，或者搞微前端的时候都会遇到，正好写篇文章来总结一下吧。

  
• 05.10 01:24:06
  发表了文章 2022-05-10 01:24:06

  玩不转的企业微信侧边栏

  前言 如果你不知道 企业微信侧边栏 是什么，那就可以划走这篇文章了。如果你知道这是个啥，那你一定非常苦恼要怎么开始。 从去年就开始就一直有在做企业微信侧边栏的应用。说实话，开发和调试体验实在是太糟糕了，而且上手的时候跟本连怎么打开它都不知道。

  
• 05.10 01:13:08
  发表了文章 2022-05-10 01:13:08

  十分钟上手 Next.js

  Next.js 已经出来很久了，但是一直没机会看这个框架。 以前一直在用 create-react-app 来创建 React 项目，奈何 CRA 实在太难用了，今天花了点时间扫了一下 Next.js 的官网，发现用起来还挺简单的。

  
• 05.10 01:03:33
  发表了文章 2022-05-10 01:03:33

  搞懂自定义域名

  上次写了一篇给 Gihub Pages 添加自定义域名的文章，之后感觉写得还是偏实践多一点，只做到了受人以鱼。 为了让大家在别的场景下也能搞定自定义域名，比如腾讯云网页部署、Heroku 自定义域名、自定义 CDN 域名。，今天就来写篇更通用的文章来总结一下自定义域名那些事。

  
• 05.10 00:27:12
  发表了文章 2022-05-10 00:27:12

  做了一个Nest.js上手项目，很丑，但适合练手和收藏

  最近爱了上 Nest.js 这个框架，边学边做了一个 nest-todo 这个项目。没错，就是一个 UI 很丑陋的 Todo List App。不知道为啥，慢慢开始喜欢上这种原始风味的 UI 样式了，不写 CSS 也挺好看的。虽然皮肤很丑，但是项目里面包含了大量 Nest.js 文档里的知识点（除了 GraphQL 和微服务，这部分平常用得不多就不瞎整了），能实现的点我基本都想个需求实现了

  
• 05.10 00:11:13
  发表了文章 2022-05-10 00:11:13

  十分钟上手 xlsx，4 种方法实现 Excel 导入导出

  如果你和我一样经常和管理页面打交道，那么 Excel导入数据 和 数据导出Excel 这两个需求一定是逃不掉的。 相信大多数人也知道 xlsx 这个 npm 库，但是文档内容实在是太多，太冗余了。很多人的需求就是一个简单的导入导出，但文档愣是把整个 xlsx 系统给解释了一遍，看了半天也没找到 Demo， 找到 Demo 也跑不太起来。 网上的博客要不扔个 xlsx.utils.sheet_to_json 就完了，要不写很多很长的代码（很多循环那种），唉。就让这篇文章终结这个需求吧！

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

  玩转 Docker 部署

  相信很多人都很头疼 Docker 的部署，我自己也是。 最近发现一个很有意思的现象：一个人想学某样技术的时候，当学会了之后，但是这时出现了一个问题需要学习另一门技术时，无论这个人前面学得多么刻苦，用功，到这一步有 99% 的概率都会放弃。我愿称这种现象为 “学习窗口”。 写一个网站、学会 Vue.js 是很多人的“学习窗口”，只要离开了这个“学习窗口”，他们就不想学了：我都学这么多了，草，怎么最后还要学部署啊。 所以，这篇文章就跟大家分享一下关于 Docker 部署的那些事。

  
• 05.09 22:25:31
  发表了文章 2022-05-09 22:25:31

  Github 部署个人网页 | 一键部署

  相信不少人最听说过 Github 部署网站，但是我翻找了很多文章基本以实操为主，在 Setting 点一下就没了。 虽然 Github 部署已经很简单了，但是里面还是有不少细节的，这篇文章除了手把手教大家部署一个网站，还会聊一些关于部署的细节。

  
• 05.09 22:09:30
  发表了文章 2022-05-09 22:09:30

  设计一个前端组件库，需要具备哪些能力？

  唉，时间过得真快，算下来已经过去快3年了。当时只是想发在 v2ex 上骗骗赞，今天正好看到这个话题就来分享一下做这个组件库的心得吧，希望可以给你一点灵感~

  
• 05.09 21:57:12
  发表了文章 2022-05-09 21:57:12

  用 Python 把坤坤动起来

  最近看到一个 Up 主 Ele实验室 发布的一个视频：字符化视频是怎么做出来的，感觉很有意思。不如自己也实现一个来玩玩？ 以前也没怎么写过 Python，只用来刷过 LeetCode。正好借这个机会再学一学 Python 吧。

  
• 05.09 21:27:50
  发表了文章 2022-05-09 21:27:50

  WebStorm 从入门到起飞

  最近发现身边的同事和朋友使用 VsCode 比较多。我自己也去知乎的 为什么 Webstorm 这么好用还会有人去用 Vscode 调研了一下。发现大家不喜欢 WebStorm 有几个原因： • 收钱 • 功能多、杂 • 笨重 我自己在使用 WebStorm 的时候也遇到过这些问题，之后都有了一些解决方法了，今天就给大家分享一下吧。

  
• 05.09 20:33:52
  发表了文章 2022-05-09 20:33:52

  【微前端】qiankun 到底是个什么鬼

  在上一篇文章【微前端】single-spa 到底是个什么鬼 聊到了 single-spa 这个框架仅仅实现了子应用的生命周期的调度以及 url 变化的监听。微前端的一个特点都没有实现，严格来说算不上微前端框架。 今天就来聊一个真正的微前端框架：qiankun。同样地，本文不会教大家怎么实现一个 Demo，因为官方的 Github 已经有一个很好的 Demo 了，如果你觉得官网的 Demo 太复杂了，也可以看我自己实现的小 Demo。

  
• 05.09 20:24:57
  发表了文章 2022-05-09 20:24:57

  【面试题】debounce vs throttle

  debounce 和 throttle 是面试时经常会被问到的一道 JS 题。我自己在第一次找工作的时候，就被问过。当时被问得半天说不出两者的区别，说着说着就把自己带入坑了。 今天就跟大家分享一下这两者的区别吧。

  
• 05.09 20:07:13
  发表了文章 2022-05-09 20:07:13

  【面试题】如何用 CSS 实现立方体

  最近在 algoexpert.io/ 上看到一个非常好玩的东西。刚开始的时候，我还要以为要用到什么 JS 库来实现的，打开控制台研究了一下，原来用 CSS 就可以实现了，好吧，算我孤陋寡闻了，哈哈。于是，写篇博客记录一下吧。

  
• 05.09 13:41:55
  发表了文章 2022-05-09 13:41:55

  【微前端】10分钟学会乾坤大挪移

  今天刚刚学习了一个微前端框架——乾坤，正着热乎劲，写一篇入门博客。这篇文章不会讨论太多的原理和实现，只是一个入门写 Hello World 的教程。 文章的很多地方都参考官网，但是官网的教程太简洁了，个人觉得还是做不到无脑上手，希望这篇文章可以帮到正在入门微前端的伙伴。 想直接看代码的，我写了个比官网更简单的例子，点击即可学会。

  
• 05.09 13:32:34
  发表了文章 2022-05-09 13:32:34

  【前端小白向】前端常见名词大盘点 (下）

  个人也有很讨厌找学习资源的时候，老手总是给一些“大而全”但对新人极度不友好的答案，我知道发图的人可能真的想为了新人好，但是这种图除了增加焦虑，没有大多作用。 但是前端发明了那么多的“名词”，不去了解又会一头雾水。这篇文章继续给大家盘一盘前端开发那些“名词”的由来。

  
• 05.09 12:27:34
  发表了文章 2022-05-09 12:27:34

  【前端小白向】前端常见名词大盘点（上）

  个人也有很讨厌找学习资源的时候，老手总是给一些“大而全”但对新人极度不友好的答案，我知道发图的人可能真的想为了新人好，但是这种图除了增加焦虑，没有大多作用。 但是前端发明了那么多的“名词”，不去了解又会一头雾水。这篇文章就给大家盘一盘前端开发那些“名词”的由来。