- 博客(139)
- 收藏
- 关注
RSS订阅原创 爆火的 OpenClaw 到底怎么用？完整安装与使用教程
OpenClaw 的核心架构和设计理念，可以形象地理解为 “一个拥有海量触手（渠道）和强大身体（执行端）的中央大脑”。它的工作原理是，你可以在任何聊天软件上像和朋友聊天一样给它发消息，而它则在你自己的电脑上思考、决策并替你执行各种任务
2026-03-10 11:06:47
623
原创 虚拟滚动 + 分页 + 懒加载：VXETable 性能优化实战总结
本文分享了使用虚拟滚动+分页+懒加载优化大数据表格性能的实战经验。针对中后台系统中常见的上万条数据、动态列等需求场景，对比原生table和VxeGrid的性能表现。通过VxeGrid的虚拟滚动机制，只渲染可视区域内的行，显著减少DOM数量（从30万+降至30-80行），解决了原生table在5000行以上数据时的卡顿问题。文章详细介绍了VxeGrid的配置方法、懒加载实现及性能对比数据，并给出固定行高、减少slot嵌套等进阶优化建议。最终方案支持10000+数据流畅滚动，为企业级大数据表格提供了优化思路。
2026-03-01 10:15:00
1360
原创 前端性能优化实战：用 IntersectionObserver 实现图片懒加载
本文介绍了使用IntersectionObserver API实现图片懒加载的优化方案。相比传统的scroll事件监听，该方案通过浏览器原生异步计算元素可见性，具有性能优异、实现简单等优势。文章详细解析了API的核心参数rootMargin和threshold，并提供了完整的代码实现，包括预加载区域设置和错误处理。通过竞品分析指出，该方案在首屏加载、JS开销、资源释放和代码维护等方面均表现突出，是工程级懒加载的首选方案，适用于商品列表、feed流等多种场景。
2026-02-14 22:55:21
622
原创 前端国际化实战指南：i18n 工程化最佳实践总结
前端国际化（i18n）是一套完整的工程体系，涉及语言环境切换、构建优化、翻译协作等多个环节。本文基于React+Vite/Vue3+Webpack实践经验，总结了一套可落地的国际化方案。核心思路是维护可动态更新的语言状态机，通过i18next等工具实现多语言切换、插值功能和按需加载。重点解决了文案管理混乱、Key冲突校验、翻译协作等痛点，并分析了主流国际化方案的优缺点。最终指出国际化不仅是功能实现，更是工程能力的全面升级，需要建立从UI到SEO的全链路可控体系，形成标准化的协同流程。
2025-12-22 18:01:24
703
原创 IndexedDB 入门指南：浏览器端的高性能本地数据库
摘要 IndexedDB是浏览器内置的NoSQL数据库，支持事务、索引和异步操作，容量可达GB级，解决了localStorage的诸多痛点。它采用版本化数据库设计，通过Object Store存储结构化对象，支持索引查询和游标遍历，所有操作都在事务中完成。IndexedDB适用于PWA离线缓存、大型数据分页等场景，提供高效本地数据管理能力。示例代码展示了数据库初始化、数据增删改查等核心操作，相比传统存储方案具有显著优势。
2025-12-18 17:01:31
747
原创 Flutter 跨平台开发深度指南：从入门到原理全解析
Flutter作为Google推出的跨平台开发框架，通过Dart语言和Skia引擎实现高效渲染，使开发者能用一套代码构建iOS和Android应用。其优势包括热重载提升开发效率、自绘UI保证跨平台一致性，以及良好的原生交互能力。但存在包体积较大、生态系统成熟度不足等痛点。与React Native和Xamarin相比，Flutter在性能、开发体验和UI定制方面表现突出，适合有前端经验的开发者快速实现跨平台开发。总体而言，Flutter是移动应用开发的高效解决方案，尤其适合追求性能与开发效率的项目。
2025-12-17 14:18:36
611
原创 深入探索 WebHID：Web 标准下的硬件交互实现
WebHID API 实现浏览器与硬件设备交互 摘要：WebHID API 让浏览器可以直接与 USB/蓝牙 HID 设备（如键盘、鼠标、游戏手柄）进行交互。本文介绍了 WebHID 的工作原理和核心 API，包括设备请求、授权访问、数据传输等流程。重点讲解了如何通过 inputreport 事件获取键盘按键数据和鼠标移动信息，并提供了相应代码示例。WebHID 技术打破了 Web 应用与硬件设备间的隔阂，为开发更丰富的交互体验提供了可能。 （字数：150）
2025-12-16 17:31:20
763
原创 深入理解 WebRTC：实时音视频通信的原理与实现全流程
WebRTC 实战指南：从原理到代码实现 本文系统介绍了 WebRTC 实时通信技术的核心原理和实现方法。WebRTC 使浏览器无需插件即可实现P2P音视频传输，具有低延迟、端到端加密等优势，广泛应用于视频会议、在线教育等场景。 文章通过5个关键步骤解析WebRTC工作原理：获取媒体流、创建PeerConnection、添加媒体轨道、信令交换(SDP+ICE)、建立P2P连接。重点讲解了信令服务器的作用和实现方式，并提供了完整的Node.js信令服务器和前端Demo代码。 实现要点包括： 使用WebSock
2025-12-05 12:30:37
976
原创 深入解析 JavaScript 中的 this 指向核心原理
本文深入解析 JavaScript 中 this 的绑定规则及其常见应用场景。通过五大绑定优先级（new > 显式 > 隐式 > 默认 > 箭头）系统梳理了 this 的指向逻辑，并结合多个典型代码示例分析不同调用方式下 this 的指向变化。重点探讨了默认绑定、隐式绑定和显式绑定的区别，特别指出了隐式绑定丢失的常见陷阱。文章以清晰的分析思路和丰富的代码案例，帮助开发者准确理解并掌握 this 的核心机制。
2025-12-04 16:29:27
922
原创 会话式编程：重新定义人与代码的关系
传统的 AI 辅助编程，如早期的 Copilot，更像一个“词典”或“片段库”，它基于上下文提供静态的建议。而“会话式编程”的关键在于其多轮、有上下文、可修正的能力。核心原理：从静态匹配到动态决策开发者通过自然语言与 AI 进行交互。这里的自然语言不仅仅是指令，更是对语义上下文的深度理解和项目规范的隐式校验。需求的模糊性与代码的确定性人的需求往往是模糊的（“这个列表要好看一点”、“加一个高性能的搜索”）。AI 接收的需求必须是明确的。会话式编程通过多轮对话，帮助开发者将模糊的人类意图，逐步精炼为。
2025-11-18 17:10:03
738
原创 深入理解 Vue3 Vapor 模式：从原理到实践
Vue 3.6-alpha引入的Vapor模式是一种突破性的实验性渲染模式，它几乎完全弃用虚拟DOM(VNode)，通过将模板直接编译为DOM更新函数，结合细粒度的响应式追踪，实现极致的性能优化。相比传统Virtual DOM模式，Vapor在编译阶段就确定DOM更新计划，运行时直接操作DOM，显著降低内存占用和运行开销。目前虽处于实验阶段且存在诸多限制(如不支持SSR)，但它代表了Vue向编译时框架转变的重要方向，预示着未来可能成为默认渲染引擎。
2025-11-06 17:52:26
1028
原创 深入 Pinia 工作原理：响应式核心、持久化机制与缓存策略
本文深入解析Vue3状态管理工具Pinia的核心原理与应用。Pinia凭借轻量化、类型友好和Composition API深度融合等优势，成为Vuex的替代方案。文章首先介绍其安装和使用方法，接着分析其响应式机制基于Vue的reactivity系统实现。重点探讨了Pinia持久化方案与localStorage的区别，前者负责响应式状态管理，后者仅提供存储功能。最后对比了Pinia与Vuex等方案的优劣势，指出Pinia在简洁性和插件生态方面的优势，但也存在文档不足等局限性。通过原理、实现和对比分析，帮助开发
2025-11-05 16:55:21
1061
原创 深入理解 setTimeout：为什么定时器最小延迟是 4ms？
摘要：JavaScript的setTimeout函数存在最小4ms延迟的限制，这是HTML标准出于性能考量设定的安全机制。文章从事件循环原理出发，解释了定时器的执行流程，并通过代码验证了4ms的延迟现象。同时对比了requestAnimationFrame、MessageChannel和Web Worker等高精度替代方案，帮助开发者根据场景选择合适的异步调度方式，解决动画抖动、任务堆积等实际问题。（149字）
2025-11-05 15:00:00
851
原创 前端必学调试技巧：深入理解 Chrome浏览器 Sources 面板五大功能
Chrome DevTools 的 Sources 面板是最强大却常被忽视的调试工具，包含五大核心功能：Page 提供资源总览和断点调试；Workspace 实现本地与线上代码的实时双向映射；Overrides 允许修改线上资源并保持刷新后生效；Content Scripts 展示浏览器扩展注入的代码；Snippets 则能保存和快速执行自定义脚本。掌握这些功能可深度调试编译代码、验证生产修改、持久化调试并提升开发效率，真正成为专业的前端调试高手。
2025-11-03 17:46:04
1254
原创 Qiankun 踩坑实录：常见问题与最佳解决方案汇总
摘要：Qiankun 微前端实践中的常见问题与解决方案 本文分享了作者在Vue 3 + Vite项目中接入Qiankun微前端框架时遇到的8个典型问题及解决方法。重点包括： 跨域问题：开发环境需在Vite/Webpack中配置CORS头，生产环境应在服务器层面配置 样式污染：推荐使用experimentalStyleIsolation开启作用域隔离，慎用Shadow DOM Vite适配：区别于Webpack，Vite项目不需使用lib模式构建，保持正常构建即可 其他问题还涉及路由冲突、状态管理、资源加载等
2025-10-30 16:15:00
2074
原创 微前端架构实战：深入理解 Qiankun 的核心原理
本文介绍了蚂蚁集团开源的微前端框架Qiankun的核心原理和应用场景。针对传统单体应用的技术栈僵化、团队协作困难等问题，Qiankun提供了HTML Entry解析、JS沙箱隔离、样式隔离等能力，支持不同技术栈的子应用独立开发和部署。文章详细解析了Qiankun的架构设计、核心流程和工作机制，包括应用注册、资源加载、沙箱环境创建等关键技术实现，为解决大型前端应用的模块化和隔离问题提供了优雅的解决方案。
2025-10-30 09:53:52
1013
原创 前端性能优化有哪些方式
本文系统介绍了前端性能优化的核心策略与实践方法，涵盖加载性能、渲染性能、网络缓存、构建优化等关键方面。文章首先阐述了性能优化的重要性，包括提升用户体验、SEO排名和转化率等。随后详细讲解了九大类优化手段：资源压缩与懒加载、减少DOM操作、缓存策略、打包优化、图片格式选择、代码执行优化、SSR服务端渲染、性能监控指标等。最后强调性能优化应贯穿项目全生命周期，形成标准化流程。文章提供了大量实用代码示例和工具推荐，为前端开发者提供了一套完整的性能优化解决方案。
2025-10-27 21:42:45
633
原创 vue3 setup 语法糖解析
Vue3的setup语法糖（SFC <script setup>）通过编译时转换简化了Composition API的使用。它自动暴露顶层变量和函数，无需手动return；支持defineProps、defineEmits等编译宏；直接导入的组件可自动注册。相比传统setup()函数模式，减少了样板代码，提升了开发体验和类型推导。该特性需要Vue3.2+支持，是组合式API的最佳实践，使代码更简洁高效。
2025-10-27 12:05:12
921
原创 Electron 常用 API 使用指南
《Electron核心API与开发实践》摘要：Electron是一个基于Chromium和Node.js的跨平台桌面应用框架，支持使用HTML/CSS/JavaScript开发桌面软件。文章详细介绍了主进程核心API（app生命周期管理、BrowserWindow窗口控制、ipcMain进程通信、Menu菜单栏等）和渲染进程API（ipcRenderer、clipboard等），并列举了Node.js系统模块集成和实用增强功能（如autoUpdater自动更新）。通过VSCode、Slack等典型案例，展示
2025-10-23 07:17:53
550
原创 Electron 实战｜Vue 桌面端开发从入门到上线
本文详细介绍了如何将Vue应用打包成Electron桌面应用的完整流程。首先分析了Electron的核心架构，包含主进程和渲染进程的协作机制。然后提供了具体的代码实现方案，包括项目初始化、主进程配置(main.js)、Vue应用配置(vite.config.js)以及自动化备份脚本的实现。文中还展示了Vue组件(App.vue)的基本结构，实现了文件选择、备份操作和状态显示等功能。通过这篇文章，开发者可以快速掌握使用Electron集成Vue应用的关键技术点，实现Web应用到桌面端的平稳过渡。
2025-10-22 11:57:59
974
原创 Console Importer 调试神器
Console Importer是一个浏览器扩展和JavaScript库，它允许开发者在浏览器控制台中直接导入和使用npm包，无需修改HTML文件或重新加载页面。快速原型开发库的测试和验证学习新的JavaScript库调试和实验性编程Console Importer是一个非常实用的开发工具，它让前端开发者能够在浏览器控制台中快速导入和测试各种JavaScript库，大大提升了开发效率和实验的便利性。
2025-10-12 13:42:56
902
原创 Three.js 基础与实践
随着 Web 技术的发展，尤其是 HTML5 的兴起，WebGL（Web Graphics Library）作为一种在浏览器中渲染高性能 3D 图形的 API 被引入。但 WebGL 接口底层、复杂、学习曲线陡峭，不适合大多数前端开发者直接使用。Three.js 于 2010 年由 Ricardo Cabello 发起开发，旨在封装 WebGL 接口，简化 3D 渲染流程，使开发者能够通过更友好的 API 创建复杂的 3D 场景、动画和交互效果。
2025-05-06 17:35:15
1065
原创 什么是Lodash
在 JavaScript 开发中，Lodash 是一个非常受欢迎的实用工具库，旨在提供高效、模块化的实用函数，帮助开发者更轻松地处理数组、对象、字符串等常见数据结构。它是对 JavaScript 原生方法的增强和优化，它在开发中提供了大量的便捷方法，帮助开发者提高效率，简化代码，广泛应用于前端开发、Node.js 项目等场景。Lodash 的名字来源于“low dash”，寓意其低调而强大的功能。这个库最初由 John-David Dalton 创建，现已成为现代 JavaScript 开发的标配工具之一。
2025-04-14 17:06:03
1557
原创 医疗行业系统知识点整理归纳
HIS系统作为医院信息化的核心，通过整合医院内部信息资源，实现了信息的高效共享和协同工作，显著提升了医疗服务的质量和效率。它不仅优化了医院的运营管理，还促进了医教研的全面发展，提升了医院的整体水平。通过解决信息孤岛、医疗错误、资源管理、患者体验、数据管理和成本控制等问题，是现代医院不可或缺的信息管理工具。二、EMR（电子病历系统）全称 Electronic Medical Record System。
2025-03-03 20:30:00
1511
原创 LODOP 高效实现打印功能
在现代的Web开发中，打印功能常常是一个必须实现的需求。尤其是在企业级应用、电子商务、财务管理等领域，打印订单、报表、发票等文档是非常常见的需求。然而，Web应用原生的打印功能在样式控制、布局管理和打印效果方面常常存在一定的局限性。为了弥补这一不足，LODOP（即"LODOP打印控件"）应运而生。LODOP是一款支持打印功能的第三方控件，广泛应用于各种企业级应用中，特别是在需要高精度打印的场景下。
2025-02-14 11:42:39
1843
原创 初探鸿蒙：从概念到实践
ArkTS 是目前鸿蒙系统推荐的主要开发语言，ArkTS 基于 TypeScript，并在 HarmonyOS 上进行了定制和优化，方便开发者在鸿蒙系统的多设备和跨平台环境中使用。装饰的自定义组件为页面的入口组件，即页面的根节点，一个页面有且仅能有一个@Entry。自定义组件：@Component装饰的UI单元，可以组合多个系统组件实现UI的复用，可以调用组件的生命周期。：虽然Kotlin在鸿蒙中不是官方推荐的语言，但由于其与Java兼容，可以通过Java的方式间接使用。
2024-11-07 15:30:26
1887
3
原创 鸿蒙开发：民族之光的崛起
在科技飞速发展的今天，操作系统的选择直接影响到我们的生活和工作方式。鸿蒙操作系统的出现，不仅代表了技术的进步，更是中国科技实力的象征，承载着“民族之光”的使命。
2024-09-29 15:55:33
1486
原创 什么是浏览器指纹
浏览器指纹（Browser Fingerprinting）是一种用于识别和追踪互联网用户的技术，它通过收集和分析用户浏览器的各种属性和配置（下面展开说明），生成一个独特的“指纹”。这种指纹可以用于区分和识别不同的用户，尽管不知道用户的具体身份，但每个用户都有一个唯一的指纹（即使他们清除了浏览器缓存或使用了隐身模式）。在数字互联网时代，我们的在线活动几乎总是留下痕迹。其中，浏览器指纹就像我们的数字身份证，让网站能够识别和追踪用户。本文将详细介绍浏览器指纹是什么，它如何工作，以及我们该如何应对浏览器指纹识别。
2024-06-15 23:52:57
2216
2
原创 Promise 多个请求顺序执行
Promise是JavaScript中一种用于处理异步操作的一种方式，例如从服务器获取数据和读取文件，它可以避免回调函数嵌套的问题，使得异步操作更加直观、易于管理和编写。
2024-02-20 09:27:48
3284
原创 Tree-Shaking 作用和实现原理
Tree-shaking 它的名字来源于通过摇晃（shake）JavaScript代码的抽象语法树（AST），是一种用于优化JavaScript代码的技术，主要用于移除未被使用的代码，使得最终生成的代码包含应用程序中实际使用的部分。这主要用于减小应用程序的体积，提高加载性能。在前端开发中，特别是在使用模块化工具（如Webpack、Rollup等）构建应用程序时，通常会引入许多库和模块。然而，应用程序可能只使用了这些库的一小部分功能，导致最终生成的代码包含了大量未被使用的代码。
2024-01-23 13:51:06
4108
原创 React 组件生命周期
componentDidMount（组件挂载）------ 一般在这个钩子中做一些初始化的工作，比如：开启定时器，发送网络请求，订阅消息。componentWillUnmount（组件销毁） ------ 一般在这个钩子中做一些收尾的工作，比如：关闭定时器，取消订阅消息。3. Unmounting（卸载阶段）------ 销毁一个组件，销毁前暴露出一个事件，让我们可以在组件销毁前做一些逻辑的处理。当子组件自身状态改变时，不会对父组件产生副作用的情况下，父组件不会进行更新，即不会触发父组件的生命周期。
2023-12-18 11:11:35
2118
原创 nvm切换node版本
在实际开发过程中，由于不同项目对node版本要求不一样，为解决node版本不兼容的问题，我们可以使用 NVM (NodeJS Version Management) 这个node版本管理工具，通过它可以根据项目来切换不同版本的node，来满足项目开发需要。
2023-11-07 10:24:18
2525
原创 vue 重写数组的七个方法
因为Vue的响应式是通过 Object.defineProperty()实现的，这个api没办法监听数组长度的变化，也就没办法监听数组的新增。说明：vue只重写了这7个方法，使用其它数组方法不会主动触发试图更新，例如 concat、slice 等，如果需要触发更新，我们可以使用Vue.set() 或 this.$set() 方法手动触发更新。另外，Vue3处理响应数据使用了Proxy，系统会自动捕获这些操作，并在数据变化时触发视图更新，所以不需要重写数组方法。
2023-08-15 16:56:34
2443
1
原创 git 常用命令有哪些
项目存在三种短期分支 ：功能分支（feature branch） 补丁分支（hotfix branch） 预发分支（release branch）Git 是我们开发工作中使用频率极高的工具，下面总结下他的基本指令有哪些，顺便温习一下。虽然是主分支和分支，却是平级关系，develop可以理解为开发库，master为生产库。一般项目中长存2个分支： 主分支（master） 和开发分支（develp）五、切换（checkout）分支。四、分支（branch）操作。六、克隆（clone）分支。
2023-08-02 16:28:36
2112
原创 什么是事件循环 Event Loop
事件循环（eventLoop）是单线程的JavaScript在处理异步事件时进行的一种循环过程，具体来讲，对于异步事件它会先加入到事件队列中挂起，等主线程空闲时会去执行事件队列（Event Queue）中的事件。如此反复循环。事件循环的设计使得 JavaScript 可以在单线程下处理异步操作，避免了阻塞的情况，保证了程序的响应性和流畅性。我们在日常使用电脑中，我们可能会一边听歌、一边写代码、一边看网页。这些应用中都会在操作系统中开启一个进程或多个进程，不同的应用开启的进程是不一样的。
2023-07-13 18:21:38
1106
原创 canvas 基本用法
Canvas 是 HTML5 新增的元素，它就像一块幕布，可通过JavaScript脚本在 Web 页面上绘制图形、动画和其他可视化内容。四、canvas应用场景。一、什么是canvas。二、canvas用法。
2023-07-05 19:11:54
5605
原创 原生js常用方法有哪些？
如今框架横行，但原生JS学习反而变少了，框架虽然方便了，但掌握原生JS才是最基础的，本文分享了一些提供工作效率的原生JS方法，希望对你有所帮助。
2023-07-04 16:38:19
796
原创 vue 自定义指令
在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统，我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。常见的vue内置指令有：v-if，v-show，v-for，v-bind，v-model 等。Vue的指令以v-开头，作用在HTML元素上，将指令绑定在元素上，给绑定的元素添加一些特殊行为。以 v-if 为例，其中，v- 是Vue的标识，if是指令 ID。
2023-07-03 17:05:53
1408
原创 前端安全问题及解决方案
随着互联网的高速发展，信息安全问题已经成为行业最为关注的焦点之一。总的来说安全是很复杂的一个领域，在移动互联网时代，前端人员除了传统的 XSS、CSRF 等安全问题之外，还时常遭遇网络劫持、非法调用 Hybrid API 等新型安全问题。
2023-06-29 15:34:03
1764
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人