Rollup 打包 Vue 项目
用 Rollup 打包一个 Vue 项目所需的配置。 package.json所需依赖： { "name": "rollup-build-vue", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "rollup -c" &# ...
第三年～
这一年总共就写了四篇文章，啧 🤦。虽然文章写的比较少，但 “事” 没少做。 babel-plugin-jsx：去年项目要迁移新版本的框架，意味着要把之前的代码全部重构一遍。其实当时刚开始重构的时候，就有个想法：为什么不用 jsx 的格式来重构代码呢？这样不仅会提升代码的逻辑清晰度，嵌套层级也会极大地降低，对开发很友好。我的设想是，开发一个 babel 插件。结果，当时只做了一个开头，后续 ...
Omit | Pick | PickAndOmit
最新在开发功能的时候需要用到 lodash 中类似 pick 和 omit 的功能，但是只是用到这两个小功能，实在不想把这个库也下载下来，于是就自己实现了一下。而且既然都用到 TypeScript 了，那就完善一下类型叭。本来想着参考 lodash 里类型是如何实现的，结果发现源代码里虽然是用 TypeScript 写的，但是类型是一点都没写，只能自己琢磨了。最后的版本如下： ts e ...
竞态函数过期
如上图所示，点击不同的 Tab 页签，Table 中展示不同的数据，这是一个很常见的页面交互逻辑。 设想一下，当前的处理逻辑是：有三个 Tab 页签和一个 Table，每点击 Tab 后，都会发起一个请求，然后请求成功后，会对 Table 重新赋值。也即，不同的 Tab 切换，都会对这个唯一的 Table 进行重新赋值。 仔细想一下，这会有问题吗？ 有的，这里隐藏着一个 “竞态” 问题 ...
React + Antd 搭建一个词云在线生成网站
事情的起因是，有一天，突然看到一个贼吃我颜的 UI 组件库 shadcn/ui，实在是太喜欢了 😍。 于是，打算用这个 UI 库做个东西，刚好最近要做一个词云相关的网站，起初是打算用 Vue 实现来着，但是看了看这个 UI 库不支持 Vue ，但支持 React ，但我还从未使用 React 开发过任何东西，上次学习还是 3 年前的事了。然后，我做了一个决定就用 React ...
Babel 插件：自定义转换 JSX 语法规则
去年九月份的时候，由于平台框架升级，要求各个产品都要升级，相当于要把之前的代码全部用新框架的语法重构一遍，于是就开启了 2.0 框架升级的工作。升级后的语法如下： export default function useForm() { return { props: {}, slots: { default: ...
相似请求合并
前言在日常开发中，有一种很常见的接口场景：例如，需要获取 type 为 a 的数据，这时候的接口入参为 { type: ["a"] }。如果需要同时获取 type 为 a 和 b 的数据，则入参为 { type: ["a", "b"] }。在需要获取多种 type 数据的场景中，显而易见，只 ...
Mac 开发环境搭建（持续更新中～）
2023/11/20安装 IDEA 下载地址：https://macapp.org.cn/app/intellij-idea.html 激活码： ZCB571FZHV-eyJsaWNlbnNlSWQiOiJaQ0I1NzFGWkhWIiwibGljZW5zZWVOYW1lIjoiZnV6emVzIGFsbHkiLCJhc3NpZ25lZU5hbWUiOiIiLCJhc ...
重复请求优化
设想一种场景，有两个组件，这两个组件在初始化阶段，都需要调用同一个 API 接口去获取数据。为了防止请求冗余，可以把两个组件的请求都挪到父组件中，由父组件统一调用一次请求，然后再将响应的数据结果传给两个子组件。这种方法应该是最常见的，不过它也有一个局限性条件：两个组件必须有一个共同的祖先组件，如果这两个组件是同级的兄弟组件倒也还好，如果非同级，那么数据的传参就会有些麻烦了。那么还有其他办法 ...
最大余额法
当开发一些图表类页面时，经常需要对一组数据求百分比，而像是常用的 Echarts 图表，在内部已经计算妥当了，保证一组数据在计算完百分比之后，这些百分比相加后仍然等于 100% 。而这种计算百分比的算法之一就是 —— 最大余额法。 核心思想就是，根据每部分所占比例的大小，按照从高到低的顺序去分配剩余部分。 比如，一组数据 [ 4, 4, 3 ]，所占百分比为 [ 36.363636363 ...