jump-and-jump
jump-and-jump
学习 MySQL 数据库是笔者今年的首要任务。在这篇文章中我将使用问答的形式来讲述目前学习到的知识点。 ## 数据库存储 对比其他数据库，MySQL 是特殊的。它支持多种存储引擎。InnoDB 是 MySQL 的默认存储引擎，当前的优化都是基于此引擎。 ### InnoDB 是如何存储的数据的？ InnoDB 既可以将数据持久化的放到磁盘中，又可以在内存中处理数据。在数据库运行的过程中，数据引擎不断的在磁盘和内存中进行交互。在交互的过程中为了提升性能，将数据划分为许多页（避免一条一条交互）。InnoDB 存储引擎一页默认的大小为 16KB（通过 innodb_page_size 修改）。也就是说，一次至少从磁盘中读取 16KB 的数据到内存中，即使当前只读取了页中的某一条数据。同时一次也会把 16KB 的数据写入磁盘中。 可以简单的理解，数据库页中存储了多条记录。而这些页以双向链表的形式链接。目前如果需要查询数据的话，我们得从第一页中检索数据直到最后一页。这是不可接受的，这时候就得依靠树结构来优化查询了。 [数据项 1 - 100] [数据项 101...
之前在做 code review 时候发现有同事使用 try catch 包装了一堆异步代码，于是个人就觉得很奇怪，难道不应该只 catch 可能出问题的代码吗？同事告诉我说 try catch 太细的话会出现内外作用域不一致，需要提前声明变量。 ```ts let res: Data[] = []; try { res = await fetchData(); } catch (err) { // 错误操作或者终止...
在前端开发的过程中，开发者经常会用到 new Date() 来获取当前时间，但是 new Date() 是获取的当前操作系统的时间，由于用户可以修改当前电脑时间，所以它是不准确的。 大部分情况下，用户修改当前电脑时间都没有什么问题，但是当我们需要根据服务端传递的数据时间与当前时间进行计算时，前端展示就会出错。同时，需要过期时间的数据（时间）存入前端缓存（ localStorage, IndexedDB ）中也是会出现问题。 这时候我们考虑使用服务器提供的时间，而不是前端时间。服务器每次进行数据交互时都会在响应头提供时间数据。我们可以通过该数据修正前端时间。  于是个人写了一个小工具 [sync-time](https://github.com/wsafight/sync-time) 。以 fetch 为例子: ```ts import { sync, time, date } from 'sync-time' async function getJSON()...
# 手写一个 React 动画组件 在项目开发的过程中，设计师不免会做一些动画效果来提升用户体验。如果当前效果不需要交互，只是用来展示的话，我们完全可以利用 GIF 或者 APNG 来实现效果。不了解 APNG 小伙伴可以看看这篇博客 [APNG 历史、特性简介以及 APNG 制作演示](https://www.zhangxinxu.com/wordpress/2014/09/apng-history-character-maker-editor/)。  但是如果当前动画除了展示还需要其他交互，甚至是一个组件需要动画效果，使用图片格式就不合理了。于是我写一个极其简单的 css 动画库 [rc-css-animate](https://github.com/wsafight/rc-css-animate)。这里直接使用 [animate.css](https://animate.style/) 作为 css 动画的依赖库。 animate.css 不但提供了很多交互动画样式类，也提供了动画运行速度，延迟，以及重复次数等样式类。 可以看到，默认的 animate.css 构建动画都需要携带前缀 “animate__”。...
之前学习函数式编程语言的过程中，有 3 比较重要的特性： - 函数是一等公民 - 数据不可变 - 惰性求值 JavaScript 虽然具有函数式语言的特性，但是很可惜，它还是没有具备不可变数据这一大优势。 在开发复杂系统的情况下，不可变性具有两个非常重要的特性：不可修改 (减少错误的发生) 以及结构共享(节省空间)。不可修改也意味着数据容易回溯，易于观察。 当前端开发谈到不可变性数据时候，第一个一定会想到 [Immer](https://immerjs.github.io/immer/) 库，Immer 利用 ES6 的 proxy，几乎以最小的成本实现了 js 的不可变数据结构。React 也通过不可变数据结构结合提升性能。不过 Immer 还是有一定侵入性。那么有没有较好且没有侵入的解决方案呢？本文将介绍另一个工具 [immutability-helper](https://github.com/kolodny/immutability-helper)，该库也在 [React 性能优化](https://zh-hans.reactjs.org/docs/optimizing-performance.html#the-power-of-not-mutating-data) 有所描述。...
在开发 web 应用程序时，性能都是必不可少的话题。同时通用 web 应用程序离不开数据的增删改查，虽然用户大部分操作都是在查询，但是我们也不可以忽略更改数据对于系统的影响。于是个人写了一个业务数据比对库 [diff-helper](https://github.com/wsafight/diff-helper.git)。方便开发者在前端提交数据到服务端时候去除不必要的信息，优化网络传输和服务端性能。 ## 项目演进 任何项目都不是一触而就的，下面是关于 diff-helper 库的编写思路。希望能对大家有一些帮助。 ### 简单对象比对 前端提交 JSON 对象数据时，很多情况下都是对象一层数据比对。在不考虑对象中还有复杂数据（嵌套对象和数组）的情况下，编写如下代码 ```ts // newVal 表示新数据，oldVal 表示老数据 const simpleObjDiff = ({ newVal, oldVal, }): Record =>...
Using export default will prompt that it is not a function
使用 PUBLIC_PATH 打包好了就会有问题呢，对新同学不太友好。 是否有其他的解法，帮助 scripts/loading.js 添加前缀 ## Summary by CodeRabbit - **New Features** - Configured dynamic public paths for scripts, allowing better support for different deployment environments.
error: ```bash error Failed to load file with jiti: xxxx/xxxxx/rsbuild.config.ts error Failed to start dev server. error Cannot find module 'vite' ``` The vite framework is required in the src/core/context/index.ts...