- 博客(124)
- 收藏
- 关注
RSS订阅原创 低代码与大语言模型的探索实践
ChatGPT，作为一个先进的自然语言处理工具，可以理解和生成人类语言，提供智能编程建议，自动化代码生成，以及提供交互式编程教学。这些功能为开发者提供了前所未有的便利，大大减少了编程的时间和复杂性。低代码平台则允许用户通过图形界面来构建应用，减少了对专业编程知识的依赖，在特定业务场景下能够提升开发效率。用户可以通过拖放组件和模型驱动的逻辑来快速地创建应用程序，而无需编写大量代码。
2024-02-24 21:31:17
1171
原创 使用 pm2 启动 nodejs 服务
查看当前的所有 nodejs 服务是否都已经启动，确保想要自动启动的服务都运行后，将其状态保存到 pm2。这样，如果 PM2 崩溃，systemd 会自动重启它，从而保持你的 Node.js 服务运行。，否则没有设置成功。文件，也可以自己改为其他名字。如果已经开机启动，执行命令会返回一个。然后可以重启服务器验证一下是否成功。验证服务是否已经设为开机启动。
2023-11-09 13:00:05
590
原创 从零开始实现一个玩具版浏览器渲染引擎
浏览器渲染原理作为前端必须要了解的知识点之一，在面试中经常会被问到。在一些前端书籍或者培训课程里也会经常被提及，比如 MDN 文档中就有渲染原理的相关描述。作为一名工作多年的前端，我对于渲染原理自然也是了解的，但是对于它的理解只停留在理论知识层面。所以我决定自己动手实现一个玩具版的渲染引擎。渲染引擎是浏览器的一部分，它负责将网页内容（HTML、CSS、JavaScript 等）转化为用户可阅读、观看、听到的形式。但是要独自实现一个完整的渲染引擎工作量实在太大了，而且也很困难。
2023-08-13 00:31:25
249
原创 一个 git 仓库下拥有多个项目的 git hooks 配置方案
通常情况下，一个 git 仓库就是一个项目，只需要配置一套 git hooks 脚本就可以执行各种校验、测试脚本。对于 monorepo 项目也是如此，monorepo 项目下的多个 packages 之间，它们是有关联的，所以当成一个项目也没问题。但是也有一种情况，一个 git 仓库下的多个项目之间是彼此独立的，比如 git 仓库下存在前端项目、后端项目、文档项目等等。这时候就需要为每个项目配置不同的 git hooks 脚本了，因为不同的项目有可能校验规则不一样。
2023-08-01 15:56:49
1325
原创 Vue 加载远程组件的解决方案
远程组件的方案其实不止上面两种，比如还有直接加载.vue文件的方案，有个现成的插件能用。一般来说，加载远程组件的应用场景比较少，所以网上能搜到的讨论也比较少。目前比较常见的应用场景应该就是在低代码平台中加载远程组件了。
2023-07-23 18:54:33
1138
8
原创 this could be due to syntax errors or importing non-existent modules 解决方案
方法放到其他文件，解决循环引用问题后，此问题也不再出现。此问题是由于循环引用导致的报错。
2023-06-09 23:57:01
4390
原创 使用 rollup 打包带有 uuid npm 包的项目时，打包产物中有 import crypto from ‘crypto‘ 代码.
在使用 uuid 包时:import { v4 as uuidv4 } from 'uuid';发现引用的这个 uuid 包没有 ts 声明，估计是这个问题导致 rollup 打包时找不到对应的包，所以打包产物中有 import crypto from 'crypto' 的代码，因为 uuid 引用了 crypto 这个内置包。在安装 @types/uuid ts 声明包后，这个问题成功解决，打包后的产物没有 import crypto from 'crypto' 这行代码。...
2022-03-29 15:50:20
809
原创 2021 年终总结：奔向北京，迎接 996
2021 年已经结束，对于我来说，今年发生了不少的事情，所以我觉得写个年终总结很有必要，于是就有了这篇文章。一、不满足于现状，前往北京发展从转行开始，我就一直在天津工作。虽然当时转行已经 29 岁了，但是对于未来能做成什么事，要达到什么样的高度并没有清晰的认识，也没有规划。毕竟当时转行也只是为了混口饭吃，能让自己在天津活下去。天津的互联网行业发展非常差，和北京比一个天一个地。而且大多数公司都是项目外包型公司，就是在外面接项目做来养活公司。基本上都是没什么技术含量的项目，一套模板能放在多个项目上用。我在
2022-01-15 22:42:13
3776
原创 一些常用的 Git 进阶知识与技巧
1. 同一电脑存在多个 Git 账号假设我们在同一电脑上拥有多个 Git 账号，例如公司内部使用的是 Gitlab，个人使用的是 Github 或者 Gitee。那就会遇到一种情况，上班时想给个人开源项目提交代码，但是 Git 绑定的是公司的账号。在这种情况下，我们可以让 Git 绑定多个不同的 ssh key，每个 ssh key 对应一个不同的 Git 服务器。生成第一个 ssh key:ssh-keygen -t rsa -C "[email protected]"生成第二个 ssh key:ssh-
2021-11-09 10:14:41
343
1
原创 前端监控 SDK 的一些技术要点原理分析
一个完整的前端监控平台包括三个部分：数据采集与上报、数据整理和存储、数据展示。本文要讲的就是其中的第一个环节——数据采集与上报。下图是本文要讲述内容的大纲，大家可以先大致了解一下：仅看理论知识是比较难以理解的，为此我结合本文要讲的技术要点写了一个简单的监控 SDK，可以用它来写一些简单的 DEMO，帮助加深理解。再结合本文一起阅读，效果更好。性能数据采集chrome 开发团队提出了一系列用于检测网页性能的指标：FP(first-paint)，从页面加载开始到第一个像素绘制到屏幕上的时间FC
2021-10-11 23:05:18
670
原创 nestjs 接受请求返回文件流
import { Response } from 'express';import { PassThrough } from 'stream';import { Get, Header, Res,} from '@nestjs/common';const QRCode = require('qrcode');@Get('getqrcode')@Header('Content-Type', 'image/png')generateQRCode(@Res() res: Respon
2021-09-18 10:50:34
2435
原创 rollup + typescript 打包后无法结束的问题
最近用 rollup 和 typescript 写一个组件库，发现每次打包完成后总是不结束，程序一直卡着…就和上图一样卡着不动。花了半天时间排查，发现是 @rollup/plugin-typescript 和 typescript 依赖版本的问题。因为每次下载都是用的最新的依赖版本，所以这两个 npm 包之间的兼容性不太好，最后将这两个依赖降级后（依赖版本写死，@rollup/plugin-typescript 为 8.2.1，typescript 为 4.2.4），打包就正常了，不会一直卡着不结束。
2021-09-04 16:16:11
982
原创 手写 git hooks 脚本（pre-commit、commit-msg）
简介Git 能在特定的重要动作发生时触发自定义脚本，其中比较常用的有：pre-commit、commit-msg、pre-push 等钩子（hooks）。我们可以在 pre-commit 触发时进行代码格式验证，在 commit-msg 触发时对 commit 消息和提交用户进行验证，在 pre-push 触发时进行单元测试、e2e 测试等操作。Git 在执行 git init 进行初始化时，会在 .git/hooks 目录生成一系列的 hooks 脚本：从上图可以看到每个脚本的后缀都是以 .sam
2021-07-18 23:57:53
1590
1
原创 手把手教你写一个脚手架（二）
时隔三个月，终于有时间写脚手架系列第二篇文章了，在北京上班确实比天津忙多了，都没时间摸鱼。如果你没看过本系列的第一篇文章手把手教你写一个脚手架，建议先看一遍再来阅读本文，效果更好。mini-cli 项目 github 地址：https://github.com/woai3c/mini-cliv3 版本的代码在 v3 分支，v4 版本的代码在 v4 分支。第三个版本 v3第三个版本主要添加了两个功能：将项目拆分为 monorepo 的组织方式。新增 add 命令，可以通过 mvc add xxx
2021-05-24 14:00:17
492
原创 gitlab 自动化部署
安装sudo curl --output /usr/local/bin/gitlab-runner "https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-darwin-amd64"sudo chmod +x /usr/local/bin/gitlab-runner启动cd ~gitlab-runner installgitlab-runner start注册gitlab-runne
2021-04-21 20:22:47
3821
原创 手把手教你写一个脚手架
最近在学习 vue-cli 的源码，获益良多。为了让自己理解得更加深刻，我决定模仿它造一个轮子，争取尽可能多的实现原有的功能。我将这个轮子分成三个版本：尽可能用最少的代码实现一个最简版本的脚手架。在 1 的基础上添加一些辅助功能，例如选择包管理器、npm 源等等。实现插件化，可以自由的进行扩展。在不影响内部源码的情况下，添加功能。有人可能不懂脚手架是什么。按我的理解，脚手架就是帮助你把项目的基础架子搭好。例如项目依赖、模板、构建工具等等。让你不用从零开始配置一个项目，尽可能快的进行业务开发。
2021-02-23 23:34:56
557
原创 Vue 项目一些常见问题的解决方案
有一些问题不限于 Vue，还适应于其他类型的 SPA 项目。1. 页面权限控制和登陆验证页面权限控制页面权限控制是什么意思呢？就是一个网站有不同的角色，比如管理员和普通用户，要求不同的角色能访问的页面是不一样的。如果一个页面，有角色越权访问，这时就得做出限制了。一种方法是通过动态添加路由和菜单来做控制，不能访问的页面不添加到路由表里，这是其中一种办法。具体细节请看下一节的《动态菜单》。另一种办法就是所有的页面都在路由表里，只是在访问的时候要判断一下角色权限。如果有权限就允许访问，没有权限就拒绝，
2021-02-19 09:56:12
574
原创 可视化拖拽组件库一些技术要点原理分析（三）
本文是可视化拖拽系列的第三篇，之前的两篇文章一共对 17 个功能点的技术原理进行了分析：编辑器自定义组件拖拽删除组件、调整图层层级放大缩小撤消、重做组件属性设置吸附预览、保存代码绑定事件绑定动画导入 PSD手机模式拖拽旋转复制粘贴剪切数据交互发布本文在此基础上，将对以下几个功能点的技术原理进行分析：多个组件的组合和拆分文本组件矩形组件锁定组件快捷键网格线编辑器快照的另一种实现方式如果你对我之前的两篇文章不是很了解，建议先把这两篇文章看一遍，再来阅读
2021-02-15 09:58:13
760
原创 解决 Cannot read property ‘range‘ of null 错误
.eslintrc 配置文件加上：parserOptions: { ecmaFeatures: { legacyDecorators: true }, parser: 'babel-eslint',},rules : { "template-curly-spacing" : "off", "indent": ["error", 4, { "ignoredNodes": ["TemplateLiteral"] }]}...
2021-02-09 15:05:29
634
原创 带你入门前端工程（十二）：Serverless
Serverless，即无服务架构。是指由第三方云计算供应商以服务的方式为开发者提供所需功能，例如数据库、消息，以及身份验证等。它的核心思想是让开发者专注构建和运行应用，而无需管理服务器。Serverless 技术的应用一般有两种：Faas(Function as a Service) 函数即服务和 Baas(Backend as a Service) 后端即服务。优点Serverless 最大的优点就是自动扩展伸缩、无需自己管理。在以往部署一个应用时，需要经历购买服务器、安装操作系统、购买域名等等
2021-01-23 10:50:00
491
1
原创 带你入门前端工程（十一）：微前端
什么是微服务？先看看维基百科的定义：微服务（英语：Microservices）是一种软件架构风格，它是以专注于单一责任与功能的小型功能区块 (Small Building Blocks) 为基础，利用模块化的方式组合出复杂的大型应用程序，各功能区块使用与语言无关 (Language-Independent/Language agnostic）的API集相互通信。换句话说，就是将一个大型、复杂的应用分解成几个服务，每个服务就像是一个组件，组合起来一起构建成整个应用。想象一下，一个上百个功能、数十万行
2021-01-23 10:47:47
279
原创 带你入门前端工程（十）：重构
《重构2》一书中对重构进行了定义：所谓重构（refactoring）是这样一个过程：在不改变代码外在行为的前提下，对代码做出修改，以改进程序的内部结构。重构是一种经千锤百炼形成的有条不紊的程序整理方法，可以最大限度地减小整理过程中引入错误的概率。本质上说，重构就是在代码写好之后改进它的设计。重构和性能优化有相同点，也有不同点。相同的地方是它们都在不改变程序功能的情况下修改代码；不同的地方是重构为了让代码变得更加容易理解、易于修改，性能优化则是为了让程序运行得更快。这里还得重点提一句，由于侧重点不同
2021-01-22 12:03:50
220
原创 带你入门前端工程（九）：性能优化（二）
运行时性能优化 13 条规则1. 减少重绘重排浏览器渲染过程解析HTML生成DOM树。解析CSS生成CSSOM规则树。将DOM树与CSSOM规则树合并在一起生成渲染树。遍历渲染树开始布局，计算每个节点的位置大小信息。调用 GPU 绘制，合成图层。将渲染树每个节点绘制到屏幕。重排当改变 DOM 元素位置或大小时，会导致浏览器重新生成渲染树，这个过程叫重排。重绘当重新生成渲染树后，就要将渲染树每个节点绘制到屏幕，这个过程叫重绘。不是所有的动作都会导致重排，例如改变字体颜色，只会导致
2021-01-22 12:03:18
177
原创 带你入门前端工程（八）：性能优化（一）
性能优化有多重要？ 国外有很多机构对此做过调查，发现网站的性能对于用户的留存率、转化率有很大的影响，而且非常直接的说提高网站性能就是提高收入。由于性能优化涉及的知识很多，即使把已经过时的性能优化规则摒弃掉，也有不少的内容。所以我将会用两章的内容来讲解如何做性能优化。性能优化分类性能优化主要分为两类：加载时优化运行时优化例如压缩文件、使用 CDN 就属于加载时优化；减少 DOM 操作，使用事件委托属于运行时优化。在解决问题之前，必须先找出问题，否则无从下手。所以在做性能优化之前，最好先调查一
2021-01-22 12:02:35
188
原创 带你入门前端工程（七）：前端监控
什么时候需要监控当你的应用频繁报错找不到原因的时候。需要分析用户兴趣爱好、购买习惯。需要优化程序的时候，可以做监控收集数据，做针对性的优化。需要保证服务可靠性稳定性。如果你的应用符合以上任意一条，就可以对应用实行监控了。监控的作用有两个：事前预警和事后分析。事前预警：提前设置一个阈值，当监控的数据达到阈值时，通过短信或者邮件通知管理员。例如 API 请求数量突然间暴涨，就得进行报警，否则可能会造成服务器宕机。事后分析：通过监控日志文件，分析故障原因和故障发生点。从而做出修改，防止这种情况再
2021-01-22 12:01:55
597
原创 带你入门前端工程（六）：自动化部署
部署是指将代码发布到服务器的一种行为。自动化部署就是使用工具来帮助你实现部署的过程，无需亲自动手。在没有学会自动化部署前，我是这样部署项目的：执行测试 npm run test。构建项目 npm run build。将打包好的文件放到静态服务器。偶尔一次两次还行，如果每次部署项目都这样，就会把很多时间浪费在重复的操作上。所以我们要学会自动部署，彻底解放双手。自动部署（又叫持续部署 Continuous Deployment，英文缩写 CD）一般有两种触发方式：定时触发。监听 webho
2021-01-22 12:01:20
1575
原创 带你入门前端工程（五）：构建工具
构建工具就是指能自动对代码执行检验、转换、压缩等功能的工具。从目前市场上流行的构建工具来看，常见的功能有：代码转换，例如将 ts 文件转换为 js 文件。代码打包，将有关联的代码打包在一起。代码压缩、文件压缩、gzip 压缩等。热加载，修改代码后自动刷新页面。代码检验，检查代码格式是否符合规范。…在开发中使用构建工具，能够大大的提升了开发效率。由于前端构建工具比较多，所以本章选取了其中的三个 webpack、rollup、vite 来进行讲解。webpackwebpack 是目前最火
2021-01-22 12:00:40
486
原创 带你入门前端工程（四）：测试
什么是测试维基百科的定义：在规定的条件下对程序进行操作，以发现程序错误，衡量软件质量，并对其是否能满足设计要求进行评估的过程。也可以这样理解：测试的作用是为了提高代码质量和可维护性。提高代码质量：测试就是找 BUG，找出 BUG，然后解决它。BUG 少了，代码质量自然就高了。可维护性：对现有代码进行修改、新增功能从而造成的成本越低，可维护性就越高。什么时候写测试如果你的程序非常简单，可以不用写测试。例如下面的程序，功能简单，只有十几行代码：function add(a, b) {
2021-01-22 12:00:01
144
原创 带你入门前端工程（三）：前端组件化
在了解模块化、组件化之前，最好先了解一下什么是高内聚，低耦合。它能更好的帮助你理解模块化、组件化。高内聚，低耦合高内聚，低耦合是软件工程中的概念，它是判断代码好坏的一个重要指标。高内聚，就是指一个函数尽量只做一件事。低耦合，就是两个模块之间的关联程度低。仅看文字可能不太好理解，下面来看一个简单的示例。// math.jsexport function add(a, b) { return a + b}export function mul(a, b) { return a *
2021-01-22 11:59:17
278
原创 带你入门前端工程（二）：统一规范
代码规范代码规范是指程序员在编码时要遵守的规则，规范的目的就是为了让程序员编写易于阅读、可维护的代码。试想一下，一个几十万行代码的项目，存在几种不同的代码规范，阅读起来是什么感受？连代码缩进使用空格还是 Tab 都能引发不少程序员的争论，可以说统一代码规范是非常重要的事情。统一代码规范除了刚才所说的两点外，还有其他好处：规范的代码可以促进团队合作规范的代码可以降低维护成本规范的代码有助于 code review（代码审查）养成代码规范的习惯，有助于程序员自身的成长当团队的成员都严格按照代
2021-01-22 11:58:24
597
原创 带你入门前端工程（一）：技术选型
技术选型应该对很多程序员都不陌生了，无论是大到技术框架、编程语言，还是小到工具库的选择，都属于技术选型的范围。个人认为技术选型应该按照以下四个指标进行选择：可控性稳定性适用性易用性由于没有统一的叫法，所以以上四个指标的名称是我自己定的。下面就让我们一起来深入了解一下如何进行技术选型吧。可控性可控性是技术选型中非常重要的一个指标。可控，就是指如果这门技术因为 BUG 对项目造成了影响，团队中有人能够解决它，而不是等待官方修复。作为技术团队的负责人，一定要是能够兜底的那个人。如果团队解决不了，
2021-01-22 11:57:29
873
原创 可视化拖拽组件库一些技术要点原理分析（二）
本文是对《可视化拖拽组件库一些技术要点原理分析》的补充。上一篇文章主要讲解了以下几个功能点：编辑器自定义组件拖拽删除组件、调整图层层级放大缩小撤消、重做组件属性设置吸附预览、保存代码绑定事件绑定动画导入 PSD手机模式现在这篇文章会在此基础上再补充 4 个功能点，分别是：拖拽旋转复制粘贴剪切数据交互发布和上篇文章一样，我已经将新功能的代码更新到了 github：github 项目地址在线预览友善提醒：建议结合源码一起阅读，效果更好（这个 DEMO 使用
2021-01-18 09:16:51
537
原创 可视化拖拽组件库一些技术要点原理分析
本文主要对以下技术要点进行分析：编辑器自定义组件拖拽删除组件、调整图层层级放大缩小撤消、重做组件属性设置吸附预览、保存代码绑定事件绑定动画导入 PSD手机模式为了让本文更加容易理解，我将以上技术要点结合在一起写了一个可视化拖拽组件库 DEMO：github 项目地址在线预览建议结合源码一起阅读，效果更好（这个 DEMO 使用的是 Vue 技术栈）。1. 编辑器先来看一下页面的整体结构。这一节要讲的编辑器其实就是中间的画布。它的作用是：当从左边组件列表拖拽出一
2020-12-21 12:07:13
1634
原创 chrome 开发者工具——前端实用功能总结
1. 查看元素伪类 css 样式例如我想查看元素触发 hover 时的 css 样式。先选中该元素，然后按下图操作：2. 临时增删元素 class3. document.body.contentEditable="true"在控制台输入 document.body.contentEditable="true"，就可以对页面直接进行编辑。4. 查看 placeholder 样式现在可以查看元素的 placeholder 样式了：5. 测试页面性能和 SEO下面是测试报告：参考
2020-11-18 10:53:19
315
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人