前端夜点心

node 环境与浏览器环境的一个主要区别是 document 和 window 对象的缺失。尽管现代的前端开发中源码对 DOM 和 BOM 的直接操作往往非常有限，但在单元...

这样的类型推断策略在大部分的情形下比较通用，但在个别情形下会显得有些棘手。例如我们想实现一个 React 中的自定义 Hook。这个 Hook 能通过 Ref 维护一个状态...

在这样的处境下，一味强调单元测试的逻辑覆盖率是没有太大意义的，明确在哪里应用单测的能取得最大的边际效益是更有意义的事情。 单测只是一种局部模块测试，是诸多测试方案中的一种，...

今天的夜点心我们来聊聊 JS 项目中的单元测试。 近期会通过几篇夜点心来聊聊单元测试，这篇关于如何从工程层面让单测更易进行，之后会进一步讨论如何写测试脚本以及如何对组件进行...

通过位运算来定义和使用枚举型，可以实现把很多「是否」的属性压缩在一个字段中存储的效果。并且无论在生产端还是消费端，使用起来都还比较直观。 在数据传输层面，基于掩码来传输属性...

CSS 的特性不断增强，预编译框架也层出不穷，但是即使使用 cssModules 这样的 scope 技术，我们仍需要一些范式来指导我们在局部更规范合理地给类取名字。 不同...

今天的夜点心，我们聊聊对前端架构的看法。 一个好的前端架构，应该没有明显的短板。知易行难，后续我们会分三个章节（Data、Domain、View）来聊聊怎么样组织前端工程；...

开发中我们会遇到一类逻辑，他们与特定的类没有耦合关系，甚至与特定的接口（interface）也没有耦合关系。我们可以把他们抽离出来，并通过某种语法再添回到特定的属性和方法上...

今天的夜点心我们来关注一些 ES 中的性能细节：怎样更快地创建对象。 先说结论：通过 JSON.parse 创建 JS 对象的速度要显著快于直接通过 JS 字面量来创建对象...

今天的夜点心继续昨天的话题，谈一谈函数式编程中的异步数据流处理。 在介绍异步函子之前，首先需要了解 Monad 函子和 IO 函子的概念，可以参考之前的 函数式夜点心：Mo...

副作用（side-effects）说得直白一点就是与程序外部的世界的交互作用，比如改变显示屏的界面展示，读写后端数据库中的内容，副作用让我们的应用得以与外部世界发生相互以实...

这里的选项一般也被称作刺激物（stimulus）可以是一些实体的按钮，可以是格斗中的招式（Hick's Law 也被用在格斗中，一些理论认为太多的招式积累会减慢一个招式的反...

现在假设我们需要实现一个名为 promisify 函数，它的功能有些类似 then 方法：接受一个值，如果它已经是 Promise 了，就直接返回；如果不是，就把它包在一个...

今天的夜点心关于 React 的 memo 方法。 上面的代码中，App 组件是应用的根组件；Display 接受一个字符串 name 和一个数字 value 作为属性，每...

函数式编程（下面简称 FP），往往被前端们拿来主义地用来解决一些「局部困难」：如使用 rxjs 来处理订阅流；如使用高阶组件来复用逻辑。它在充斥着副作用的应用中默默承担着一...

今天的夜点心关于交互设计中的 Fitt's Law。 我们会不定期地发布一些交互设计与数据可视化方面的内容。一方面是由于笔者自己在硕士阶段学习的是设计，另一方面前端是直接与...

熟悉 TypeScript 的朋友都知道，TS 具有一套类型推断系统来帮助减少不必要的类型声明。即使是面对纯 JS 代码，TS 也能通过类型推断系统给每个变量自动套上一个默...

里面声明的 count 状态和 increaseCount 方法我们暂时都没有用到。现在假设有一个奇葩需求：每当用户缩放浏览器窗口的时候，就打印这个 count 并且给他加...

今天的夜点心关于 ECMAScript 的两个带有 ? 的新提案。 这些语法大同小异（后面的三种写法的 . 不要忘了哦），本质都是帮助我们减少一些判断值是否是 null 或...

TS 在遇到以下这些条件语句时，会在语句的块级作用域内「收紧」变量的类型，这种类型推断的行为称作类型守卫 (Type Guard)。 类型守卫可以帮助我们在块级作用域中获得...