- 博客(1098)
- 资源 (9)
- 收藏
- 关注
RSS订阅
原创 【总结】LLM 对话框组件项目
本文介绍了AIGC时代基于对话框的交互系统设计与实现方案。系统采用分层架构集成DeepSeek等大模型API，通过OAuth2协议实现安全认证，并使用SSE协议支持流式数据传输。前端基于React+TS开发了可复用对话框组件，移动端采用React Native Expo跨平台框架实现85%代码复用。系统还展示了Agent搭建、Coze API集成等关键技术，并计划通过LangChain框架进一步扩展功能。通过模块化设计和标准化协议的应用，该系统实现了高效、安全的人机交互体验。
2025-06-15 13:27:24
1252
1
原创 [最全总结]城市灾害应急管理系统
在智慧城市战略背景下，项目面向内涝、团雾和火灾等灾害，开发了集灾害`模型集成模拟、场景可视化与应急预案管理`于一体的系统，系统各子模块进行软件功能测试，测试结果稳定可靠。
2025-06-07 17:34:29
878
1
原创 [总结]前端性能指标分析、性能监控与分析、Lighthouse性能评分分析
前端性能指标分析旨在评估网页在加载速度、交互响应和视觉稳定性等方面的表现。常见核心指标包括 LCP（最大内容绘制）、FID（首次输入延迟）和 CLS（累计布局偏移），用于衡量用户体验。性能监控则通过埋点、Web Vitals API 或 Performance API 实时采集数据，识别性能瓶颈。Lighthouse 是 Google 提供的开源工具，可自动评估页面性能、可访问性、SEO 等，生成详细评分和优化建议，帮助开发者持续改进前端质量。
2025-06-01 15:49:37
1564
原创 BPMNJS自定义功能_Palette|Renderer|ContextPad|PropertyPanelPropertyPanel
若你不想使用已有的并在⚠️ 确保该 CSS 文件被引入到页面或项目中。在 bpmn-js 中，自定义 Renderer 是实现流程图元素个性化渲染的关键方式。通过继承或，你可以自定义节点的外观、尺寸、颜色、图标等属性。以下是实现自定义 Renderer 的基本步骤：(腾讯云创建自定义 Renderer 类新建一个类继承自，并实现drawShape// 仅渲染特定类型的元素，例如任务节点rx: 10,ry: 10,});
2025-05-26 09:26:49
1028
1
原创 [项目总结篇]低代码——流程引擎：BPMNJS&Flowable工作流编辑器与引擎实现
本文介绍了一个支持多灾害模型集成的流程编排系统。针对各课题组编码标准不统一的问题，采用BPMN2国际规范，基于bpmn.js开发可视化流程编辑器，支持拖拽设计动态表单和模型流程。后端选用Flowable流程引擎，通过JSON Schema规则实现模型调用，并利用Python中间层解释执行。系统包含三大核心模块：1）流程编辑器，支持自定义属性面板和BPMN/SVG转换；2）流程引擎，提供模型编排与执行监控；3）布局引擎，实现可视化页面设计和组件交互。此外还集成地图开发模块，封装了基于百度SDK的业务地图渲染功
2025-05-24 12:26:01
1856
原创 [全网最全!!!从设计视角查看]BPMN.js流程编辑器底层设计原理
触发import.parse.complete。触发import.parse.start。ElementRegistry注册元素。一、核心类图（继承体系与模块依赖）一、类图（继承关系与核心模块）生成definitions对象。二、架构图（模块依赖关系）二、架构图（功能模块交互）触发import.done。BaseViewer初始化。绑定EventBus事件。BPMN-JS核心架构。Canvas渲染SVG。新增Palette工具。三、XML导入流程图。三、XML导入流程图。
2025-05-20 17:21:07
932
原创 [Vue内容梳理]响应式、虚拟DOM和Diff算法、模板编译、生命周期、实例方法、过滤器、指令和内置组件
在计算属性中直接修改可以吗？不可以会发出警告⚠，通过setter修改会触发响应式。
2025-05-16 09:55:04
1453
原创 流程编辑器Bpmn与LogicFlow学习
基于LogicFlow的可扩展架构，实现自定义节点、插件化开发，并结合BPMN 2.0规范适配器，确保流程数据与Camunda引擎兼容”。• 主导LogicFlow框架深度定制，开发20+符合BPMN规范的节点与连线，支持子流程嵌套、事件触发等复杂场景；• 设计LogicFlow自定义节点（如审批节点、网关节点）的View与Model层逻辑，解决复杂交互问题；• 开发BPMN XML与LogicFlow JSON的数据转换适配器，实现与后端流程引擎的无缝对接。
2025-05-15 14:21:56
926
原创 [推荐！前端性能优化全解]从首屏加载、动画卡顿、状态管理、视图管理和技术选型上分析性能
本文从网络层、资源压缩、缓存、代码拆分、资源加载优化、预渲染与预加载、浏览器渲染原理等多个方面，详细探讨了前端性能优化的策略与技术。网络层部分介绍了HTTP协议的迭代与优化，资源压缩则涵盖了构建时与部署时的压缩技术，缓存策略包括文件名哈希与HTTP缓存机制。代码拆分通过动态导入与公共模块提取优化加载效率，资源加载优化则通过预加载、关键CSS内联与异步JS加载提升首屏速度。预渲染与预加载技术进一步优化了页面跳转体验，而浏览器渲染原理则从解析、样式计算、布局、分层、绘制、合成与光栅化等环节深入剖析了渲染流程。
2025-05-14 20:48:47
1190
原创 0514得物、0509滴滴面试总结&复盘
目前最欠缺的还是，编码不是很熟，很多都遇到过但是就是写不出来，或者靠背先写一点，然后去加，加的过程没考虑逻辑是不是对的，用滴滴面试官的一句话，就是多刷多练多编码！而且编码总出错，目前编码顺利的就是滴滴一面，你熟悉，100%撕出来题目了！技术栈方面：得物面试要求技术栈为React+Typescript，这周先总结好各个数据结构和算法的Map思维导图，下周开始每日10题复盘刷+项目总结。今天是0514 ，距离秋招也就2个多月了，希望这两个多月，在编码和项目以及八股方面你有更加提升！Jinger，加油！
2025-05-14 18:59:21
875
原创 编译原理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 的打包能力与生命周期管理（类）
2025-05-12 21:19:28
1476
原创 个人网站versionI正式上线了！Personal Website for Jing Liu
本系统采用React+TypeScript为核心的前端工程化方案，集成TailwindCSS+Ant Design构建现代化UI体系，融合ECharts+Three.js+Canvas实现数据可视化与动态交互，并接入百度地图API拓展地理信息服务，形成技术栈完备、响应式的个人网站解决方案。
2025-05-07 16:02:58
1153
原创 前端亮点：大文件上传技术详解及问题解析
• 优化：通过Web Worker多线程计算，避免主线程阻塞（如5GB文件Hash计算可缩短至3.5秒）。• 原理：前端计算文件Hash后，请求服务端校验是否存在相同Hash文件，存在则直接返回URL。• 策略：限制并发数（通常6个并发，避免浏览器TCP连接限制），失败分片自动重试。• 服务端：记录分片Hash和位置（如Redis临时存储），合并时校验完整性。• 容错机制：指数退避重试策略（如首次1秒后重试，第二次2秒，第三次4秒）。• 逻辑：服务端按分片索引顺序合并文件，避免顺序错乱导致文件损坏。
2025-04-20 16:18:04
1296
原创 IntersectionObserver&滚动动画、懒加载、虚拟列表等应用场景&代码实现
IntersectionObserver到阈值时触发回调。• 交叉区域计算：浏览器内部自动计算目标元素与根元素的交集区域，无需开发者手动处理几何信息。• 浏览器级优化：由浏览器底层实现，自动优化计算逻辑，避免主线程阻塞。• 按需执行：元素进入视口时播放 CSS/JS 动画，离开时暂停。• 动态渲染：仅渲染可视区域内的列表项，减少 DOM 节点数量。• 精准监测：记录广告元素进入视口的时间与比例，用于计费分析。：当前是否与根元素交叉（最常用属性）。
2025-04-20 08:30:00
1269
原创 项目难点&亮点
若依项目的核心挑战在于如何高效整合前后端技术栈，实现灵活可扩展的权限管理，同时保障安全性和性能。开发者需深入理解 Spring Security、Vue 组件化、MyBatis 拦截器等核心技术点，并结合实际业务需求进行定制化开发。
2025-04-07 19:54:34
1330
原创 React中Element&Fiber对象、WorkInProgress双缓存、Reconcile&Render&Commit、第一次挂载过程详解
React 的三阶段模型（更新、渲染、提交）清晰地分离了调度逻辑、UI 计算和 DOM 操作，结合 Fiber 架构和时间切片机制，使得 React 能够高效地响应用户交互，同时保持良好的性能表现和一致性。FiberRootNode 是全局调度的核心，而 HostRootFiber 是组件树的根节点。两者紧密配合，共同完成 React 的渲染和更新流程。Fiber 是 React 内部实现的一部分，开发者通常无需直接操作，而是通过 声明式 API（如 JSX 和 hooks）间接影响 Fiber构建与更新
2025-01-13 20:25:48
1418
原创 2024Jinger的前端学习内容总结——前端学习路线（超全）
数据结构与算法、HTML、CSS、Javascript基础、高级以及ES6、Vue2&Vue3、React、Node、前端可视化Cesium|Three
2024-12-31 22:13:44
1029
原创 城市灾害应急管理集成系统——系统介绍
本系统是一款集3D GIS、无人机技术、视频GIS、AI GIS 和深度学习算法等技术于一体的仿真模拟与应急预案平台。系统面向多主体（机构领导、领域专家、救援人员与普通公众等）、灾害发展不同时期（灾前、灾中和灾后），支持内涝、团雾、火灾、传染病和地面塌陷五种灾害场景仿真模拟和应急预案，一定程度上能支撑灾前预警预报、灾中资源协调以及灾后救援评估的决策制定。
2024-12-21 15:36:41
1079
原创 前端项目【本科期间】
技术栈：Vue.js|Vuex|ElemntUI|Axios|Cesium|Echarts|Three|Webpack。5.2首页标题列表组件：“栏目管理”》首页》首页栏目主模板》操作下的设置资料来源；2.内容上传：复制上传静态网页到博达网站群（HTML、CSS、JS和相关资料等等）；4.绑定相关组件： 包括系统推荐组件、基本组件和栏目资料组件等组件；5.1导航条内容设置：在“栏目管理”中新建所需栏目；3.新建页面模板：新建首页、列表页和内容页的页面模板；**说明：最初版本为纯HTML页面，无框架**
2024-10-24 21:45:53
646
原创 工作流入门这篇就够了！
本文记录自己这大半年老师让学习的工作流，因此本文也是以作者自身学习工作流的过程进行介绍。BPMN->工作设计器->工作流引擎
2024-01-03 23:07:54
8745
原创 博达网站群的入门级指南
笔者初次主导接手一个网站建设项目，该项目是基于博达网站群的Web网站建设。小挣了几千元~~ 在建设过程中，笔者发现网上相关资源虽然还比较多，但是很散，所以决定写一篇入门级的文章供参考。 资源推荐：博达网站：http://www.vsbclub.com/和B站上博达网站建设的相关视频。 文章内容和资源如有侵权请联系笔者，笔者将删除相关内容或整篇文章.........
2022-06-19 14:08:25
8694
5
原创 WebGIS入门
1.关于WebGISWebGIS（网络地理信息系统）是指工作在Web网上的GIS,是传统的GIS在网络上的延伸和发展，具有传统GIS的特点，可以实现空间数据的检索、查询、制图输出、编辑等GIS基本功能，同时也是Internet 上地理信息发布、共享和交流协作的基础。互联网深刻地改变了我们的工作和生活,也改变了地理信息系统,两者的融合产生了WebGIS。随着互联网和移动互联网的迅速普及,WebGIS也迅速发展,以其广泛的应用价值和独特的魅力,成为现代生活的日常工具和现代社会的技术支柱。近些年来, We
2022-01-02 14:55:06
18532
原创 Node.js的Transform 流
Node.js Transform 流是双工流的一种特殊类型，既能接收数据又能输出数据，充当数据处理器/管道中间件的角色。它以小块数据形式处理，避免内存溢出，适用于大文件处理、网络数据流等场景。核心价值在于高效处理大量数据，支持实时转换和模块化组合。主要应用包括数据压缩加密、格式转换、前端构建工具等。实现时需继承stream.Transform类，重写_transform方法处理数据，并通过this.push输出。Transform流体现了Node.js异步处理机制的优势，是处理大规模数据的关键技术。
2025-07-21 20:51:57
464
原创 0722滴滴
面试官您好！我是刘警，南京师范大学26届硕士，研究方向为Web3D与前后端&GIS开发。个人因热爱前端技术，持续学习并输出技术博客，积累CSDN访问量140万+、粉丝2.5万+。我的经历可分为三部分：第一，实习方面，近两个月在得物APP前端平台广告投放部实习，参与B端落地页低代码编辑器的开发，并基于Next 实现C端落地页混合渲染方案优化性能，实现首屏秒开率提升50%+；同时独立对接产品与后端需求，完成需求迭代上线及文档总结，获团队认可。
2025-07-21 17:34:19
585
原创 Flowable工作流结果实时返回方案
摘要： 后端Flowable工作流处理完成后，结果返回给前端Bpmn.js的方式主要有两种： 前端轮询查询：通过定期查询historyInstance获取流程状态，实现简单但实时性差，增加服务器压力。 后端主动推送：通过WebSocket、SSE等技术实时推送结果，实时性强、用户体验好，但实现较复杂。 推荐方案：优先采用WebSocket实现后端主动推送，在Flowable服务任务中触发消息推送，前端监听更新，兼顾实时性与用户体验。两种方式需根据业务场景的实时性需求和开发成本权衡选择。
2025-07-21 17:33:43
482
原创 JavaScript 中Object、Array 和 String的常用方法
JavaScript 中 Object、Array、String 常用方法总结： 📊 方法对照表 类型 核心方法 典型应用场景 Object keys()/values()/entries() 对象遍历与转换 assign()/freeze() 对象拷贝与不可变处理 动态属性 obj[key] 动态键名操作 Array map()/filter()/reduce() 数据转换与聚合 find()/includes() 元素搜索 splice()/toSpliced() 安全增删元素 String slic
2025-07-20 19:38:40
447
原创 Vue3 Proxy 数据劫持为什么比Object.defineProperty() Vue2数据劫持的性能更好
JavaScript Proxy 的底层原理与懒加载机制 Proxy 是 JavaScript 的元编程工具，通过拦截对象基本操作实现自定义行为。其核心原理是重定向内部方法（如 [[Get]]、[[Set]]）到 handler 陷阱函数，结合 Reflect 实现默认行为调用。Vue3 的响应式系统利用 Proxy 实现关键优化： 懒加载机制 - 仅在访问嵌套属性时才创建子代理，避免初始化时的全量递归 性能优势 - 相比 Object.defineProperty，支持动态属性拦截和数组索引修改 实现要点
2025-07-20 19:22:16
1133
原创 Vue 3中reactive、ref、watchEffect和watch的底层原理及核心区别解析
例如：操作嵌套表单用 reactive + watch 深度监听；• 依赖收集：执行过程中访问的响应式属性（如 ref.value 或 reactive 属性），自动触发其 track 逻辑，建立依赖关系。• 依赖来源：显式指定监听源（ref、reactive属性、getter函数或数组），内部调用 track 绑定特定属性。• 深度响应：嵌套对象属性访问时，递归调用 reactive 创建子代理，实现全对象树的响应式。• reactive：管理复杂嵌套状态（如表单对象、配置树），避免频繁整体替换。
2025-07-20 10:50:17
676
原创 浏览器渲染原理——计算属性和布局过程常考内容
浏览器渲染管线中的样式计算和布局过程解析：样式计算阶段将CSS规则应用到DOM节点，通过CSSOM构建、层叠继承和单位换算生成最终样式；布局阶段则计算每个节点的几何信息，处理不同布局模式并生成布局树。JS操作可能触发强制同步布局，需通过批量操作和requestAnimationFrame优化性能。关键优化策略包括减少重排、简化CSS选择器和使用GPU加速属性，以实现流畅的60fps渲染。
2025-07-19 18:58:50
1231
原创 CSS-in-JS&Vue的解决方案
Vue处理组件化样式管理的核心方案：1)使用scoped CSS实现样式隔离，通过data-v属性选择器避免冲突；2)通过v-bind动态绑定class/style实现响应式样式；3)利用计算属性封装复杂样式逻辑。复用性方面，结合单文件组件、组合式API、CSS预处理器实现。官方推荐scoped CSS+响应式绑定方案，CSS-in-JS可作为补充。性能优化建议使用计算属性，主题切换可采用CSS变量或Provide/Inject方案。
2025-07-19 17:00:21
945
原创 Javascript进程和线程通信
JavaScript中的进程通信（IPC）和线程通信技术是实现高性能应用的关键。IPC通过Web Workers或Node.js的child_process模块进行跨进程通信，适合独立任务处理；线程通信则利用SharedArrayBuffer实现内存共享，适合CPU密集型计算。浏览器端常用Web Workers处理耗时任务，Node.js则结合cluster和worker_threads模块提升并发性能。开发中应根据任务特性选择合适方案：进程通信保障安全隔离，线程通信提升执行效率，二者配合能充分发挥多核CP
2025-07-19 16:58:25
764
原创 WebView&Native详解
提示：实际开发中建议封装统一通信库（如 JsBridge），屏蔽平台差异，参考开源实现 DSBridge(https://github.com/wendux/DSBridge-Android)。• 缓存机制：本地缓存 JS 文件，避免重复加载（如 webView.loadUrl(“file:///android_asset/app.html”)）。• JS 调用 Native：Web 页面触发约定事件（如方法调用、URL 跳转），Native 层拦截并解析参数执行对应逻辑。
2025-07-18 11:26:54
710
原创 前端流式渲染&流式SSR详解
流式渲染通过分块传输与渐进式渲染优化了实时数据场景的用户体验，而流式SSR进一步结合了服务端渲染的SEO优势与低延迟特性。◦ 流式渲染：数据通过分块传输（Chunked Transfer Encoding）逐步发送到客户端，实现渐进式渲染，减少首屏等待时间。◦ 路由同构：使用react-router-dom的StaticRouter（服务端）与BrowserRouter（客户端）共享路由配置。◦ 流式SSR：服务端将HTML分块流式传输，浏览器逐步渲染，无需等待完整页面生成。
2025-07-18 11:23:16
841
原创 研二Last Day
研二（含再次）解锁了🔓：北京、香港、上海、杭州、深圳（仅路过，待进一步解锁）、武汉（仅路过）& 镇江。㊗️接下来所剩不多的校园生活会更精彩！感恩、幸运、荣幸遇见、珍惜&满足。挺好的～好的坏的都是新的心跳💓。can't stop won't stop!!!继续冲击互联网大厂！ByteDance!Pinduoduo!不过，说出来也好。加油，相信总有一个是适合你的！
2025-07-17 23:03:57
337
原创 跨域通信&inframe高级
各方案详细配置及代码示例可参考：跨域解决方案对比(https://developer.aliyun.com/article/1627998)、CORS深度配置(https://article.juejin.cn/post/7475367833531957285)。• 原理：主域相同、子域不同时（如 a.example.com 与 b.example.com），双方页面设置 document.domain = ‘example.com’，使iframe内嵌页面与父页同源。
2025-07-17 18:52:44
614
原创 inframe与远程组件调用（来自AI）
• 沙盒隔离：广告、支付网关（如 PayPal）、代码编辑器（CodePen），防止主页面被恶意脚本影响。• 定义：从远程服务器动态加载 JS 代码，解析并注册为可执行组件（如 React/Vue 组件）。• 微前端 + iframe：核心子应用用远程组件，第三方工具（如监控插件）用 iframe 隔离。• 远程组件 是“灵活的拼装者”，适合动态更新与跨项目复用，但需解决安全与平台限制。• 微前端架构：独立部署子应用，动态加载组件（如 Qiankun 框架）。
2025-07-17 18:37:09
512
原创 Monorepo+Pnpm+Turborepo
Monorepo技术实践指南 本文系统介绍了现代前端工程中的Monorepo技术方案。Monorepo通过单一仓库管理多个项目，具有代码共享便捷、依赖统一等优势，但也面临仓库膨胀、权限复杂等挑战。与Multi-repo相比，Monorepo更适合强关联项目。实践方案推荐使用pnpm管理依赖，其工作区机制和硬链接存储能有效解决依赖冲突问题。构建优化方面，Turborepo通过增量构建和任务依赖图显著提升效率，其缓存机制可本地/远程存储构建结果。团队协作时，建议采用目录级权限控制、变更集审核等策略。整体而言，合
2025-07-16 20:04:30
858
原创 拼多多笔试题目二
摘要： 拼多多前端笔试涵盖选择题、编程题和简答题。选择题考察基础概念，如DOM操作（createNode无效）、null与undefined区别（null表示无对象，undefined为未赋值）。编程题包括三数求和（双指针法）和文本标红处理（遍历替换）。简答题涉及闭包（访问外部变量，需防内存泄漏）和重绘与重排（重绘仅外观更新，重排需重新布局，后者更耗性能）。解题需掌握JavaScript核心语法、算法及浏览器渲染机制。
2025-07-15 13:24:19
420
【WebGIS系统古村古镇数字化平台源码】古村古镇数字化平台，作者热门文章[WebGIS入门、WebGIS期末作业等]的源码
2024-07-17
Lisflood-FP 5软件包
2024-03-01
水文模型SWMM和Lisflood
2024-01-26
基于博达网站建设群的网站搭建
2022-06-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人