杉菜酱子の碎碎念

JS 是一门单线程的语言，因此，JS 在同一时间只能做一件事，单线程意味着，如果在同个时间有多个任务，这些任务就要排队，前一个任务执行完，才会执行下一个任务。 举个栗子： <!-- 脚本 1 --><script> // 同步 console.log('startA') // 异步宏 setTimeout(() => console.log('A1'), 0) new Promise((resolve, reject) => { // 同步 console.log('A2') resolve() }).then(() => { // 异步微 console.log('A3') }) // 同步 console.log('A4')</script><!-- 脚本 2 --><script> // 同步 console.log('startB ...

关联本地包的方式 npm link 关联到本地(某个目录)：包更新后，本地的引用会自动更新，无需重新关联即可进行调试。 pnpm 的 workspace 自动关联： ① 在项目根目录下创建 pnpm-workspace.yaml 文件 yaml packages: - 'packages/\_' 代表 packages 下的所有项目都可被很容易的被其他项目自动 link（无需使用 pnpm i 包名），底下声明的文件夹都可成为 workspace。 ② 举例：如果我们想要在 packages 下的 test 中关联 test2，只需在 test 中的 package.json 中依赖加入对应的 workspace 下的项目即可， json "dependencies": { "test2": "workspace:_" } 然后在 test 下执行pnpm i，就会自动关联 test2 到 test1 了。 ③ 实现步骤 2 的另一种做法：在 test 下执行 pnpm i test2，即可将 te ...

pnpm 中的问题 pnpm 的出现对于 npm 和 yarn 来说是一个比较彻底的改变，解决了很多 npm 安装依赖存在的问题，node_modules 过大、幽灵依赖。 pnpm 目前存在的限制在于它修改了文件的相对位置，将包和其依赖放在同一个 node_modules 下，这让一些使用了绝对路径和幽灵依赖的包在使用 pnpm 安装时会存在问题，不过 pnpm 也在解决这个问题，即通过软链接的形式将所有非工程直接依赖的包放在 .pnpm/node_modules 下，这样就解决了找不到包的问题，项目在迁移 pnpm 的话尽量可能会发现 pnpm i 后还有未安装的包，这个时候就要考虑是否引用了幽灵依赖。 总结 pnpm 目前对于日常使用完全没问题，目前很多的类库还有框架都已经默认将 pnpm 作为安装工具，目前看来 pnpm 完全可以取代 npm。

Vite 和 Webpack 之对比 开发阶段：Vite 的速度远快于 Webpack 主要原因：Webpack 是先打包再启动开发服务器，Vite 是直接启动开发服务器，然后按需编译依赖文件。 详细过程： webpack 先打包，再启动开发服务器，请求服务器时直接给予打包后的结果； Vite 直接启动开发服务器，请求哪个模块再对哪个模块进行实时编译； 由于现代浏览器本身就支持 ES Modules，会主动发起请求去获取所需文件。Vite 充分利用这一点，将开发环境下的模块文件，作为浏览器要执行的文件，而不是像 webpack 先打包，交给浏览器执行的文件是打包后的； 由于 Vite 启动时无需打包，也就无需分析模块依赖、编译，所以启动速度非常快。当浏览器请求需要的模块时，再对模块进行编译，这种按需动态编译的模式，极大地缩短了编译时间，当项目越大，文件越多，Vite 的开发时优势越明显； 在 HRM 方面，当某个模块内容改变时，让浏览器去重新请求该模块即可，而不是像 webpack 重新将该模块的所有依赖重新编译； 当需要打包到生产环境时，Vite 使用传统的 rollup 进行打包 ...

代码编辑器 技术选型： 在线代码编辑器： CodePen、CodeSanbox、JSFiddle 开源框架/库：CodeMirror5 图编辑器 开源框架/库： LogicFlow 底层依赖 svg AntV G6 自定义需求强、中等数据 交互方面缩放 友好（采用脏矩形渲染机制、矩阵 scale 算法）✨ 适合复杂定制 ✨ Sigma.js 简单样式、海量数据 平均，基本上不会有卡顿 动作上有缓入缓出机制，隐藏了一些不自然的帧来达到流畅 适合简单交互、数据量大的场景 vis-network 对定制化和包大小有要求、功能模块化裁剪、场景友好 大数据交互下不太友好，有明显卡顿感 完善的模块化机制 X6 与 G6 的区别： X6 是图编辑引擎，特点是节点、边、等元素的定制能力非常强，经常用来构建流程图、ER 图、DAG 图、脑图等应用。G6 和 X6 是孪生兄弟，G6 更擅长于图可视化和图分析领域。

为什么要用 rabbitMQ？ 1. 流量削峰 2. 应用解耦 3. 异步处理 RabbitMQ 核心部分 各个名词介绍 RabbitMQ 工作原理 安装 rabbitmq.com/download.html erlang 和 rabbitMQ 版本匹配： https://www.cnblogs.com/gne-hwz/p/10714013.html 安装：https://blog.csdn.net/almahehe/article/details/75390572 （建议看尚硅谷视频进行快速安装） 安装之后，可以访问 ip:15672 ，查看发送消息的端口（5672）和用户。 简单队列模式 生产者代码 项目依赖： <dependencies> <!--指定jdk编译版本--> <dependency> <groupId>org.apache.maven.plugins</groupId> <artifactId>ma ...

[Welcome to Hexo!](https://hexo.io/)!) This is your very first post. Check documentation](https://hexo.io/docs/)) for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting](https://hexo.io/docs/troubleshooting.html)) or you can ask me on GitHub.](https://github.com/hexojs/hexo/issues).##) Quick Start Create a new post bash$ hexo new "My New Post" More info: Writing](https://hexo.io/docs/writing.html)###) Run server bash$ hexo server More info: S ...