https://blog.ljt.com 一个专注于前端、后端和数据库技术分享的个人博客，记录开发过程中的思考和总结。 zh-CN Wed, 03 Jun 2026 17:34:09 GMT https://blog.ljt.com/articles/1 https://blog.ljt.com/articles/1 Sat, 09 May 2026 10:00:00 GMT 本文介绍如何使用 NestJS 从零开始搭建一个功能完整的博客后端服务，涵盖项目初始化、模块化设计、数据库连接等核心内容。 https://blog.ljt.com/articles/70 https://blog.ljt.com/articles/70 Fri, 21 Mar 2025 22:51:53 GMT 需要对react的整个流程了解，可以看下前两篇文章 分为了两个流程，挂载和更新，区分挂载和更新就是依靠的当前处理的fiber节点所映射的另一个fiber节点是否存在 在renderWithHooks里初始化ReactCurrentDispatcher.current，然后再去执行的我们的组件函数，组件函数执行对应的hooks，hooks执行的时候ReactCurrentDispatcher.current.hooks执行 https://blog.ljt.com/articles/69 https://blog.ljt.com/articles/69 Fri, 28 Feb 2025 22:17:16 GMT 源码，过一下diff算法的细节！！！！！ 入口位置 react/packages/react-reconciler/src/ReactFiberWorkLoop.new.js 这里源码做了删减，只保存了主流程 https://blog.ljt.com/articles/68 https://blog.ljt.com/articles/68 Tue, 18 Feb 2025 20:57:58 GMT 处理之后的源码的地址  https://github.com/raotaohub/as-you-see-react ，直接拉下来就可以调试了，不用任何配置 调试源码之前需要对react的整个流程了解，对于原理也是需要了解的，可以推荐看下卡颂的react原理揭秘。看源码，必定是带着疑惑去的，解答自己的疑惑，看源码没必要钻牛角尖，忽略没必要的细节，例如某些没必要的参数，主要是搞清主流程 首先，需要对react的渲染流程需要有个大致的理解 https://blog.ljt.com/articles/67 https://blog.ljt.com/articles/67 Sat, 11 Jan 2025 21:13:28 GMT 前面的项目都用到了monorepo，这里回顾下 Monorepo：单个仓库多项目管理，一种项目代码管理方式，相关的解决方案还有turborepo，lerna等 使用下来的体验：统一工程化配置，代码风格 代码复用的同时仍然保持了业务场景的独立，模块分明 编码方便 相同版本依赖提升到 Monorepo 根目录下，减少冗余依赖安装；使用 pnpm 按需安装及依赖缓存。 但也存在一些问题：难以控制git的权限问题（粒度较粗，拥有了仓库的权限即拥有了仓库下所有项目的权限，解决方案可以看下这篇文章https://www.satellytes.com/blog/post/monorepo-codeowner-github-enterprise/） 项目庞大后，会比较难以管理 https://blog.ljt.com/articles/66 https://blog.ljt.com/articles/66 Wed, 09 Oct 2024 20:35:39 GMT 码仓：https://github.com/webpack/webpack.git https://blog.ljt.com/articles/65 https://blog.ljt.com/articles/65 Sun, 13 Oct 2024 20:05:54 GMT ！ 前面已经讲了 远程组件加载的几种方式，这里具体的实现一下（这里就不具体的去陈述异步模块加载了，默认已经懂了） 首先我们先观察下，基于amd打包之后的代码 其实就是一个define方法 https://blog.ljt.com/articles/64 https://blog.ljt.com/articles/64 Sat, 10 Aug 2024 20:03:08 GMT 从打包之后的代码，看一下webpack如何实现的懒加载 懒加载的本质，代码分离，按需加载 这里使用的是最常用的import 先看一下懒加载效果 首次进入 点击div元素后加载module test代码 https://blog.ljt.com/articles/63 https://blog.ljt.com/articles/63 Sat, 03 Aug 2024 23:57:29 GMT 项目中遇到了循环依赖的问题，便浅浅分析一下。。。 基于打包后的代码逆向分析 webpack是如何实现es与cjs这两种模块化的 测试环境搭建：   依赖 https://blog.ljt.com/articles/62 https://blog.ljt.com/articles/62 Wed, 27 Mar 2024 19:08:05 GMT 也是今天突然的回想到了这个问题，然后想通了；。。。 关于前面做低代码时，做远程组件的加载，拿到远程组件后，函数式组件的setState进去，渲染时会崩掉的问题。 原因在于setState是可以接收两种参数的，传入一个函数的话，他会执行后返回函数的执行结果，在去set一个新的状态，这个的话是react的基础问题了。 https://blog.ljt.com/articles/61 https://blog.ljt.com/articles/61 Wed, 13 Mar 2024 15:11:02 GMT 静水流深，光而不耀 https://blog.ljt.com/articles/60 https://blog.ljt.com/articles/60 Tue, 13 Feb 2024 22:31:55 GMT 这个自己确实研究了蛮久了，就是如何实现远程组件的加载。 因为对于业务组件一般来说，第一选择会发npm包，但是对于产品组件的话，第一就是组件过大，与独立的项目无异，迭代很频繁，有时需要更改线上的问题，且平台有时需要支持加载客户的第三方组件等问题，可以选择一个组件远程加载的方案去实现。   因为自己现在所做的产品，为了保证项目的扩展性，是需要支持用户可以上传自己的组件，且对于新的twin相关的产品线，也是需要支持组件可以进行远程加载的，就是说平台应用和产品组件是分离的。 对于超复杂的组件，是单独的提成了一个单独的项目去进行处理的，例如easyv中的数字孪生渲染的屏。然后在平台中去做一个按需引入。   给出的技术方案： 第一个就是组件的打包 组件为独立的一个项目，在打包时需要打包为一个单文件，组件打包代码为umd格式（可以去了解下umd，amd，以及cmd，esmodule规范）。将打包组件的js上传到cdn中（这里的话其实可以推荐使用阿里云的oss服务）。 第二个的话就是组件的加载。 https://blog.ljt.com/articles/59 https://blog.ljt.com/articles/59 Mon, 08 Jan 2024 15:47:49 GMT 使用OSS 对象存储服务来上传下载文件。例如版本更新公告，图片，其他文件等。 甚至可以用来存储前端组件，这个的话倒是比较复杂的。先看一下如何基本的使用 首先需要购买oss服务 创建一个bucket   项目中基本的使用 这里基于rollup创建了一个项目，经行构建打包 将打包文件放入到bucket中 直接在浏览器中访问即可，不过对于可以通过script标签在项目运行时进行一个动态引入。     这里如何向bucket中上传文件呢，除了可以在阿里云上面手动上传文件，还可以使用他提供的sdk去实现 核心方法 https://blog.ljt.com/articles/58 https://blog.ljt.com/articles/58 Sun, 17 Dec 2023 22:42:45 GMT 随着自己做的这个产品愈发的成熟，商业化也在推进，企业级用户越来越多，所以这期twin这边需要单独出个版本的更新公告。   主要点在与在同一设备中同一版本的公告只显示一次，其实可以抽象为同一浏览器。 实现的思路主要是通过package中的版本号加localstorage去实现，因为这边在每次发版时，都会去跟进package中的version的。   这边用的vite去搭建的项目，即在项目构建时，去拿到package中的version,在viteconfig的define选项中暴露出去 但是 这样也会有一个问题 ，就是，在有时会修复某一些线上的问题，那么这时，其实也会更改版本号，一般是后面小数点后一位加一，不过看公司的规范了，这时即使没有重新发版，但也会版本更新公告的显示也会有问题，那么在设置version时处理一下即可， https://blog.ljt.com/articles/57 https://blog.ljt.com/articles/57 Tue, 07 Nov 2023 22:25:53 GMT emmmm，主要解决的是一些样式上的问题 ，使用泛型二次封装一下 复选框只能叶结点存在，这里需要自己写一下渲染逻辑，当然，树形结构，使用递归即可 https://blog.ljt.com/articles/56 https://blog.ljt.com/articles/56 Wed, 11 Oct 2023 21:32:30 GMT 解决一个需求，前端做一个search功能 数据结构的话是树形数据，emmm，不只是单独的遍历，还需要找到搜索到节点的层次，并且进行拼接，拼接父级的name 大致的数据结构： https://blog.ljt.com/articles/55 https://blog.ljt.com/articles/55 Fri, 15 Sep 2023 20:03:25 GMT 本身是一个插件，在使用时，仅需要根据样式来书写类名，便可以实现任意的样式组合。公司的css解决方案便是使用的winidcss加less，真的香，可能上手的话，需要一点点的适应时间 结合自己的使用体验的话，我觉得最大的优势在于，不用再去为取类名而苦恼了，写起来真的很爽，劣势也比较明显，有那么一点不好的维护   官网https://www.tailwindcss.cn/docs/installation   安装 https://blog.ljt.com/articles/54 https://blog.ljt.com/articles/54 Sat, 26 Aug 2023 10:39:14 GMT 实现一下 用户点击 与promise保存 资源加载失败与js代码报错  上报。 目录结构：   核心的代码实现以及实现思路。 主要考虑将用户的id与请求的url存储在了window上，因为这样比较好操作一些。 但是实际开发中 ，可以使用本地存储的token。 然后请求的话 是使用的navigator.sendBeacon，因为考虑到不支持IE 这里可以使用img标签的方式解决下这个问题 https://blog.ljt.com/articles/53 https://blog.ljt.com/articles/53 Fri, 25 Aug 2023 23:22:06 GMT 这里使用webpack搭建下react的开发环境 webpack的配置文件 https://blog.ljt.com/articles/52 https://blog.ljt.com/articles/52 Fri, 25 Aug 2023 22:32:52 GMT 前端埋点，主要的话 分为两类吧 一类是产品，业务相关的数据指标比如转化率、点击率、UV、PV等等。当然，分析对应的数据 也会有利于业务方向的调整 一类是项目质量、性能相关的，这种可以叫做打点。如首屏、http请求、js报错这些。用来做优化比较多   实现的话 ，这里并不使用ajax去做实现 这里使用