前言

最近在写 Nestjs 后端项目，crud 写多了，发现关于守卫、管道、拦截器这些用的不多的东西反而生疏了，现在总结一下。

本篇主要实现以下功能：

• 使用guards和decorators实现数据校验核查
• 通过interceptors和decorators实现敏感数据录入
• 自定义pipes实现数据转化

最近 github 上找了一个 Keras 的项目想做个有意思的个人项目，但是一想到 python 版本问题和 python 虚拟环境问题，一直挺抵触开动的。

昨天突然想换换脑子，实践起来，没想到借助一个美国教授的安装流程和 chatgpt 的帮助，项目半个小时就跑起来了。

之前我们介绍过 python 的 Queue 队列，队列可以解决并发过程中生产和消费不同步的问题。具体可以翻看前文。

今天我们会以 Yocto-queue 源码为例，看一下 javascript 如何写一个队列。

Yocto-queue

Yocto-queue 是一种允许高效存储和检索数据的数据结构。它是一种队列类型，是一个元素集合，其中的项被添加到一端并从另一端移除。
它被设计用来操作数据量很大的数组，在你需要使用大量的 Array.push、Array.shift 操作时，Yocto-queue 有更好的性能表现。

前言

新的一年想业余时间更多的做一些关于可视化的东西，构思了一个关于沙漏的新项目，发现想实现重力感应需要用到物理引擎。而 Matter.js 就是一个比较轻量级的物理引擎。今天就用《合成大西瓜》这个游戏来快速了解下 Matter.js 的 API。

Matter.js 是一个 2D 刚体物理引擎。

Matter.js 引擎内置了物体的运动规律和碰撞检测，因此通过它来实现这个游戏，也仅仅就是一个 API 使用的过程。

前言

Vue 内部根据功能可以被分为三个大的模块：响应性 reactivite、运行时 runtime、编辑器 compiler，以及一些小的功能点。

那么要说 vue2 与 vue3 的区别，我们需要从这三个方面加小的功能点进行说起。

响应性 reactivite

vue2 的响应性主要依赖 Object.defineProperty 进行实现，但是 Object.defineProperty 只能监听指定对象的指定属性的 getter 行为和 setter 行为，那么这样在某些情况下就会出现问题。

曾经以为自己会用 watch 、 watchEffect 了，后来发现只是略懂皮毛。最近我就把 Vue3 的侦听器全面梳理了一下，分享给大家。看看有没有你不会的吧，一起学起来！

Watch

基本用法

当我们需要在数据变化时执行一些“副作用”：如更改 DOM、执行异步操作，我们可以使用 watch 函数：

通过『 Flutter 源码解析（一）- Widget 』的介绍，我们知道 Widget 本质上是 UI 的配置数据 (静态、不可变)，Element 则是通过 Widget 生成的『实例』，两者间的关系就像是 json 与 object。

同一份配置 (Widget) 可以生成多个实例 (Element)，这些实例可能会被安插在树上不同的位置。

UI 的层级结构在 Element 间形成一棵真实存在的树「Element Tree」，Element 有 2 个主要职责：

• 根据 UI (「Widget Tree」) 的变化来维护「Element Tree」，包括：节点的插入、更新、删除、移动等；
• Widget 与 RenderObject 间的协调者。

BuildOwner在 Element 状态管理上起到重要作用：

• 在 UI 更新过程中跟踪、管理需要 rebuild 的 Element (「dirty elements」);
• 在有「dirty elements」时，及时通知引擎，以便在下一帧安排上对「dirty elements」的 rebuild，从而去刷新 UI；
• 管理处于 “inactive” 状态的 Element。

这是我们遇到的第一个 Owner，后面还有 PipeOwner。

整棵「Element Tree」共享同一个BuildOwner实例 (全局的)，在 Element 挂载过程中由 parent 传递给 child element。

1
2
3
4
5
6
7
8
9

@mustCallSuper
void mount(Element parent, dynamic newSlot) {
  _parent = parent;
  _slot = newSlot;
  _depth = _parent != null ? _parent.depth + 1 : 1;
  _active = true;
  if (parent != null) // Only assign ownership if the parent is non-null
    _owner = parent.owner;
}

Everything’s a widget.

在开发 Flutter 应用过程中，接触最多的无疑就是Widget，是『描述』 Flutter UI 的基本单元，通过Widget可以做到：

• 描述 UI 的层级结构 (通过Widget嵌套)；
• 定制 UI 的具体样式 (如：font、color等)；
• 指导 UI 的布局过程 (如：padding、center等)；
• …

Google 在设计Widget时，还赋予它一些鲜明的特点：

以前总是通过 timestamp 来防止重放攻击，但是这样并不能保证每次请求都是一次性的。今天看到了一篇文章介绍的通过 nonce（Number used once）来保证一次有效，感觉两者结合一下，就能达到一个非常好的效果了。