警警的博客

原创 [项目总结篇]低代码——流程引擎：BPMNJS&Flowable工作流编辑器与引擎实现

本文介绍了一个支持多灾害模型集成的流程编排系统。针对各课题组编码标准不统一的问题，采用BPMN2国际规范，基于bpmn.js开发可视化流程编辑器，支持拖拽设计动态表单和模型流程。后端选用Flowable流程引擎，通过JSON Schema规则实现模型调用，并利用Python中间层解释执行。系统包含三大核心模块：1）流程编辑器，支持自定义属性面板和BPMN/SVG转换；2）流程引擎，提供模型编排与执行监控；3）布局引擎，实现可视化页面设计和组件交互。此外还集成地图开发模块，封装了基于百度SDK的业务地图渲染功

原创 [全网最全!!!从设计视角查看]BPMN.js流程编辑器底层设计原理

触发import.parse.complete。触发import.parse.start。ElementRegistry注册元素。一、核心类图（继承体系与模块依赖）一、类图（继承关系与核心模块）生成definitions对象。二、架构图（模块依赖关系）二、架构图（功能模块交互）触发import.done。BaseViewer初始化。绑定EventBus事件。BPMN-JS核心架构。Canvas渲染SVG。新增Palette工具。三、XML导入流程图。三、XML导入流程图。

原创 [Vue内容梳理]响应式、虚拟DOM和Diff算法、模板编译、生命周期、实例方法、过滤器、指令和内置组件

在计算属性中直接修改可以吗？不可以会发出警告⚠，通过setter修改会触发响应式。

原创 流程编辑器Bpmn与LogicFlow学习

基于LogicFlow的可扩展架构，实现自定义节点、插件化开发，并结合BPMN 2.0规范适配器，确保流程数据与Camunda引擎兼容”。• 主导LogicFlow框架深度定制，开发20+符合BPMN规范的节点与连线，支持子流程嵌套、事件触发等复杂场景；• 设计LogicFlow自定义节点（如审批节点、网关节点）的View与Model层逻辑，解决复杂交互问题；• 开发BPMN XML与LogicFlow JSON的数据转换适配器，实现与后端流程引擎的无缝对接。

原创 [推荐！前端性能优化全解]从首屏加载、动画卡顿、状态管理、视图管理和技术选型上分析性能

本文从网络层、资源压缩、缓存、代码拆分、资源加载优化、预渲染与预加载、浏览器渲染原理等多个方面，详细探讨了前端性能优化的策略与技术。网络层部分介绍了HTTP协议的迭代与优化，资源压缩则涵盖了构建时与部署时的压缩技术，缓存策略包括文件名哈希与HTTP缓存机制。代码拆分通过动态导入与公共模块提取优化加载效率，资源加载优化则通过预加载、关键CSS内联与异步JS加载提升首屏速度。预渲染与预加载技术进一步优化了页面跳转体验，而浏览器渲染原理则从解析、样式计算、布局、分层、绘制、合成与光栅化等环节深入剖析了渲染流程。

原创 0514得物、0509滴滴面试总结&复盘

目前最欠缺的还是，编码不是很熟，很多都遇到过但是就是写不出来，或者靠背先写一点，然后去加，加的过程没考虑逻辑是不是对的，用滴滴面试官的一句话，就是多刷多练多编码！而且编码总出错，目前编码顺利的就是滴滴一面，你熟悉，100%撕出来题目了！技术栈方面：得物面试要求技术栈为React+Typescript，这周先总结好各个数据结构和算法的Map思维导图，下周开始每日10题复盘刷+项目总结。今天是0514 ，距离秋招也就2个多月了，希望这两个多月，在编码和项目以及八股方面你有更加提升！Jinger，加油！

原创 编译原理AST&以Babel为例进行解读、Webpack中自定义loader与plugin

编译原理：高级语言->机器（浏览器）能识别语言 | AST处理过程：1. 词法分析(Lexical Analysis)2.语法分析(Syntax Analysis)3.转换与优化4. 代码生成 | AST在前端应用：1. Vue的模板编译 2.ES6与Babel 3.其他工具链 4.Tree-shaking中的应用 |自定义Loader、Plugin：`Loader` 主要用于对模块的源代码进行转换处理（函数），而 `Plugin` 则用于扩展 Webpack 的打包能力与生命周期管理（类）

原创 [超详细，推荐！！！]前端性能优化策略详解

1️⃣ ​​核心指标优化​​：关注FCP（首次内容渲染）、LCP（最大内容渲染）、CLS（布局稳定性）等首屏性能指标，通过压缩资源（图片WebP/字体子集化）、代码拆分、懒加载等减少首屏资源体积，目标FCP<1.8秒、LCP<2.5秒。2️⃣ ​​加载策略升级​​：预加载关键资源（CSS/字体）、服务端渲染（SSR）及静态生成（SSG）加速内容呈现；针对动画卡顿，减少主线程阻塞（Web Worker拆分任务）、启用GPU加速（transform/opacity）。3️⃣ ​​框架级优化​​：

原创 个人网站versionI正式上线了！Personal Website for Jing Liu

本系统采用​​React+TypeScript​​为核心的前端工程化方案，集成​​TailwindCSS+Ant Design​​构建现代化UI体系，融合​​ECharts+Three.js+Canvas​​实现数据可视化与动态交互，并接入​​百度地图API​​拓展地理信息服务，形成技术栈完备、响应式的个人网站解决方案。

原创 前端亮点：大文件上传技术详解及问题解析

• 优化：通过Web Worker多线程计算，避免主线程阻塞（如5GB文件Hash计算可缩短至3.5秒）。• 原理：前端计算文件Hash后，请求服务端校验是否存在相同Hash文件，存在则直接返回URL。• 策略：限制并发数（通常6个并发，避免浏览器TCP连接限制），失败分片自动重试。• 服务端：记录分片Hash和位置（如Redis临时存储），合并时校验完整性。• 容错机制：指数退避重试策略（如首次1秒后重试，第二次2秒，第三次4秒）。• 逻辑：服务端按分片索引顺序合并文件，避免顺序错乱导致文件损坏。

原创 IntersectionObserver&滚动动画、懒加载、虚拟列表等应用场景&代码实现

IntersectionObserver到阈值时触发回调。• 交叉区域计算：浏览器内部自动计算目标元素与根元素的交集区域，无需开发者手动处理几何信息。• 浏览器级优化：由浏览器底层实现，自动优化计算逻辑，避免主线程阻塞。• 按需执行：元素进入视口时播放 CSS/JS 动画，离开时暂停。• 动态渲染：仅渲染可视区域内的列表项，减少 DOM 节点数量。• 精准监测：记录广告元素进入视口的时间与比例，用于计费分析。：当前是否与根元素交叉（最常用属性）。

原创 项目难点&亮点

若依项目的核心挑战在于如何高效整合前后端技术栈，实现灵活可扩展的权限管理，同时保障安全性和性能。开发者需深入理解 Spring Security、Vue 组件化、MyBatis 拦截器等核心技术点，并结合实际业务需求进行定制化开发。

原创 前端性能优化的全方位方案【待进一步结合项目】

优化方向关键技术点收益指标代码质量Tree Shaking/事件委托JS体积减少30%-50%构建优化代码分割/图片压缩构建时间缩短40%网络传输CDN/Gzip压缩/HTTP2首屏加载提速50%-70%渲染性能懒加载/GPU加速FPS提升至60+缓存策略Service Worker/浏览器缓存重复访问速度提升90%扩展建议使用Web Worker处理复杂计算（网页4/8）采用Brotli压缩替代Gzip（网页6）实现虚拟滚动处理长列表（网页8）

原创 React中Element&Fiber对象、WorkInProgress双缓存、Reconcile&Render&Commit、第一次挂载过程详解

React 的三阶段模型（更新、渲染、提交）清晰地分离了调度逻辑、UI 计算和 DOM 操作，结合 Fiber 架构和时间切片机制，使得 React 能够高效地响应用户交互，同时保持良好的性能表现和一致性。FiberRootNode 是全局调度的核心，而 HostRootFiber 是组件树的根节点。两者紧密配合，共同完成 React 的渲染和更新流程。Fiber 是 React 内部实现的一部分，开发者通常无需直接操作，而是通过 声明式 API（如 JSX 和 hooks）间接影响 Fiber构建与更新

原创 2024Jinger的前端学习内容总结——前端学习路线（超全）

数据结构与算法、HTML、CSS、Javascript基础、高级以及ES6、Vue2&Vue3、React、Node、前端可视化Cesium|Three

原创 城市灾害应急管理集成系统——系统介绍

本系统是一款集3D GIS、无人机技术、视频GIS、AI GIS 和深度学习算法等技术于一体的仿真模拟与应急预案平台。系统面向多主体（机构领导、领域专家、救援人员与普通公众等）、灾害发展不同时期（灾前、灾中和灾后），支持内涝、团雾、火灾、传染病和地面塌陷五种灾害场景仿真模拟和应急预案，一定程度上能支撑灾前预警预报、灾中资源协调以及灾后救援评估的决策制定。

原创 前端项目【本科期间】

技术栈：Vue.js|Vuex|ElemntUI|Axios|Cesium|Echarts|Three|Webpack。5.2首页标题列表组件：“栏目管理”》首页》首页栏目主模板》操作下的设置资料来源；2.内容上传：复制上传静态网页到博达网站群（HTML、CSS、JS和相关资料等等）；4.绑定相关组件： 包括系统推荐组件、基本组件和栏目资料组件等组件；5.1导航条内容设置：在“栏目管理”中新建所需栏目；3.新建页面模板：新建首页、列表页和内容页的页面模板；**说明：最初版本为纯HTML页面，无框架**

原创 城市灾害应急管理集成系统

城市灾害应急管理集成平台

原创 【WebGIS附源码】从设计层面设计系统

概念模型的E-R图到逻辑模型的映射规则：（1）实体转换：将E-R图中的每个实体转换为一个关系表（或称为关系模式)、实体的属性成为关系表的列(字段)、实体的主键成为关系表的主键。（2）关系的转换：一对一关系通常不需要创建一个新的关系表来表示这种关系，而是可以在其中一个实体的关系表中添加另一个实体的主键作为外键、一对多关系:在"多"的一方的关系表中添加“一"的一方的主键作为外键、多对多关系:必须创建一个新的关系表来表示这种关系，该表至少包含两个外键，分别指向两个相关实体的主键，并可以包含描述关系的属性。

原创 从客户端WebAPI视角下解读前端学习

地图相关：openlayer、leaflets、ArcGIS API for JS、高德、腾讯、百度...应用程序接口（API，Application Programming Interface）是。它们抽象了复杂的代码，并提供一些简单的接口规则直接使用。（绘图Canvas->WebGL,2D 3D）（控制浏览器示意图显示内容）JavaScript 库。JavaScript 库。

原创 WebGIS下——焕新

WebGIS入门_GISer_Jing的博客-CSDN博客在WebGIS入门篇，前端使用了纯HTML、CSS、Javascript、Jquery较为传统方式构建，服务器借助ArcGIS Srver发布相关地理服务且涉及到GIS，自行构建后端且涉及到数据库。So,WebGIS进阶来了！！！！本文大概是关于：Vue2+Cesium+Openlayers+Java+MySQL+Tomcat。

原创 Spring核心总结

Spring核心——IOC/DI、AOP及Spring事务

原创 工作流入门这篇就够了！

本文记录自己这大半年老师让学习的工作流，因此本文也是以作者自身学习工作流的过程进行介绍。BPMN->工作设计器->工作流引擎

原创 博达网站群的入门级指南

笔者初次主导接手一个网站建设项目，该项目是基于博达网站群的Web网站建设。小挣了几千元~~ 在建设过程中，笔者发现网上相关资源虽然还比较多，但是很散，所以决定写一篇入门级的文章供参考。 资源推荐：博达网站：http://www.vsbclub.com/和B站上博达网站建设的相关视频。 文章内容和资源如有侵权请联系笔者，笔者将删除相关内容或整篇文章.........

原创 WebGIS入门

1.关于WebGISWebGIS（网络地理信息系统）是指工作在Web网上的GIS,是传统的GIS在网络上的延伸和发展，具有传统GIS的特点，可以实现空间数据的检索、查询、制图输出、编辑等GIS基本功能，同时也是Internet 上地理信息发布、共享和交流协作的基础。互联网深刻地改变了我们的工作和生活,也改变了地理信息系统,两者的融合产生了WebGIS。随着互联网和移动互联网的迅速普及,WebGIS也迅速发展,以其广泛的应用价值和独特的魅力,成为现代生活的日常工具和现代社会的技术支柱。近些年来, We

原创 [AI]主流大模型、ChatGPT&Deepseek、国内免费大模型API服务推荐（支持LangChain.js集成）

集成多模型的核心价值在于​​场景适配最大化​​与​​资源效率最优化​​。例如，前端开发中可通过DeepSeek快速生成中文交互逻辑，调用ChatGPT优化国际化文案，结合通义千问实现多模态内容渲染。这种混合策略既能满足复杂业务需求，又能通过动态调度降低综合成本，是当前AI应用开发的必然趋势。

原创 React Hooks底层执行逻辑详解、自定义Hooks、Fiber&Scheduler

在 class 组件中，状态逻辑分散、复用困难（通过 HOC、render props 实现）。Hooks 通过“**函数组件 + 闭包 + 顺序调用**”机制，解决了这些问题，让函数组件拥有“类”的能力。React 内部为每个组件实例维护一个 **“Hook 调用栈”**（本质上是一个数组），Hooks 的执行顺序严格依赖于你在函数中**书写的顺序**。

原创 Vue3和React中插件化设计思想

前端插件化设计思想旨在提升应用的可扩展性、可维护性和模块化程度。这种思想不仅体现在框架（如 Vue、React）中，也广泛应用于构建工具（如 Webpack、Vite）以及 UI 库（如 Element Plus、Ant Design）中。下面将从概念入手，分别说明其在前端框架、构建工具和 UI 库中的体现和实现方式。

原创 前端[插件化]设计思想_Vue、React、Webpack、Vite、Element Plus、Ant Design

插件化的核心思想是：将系统的某些功能抽象成可插拔的模块，通过标准接口实现对核心系统功能的扩展或增强，而不需要修改核心代码。场景核心机制Vue+ 全局注册 + 依赖注入ReactWebpackTapable（事件钩子系统）ViteRollup 插件 + Vite 自定义钩子UI 库组件解耦设计 + 注册机制（use()等）

原创 DiagramJS设计原理解读（二）

Diagram.js 是一个基于`依赖注入`的图表/图形库核心组件，它使用 `didi 库`来实现模块化和依赖管理。模块化设计：diagram.js 采用模块化设计，通过`依赖注入`系统管理各个组件，确保`松耦合和高可扩展性`。事件驱动：使用 `EventBus 处理渲染事件`，协调 `Canvas、GraphicsFactory 和 Renderer` 的交互。渲染流程：`Canvas 管理 SVG 画布，GraphicsFactory 创建和更新图形元素，DefaultRenderer 实现具体绘制逻辑

原创 前端面试题目整理（一）

原创 Typescript中infer关键字详解——基本原理+应用场景

infer是 TypeScript 类型系统的核心工具之一，通过动态类型推断大幅提升了类型操作的灵活性。其典型应用包括：• 函数类型解构（参数、返回值）；• 容器类型提取（数组、Promise）；• 字符串模板处理；• 递归与联合类型操作。结合具体场景合理使用infer，可以显著增强代码的类型安全性和可维护性。更多高级用法可参考 TypeScript 官方文档或类型工具库（如在 TypeScript 中，infer。

原创 Typescript总结篇——配置TS、基础知识（类型、接口、类型别名、泛型、extends&infer关键字)

主要包括（target（编译输出的JS版本）、outDir输出路径、rootDir（根目录，通常为./src）、lib(编译过程依赖库，如dom、es6）、include&exclude需/无需编译的文件夹、paths(类似alias设置)）等。：包括 number、string、boolean、null、undefined、symbol、bigint 等。定义对象的结构，如属性和方法，用于定于定义对象结构，可指定对象（对象->类->抽象类(为类型起一个新名字，可用于联合类型、交叉类型等。

原创 前端IOC控制反转与DI依赖注入并以didi JS DI库以及diagramJS插件机制（基于DI实现）

依赖注入是一种设计模式，它将对象的创建和依赖关系的管理从业务逻辑中分离出来。依赖注入模式：通过构造函数或方法参数显式传递依赖关系依赖注入框架：自动管理对象创建和依赖关系。

原创 DiagramJS——BPMNJS顶层类，事件总线、元素注册和图形工厂（绘图逻辑）

Diagram.js 是一个基于依赖注入的图表/图形库核心组件，它使用didi 库来实现模块化和依赖管理。- Canvas：绘图画布- ElementRegistry：元素注册表- ElementFactory：元素工厂- EventBus：事件总线- GraphicsFactory：图形工厂

原创 Canvas &SVG &BpmnJS编辑器中Canvas与SVG职能详解

• Canvas：优先用于动态、高性能场景（如游戏帧渲染），需手动管理图形状态。• SVG：适合静态或交互复杂的矢量图形（如可缩放地图），开发效率高。两者可结合使用，例如用Canvas渲染动态背景，SVG叠加交互控件。Canvas 的深层次理解与高级应用需要从底层原理、性能优化、复杂交互、跨领域融合等多个维度展开。

原创 BPMN.js编辑器设计器与属性面板数据交互

v-model: xmlString // 双向绑定的XML数据。+events: Array<String> // 监听的事件类型列表。+ref: processDesigner // 组件实例引用。+prefix: String // 流程引擎前缀。+processId: String // 流程ID。+processName: String // 流程名称。

原创 Hooks实现原理与自定义Hooks

Hooks 只能在函数组件或自定义 Hook 的顶层调用，不能在普通函数、条件语句或循环中调用。

原创 [附Pdf格式思维导图]React基础知识梳理

原创 CSS-in-JS：现代前端样式管理的革新

CSS-in-JS 通过将样式与组件逻辑紧密结合，解决了传统 CSS 在组件化开发中面临的诸多问题，如样式冲突、动态样式难以实现、样式复用性差等。在 React 和 Vue 中，开发者可以根据项目需求选择合适的 CSS-in-JS 库，如 styled-components、Emotion、vue-styled-components、vue-emotion 等。随着前端技术的发展，CSS-in-JS 将在组件化开发中发挥越来越重要的作用。希望这篇文章能帮助你更好地理解 CSS-in-JS 技术。