- 博客(324)
- 收藏
- 关注
RSS订阅
原创 如何优化 Vite 项目中的 Lodash 引入：从 Tree Shaking 到自动化测试
在现代前端开发中，优化代码的体积和构建速度是非常重要的。特别是在使用 Vite 作为构建工具时，如何正确地处理 Lodash 这种通用的工具库，变得尤为关键。在本文中，我将分享我们如何在 Vite 项目中优化 Lodash 的引入方式，并确保优化后的代码能够正常运行。我们分析了几个优化 Lodash 引入方式的解决方案，并最终决定采用更适合我们项目需求的方案。
2024-08-16 19:16:29
2544
原创 vue3的自定义hooks
Vue3 的 hook函数的出现，可以让我们更好抽离重复逻辑，聚合相同的功能。它与vue2 中的mixins有点类似，但是相对 mixins 而言， hooks 函数 更清楚复用功能代码的来源,更清晰易懂。使用 Vue3 的组合 API 封装的可复用，高内聚低耦合。1、具备可复用功能，才需要抽离为 hooks 独立文件2、函数名/文件名以 use 开头，形如: useXX3、引用时将响应式变量或者方法显式解构暴露出来；vue3 hooks 现在使用比较广泛，介绍基本概念与原理。
2024-01-11 16:57:04
2368
1
原创 前端本地覆盖资源(local override)调试
Chrome 65 中的开发者工具将包含以下新功能：本地替换新的无障碍工具更改标签页新的搜索引擎优化 (SEO) 和性能审核Performance 面板中的多个录制内容使用 worker 和异步代码执行可靠的代码单步调试本篇文章主要学习与实践下本地替换这个功能提示：以下是本篇文章正文内容，下面案例可供参考官网详细描述。
2024-01-11 09:40:18
1995
原创 vue3项目使用pako库解压后端返回zip数据
外部接口返回一个图片数据是经过zip压缩的，前端需要把这个数据处理成可以显示的图片。大概思路：zip解压-> 转换为base64数据 -> img标签显示。pako详细描述🚀 npm 直达pako 是一个流行的 JavaScript 库，用于在浏览器中进行数据压缩和解压缩操作。它提供了对常见的压缩算法（如 Deflate 和 Gzip）的实现，使开发者能够在客户端上轻松进行数据压缩和解压缩，以减少数据传输大小和网络带宽消耗。
2023-12-29 18:03:04
2954
原创 Vue3+hooks快速接入Lodop打印插件
上面文章《Vue快速接入菜鸟打印组件》讲了vue3如何快速集成菜鸟打印组件，这篇讲讲vue3如何集成lodop组件。在项目的hooks 文件夹下创建一个hook。根据自己的项目，按实际情况命名。这里是 useLodop.ts// 引入上一步骤创建的lodopfuns})try {} else {rawRow: {}) => {if (!LODOP) {return ElMessage.warning('请安装/启动Lodop 打印插件')// 根据打印的类型，获取设置的打印机字符串。
2023-12-15 14:22:59
3478
6
原创 uni-app 项目中使用自定义字体
在 uni-app 项目中使用自定义字体确实存在一些兼容性问题。// 只在 H5 平台使用自定义字体// 通用字体设置sans-serif;
2025-09-09 15:50:50
390
原创 linear-gradient用法
CSS线性渐变（linear-gradient）是创建平滑颜色过渡的强大工具。文章详细介绍了渐变的基本语法，包括方向参数（角度值和关键词）、颜色停止点设置，以及实用示例（按钮、卡片背景等）。还涵盖了在SCSS、Vue组件和UnoCSS中的应用技巧，移动端适配注意事项，以及动态渐变、响应式设计等进阶用法。最后提供了调试工具推荐，帮助开发者高效创建美观的渐变效果。
2025-09-05 16:16:55
646
原创 scss 转为原子css unocss
本文介绍了将SCSS迁移至原子化CSS（UnoCSS）的三种方案。方案一采用混合模式，保留语义化SCSS类名，通过@apply指令应用UnoCSS；方案二创建语义化组件类，内部集成UnoCSS；方案三使用CSS变量与语义化类名结合的方式。三种方案均提供了代码示例，展示了如何重构页面组件样式，包括布局、导航栏、成员卡片等元素的样式处理，兼顾了可读性与原子化CSS的优势。
2025-09-04 20:42:59
793
原创 合约服务架构-OOP 方式
本文介绍了基于面向对象编程(OOP)的合约服务架构实现。该架构体现了OOP四大核心特性：封装隐藏实现细节、继承实现代码复用、多态提供统一接口、抽象定义规范。同时应用了工厂模式、单例模式和模板方法模式等设计模式。相比函数式编程，OOP方法具有更好的代码组织、类型安全、可扩展性和可测试性。通过类结构聚合相关功能，使合约交互更加模块化和可维护，同时提高了开发效率。这种架构为智能合约开发提供了清晰的面向对象解决方案。
2025-08-31 23:58:58
1028
1
原创 Ethers.js vs Wagmi 的差异
Ethers.js与Wagmi对比摘要 Ethers.js需手动管理signer、provider和错误处理，代码量较多；而Wagmi作为现代库，自动处理钱包连接、签名和网络切换，内置缓存与重试机制。技术层面，Wagmi提供强类型支持、响应式数据和多链RPC故障转移，开发体验更优。安全性上，Wagmi内置地址验证和交易确认，错误处理结构化。整体而言，Wagmi通过封装复杂逻辑，显著减少代码量（从20行缩减至5行），提升开发效率与可靠性。
2025-08-31 09:58:13
284
原创 React 的 `cache()` 函数
React 19引入的cache()函数是优化重复计算和数据获取的重要API。它通过缓存函数结果避免重复执行，在相同参数调用时直接返回缓存值。适用于跨组件数据共享、减少API请求和优化高开销计算，但不适合事件处理或状态更新。服务端组件中缓存绑定到当前请求，客户端则全局共享。需注意使用纯函数、避免大型对象缓存，且参数必须可序列化。相比useMemo等单组件缓存方案，cache()提供更广范围的性能优化，尤其适合RSC架构应用。
2025-07-19 10:06:53
867
原创 React 服务器组件 (RSC)
React服务器组件(RSC)是一种仅在服务端执行的特殊组件，通过减少客户端JS体积、直接访问服务端资源和自动代码分割来优化性能。RSC必须是异步函数，不能使用Hooks或浏览器API，只能返回可序列化数据或客户端组件。与客户端组件协作时，RSC作为父组件传递数据，客户端组件处理交互逻辑。RSC适合数据获取和静态内容渲染，而客户端组件适合处理交互和状态管理。通过合理组合这两类组件，可以构建高性能的React应用。
2025-07-19 05:26:35
1324
原创 移动应用开发中蓝牙连接技术
本文梳理了移动应用开发中蓝牙连接技术的核心知识，对比了BLE与经典蓝牙的区别及应用场景。BLE适用于物联网低功耗设备，经典蓝牙适合音频和大文件传输。文章详细介绍了开发要点，包括平台兼容性、连接流程和权限配置，并提供了UniApp开发蓝牙功能的实战步骤，如初始化适配器、扫描设备、连接读写数据等。最后总结了开发中的常见问题及2025年蓝牙技术新趋势，强调BLE在多端开发中的优势及经典蓝牙的局限性。开发者需注意真机测试和系统兼容性问题。
2025-07-18 01:14:37
775
原创 无缝衔接直播流体验
直播App实现无缝播放体验的核心在于播放器复用和状态保活。通过全局单例管理播放器实例，广场页预加载直播流，详情页直接复用已有播放器，避免了重新加载。关键技术包括：1) 播放器控制器全局缓存；2) Hero动画实现平滑过渡；3) KeepAlive机制保持卡片状态。Flutter中可通过video_player插件配合FutureBuilder实现，推荐使用better_player等增强插件支持更多协议。这种方案有效减少了用户感知的加载时间，实现了抖音/快手式的无缝切换体验。
2025-07-13 23:14:42
836
原创 Flutter、Vue 3 和 React 在 UI 布局比较
本文对比了Flutter、Vue 3和React在UI布局、动画和交互方面的核心差异。Flutter采用Widget树布局，通过Dart实现自绘UI；Vue 3基于HTML/CSS，使用单文件组件；React则依赖JSX和CSS-in-JS。在布局方式上，Flutter使用Row/Column等Widget，Vue和React依靠CSS Flex/Grid。动画实现方面，Flutter用AnimatedOpacity，Vue用transition组件，React借助CSS Transition。Tab切换场
2025-07-11 22:04:31
1111
原创 iOS打包流程
本文详细解析iOS应用打包全流程，涵盖App Store上架、TestFlight测试和Ad Hoc分发三种方式。主要内容包括：1）打包前的开发者账号配置、Flutter项目设置和Xcode签名管理；2）App Store提交的IPA生成、Connect后台配置及审核注意事项；3）TestFlight的内外部测试管理；4）Ad Hoc分发的UDID收集与多渠道分发方案；5）企业签名的特殊要求与部署流程。文中提供可视化流程图、常见错误代码解决方案及自动化脚本范例，并强调证书管理、版本控制等最佳实践，为开发者提
2025-07-08 13:30:58
1188
原创 Flutter 入门
这是一份系统的Flutter学习指南，分为入门与进阶两大部分。入门篇涵盖环境搭建、Dart语法、基础组件、布局和简单状态管理；进阶篇深入讲解状态管理方案、路由导航、网络请求、动画绘制、性能优化和测试调试。高级实战部分包括架构设计、跨平台适配和混合开发。指南推荐了官方文档、实战课程和社区资源，强调动手实践、阅读源码和持续学习。全文系统性地梳理了Flutter开发的核心知识点，为开发者提供了一条清晰的学习路径。
2025-07-07 18:30:34
1134
原创 Flutter 项目开启 UI 层级虚线（UI Guides）
摘要：本文介绍如何在VS Code中为Flutter项目开启UI层级虚线（UI Guides）。首先需安装Flutter和Dart插件，然后在settings.json中添加"dart.previewFlutterUiGuides": true配置并重启编辑器。该功能会在代码左侧显示Widget嵌套结构的虚线指引，提升布局调试效率。若无效，建议检查插件安装或重装插件。此功能特别适合Flutter复杂页面的开发与调试。（150字）
2025-07-06 22:41:20
686
原创 WebRTC 的 ICE candidate 协商
WebRTC的ICE候选协商是实现点对点连接的关键机制。ICE（Interactive Connectivity Establishment）协议通过收集本地网络地址（candidate），包括局域网IP、公网IP和中继服务器IP等，在双方RTCPeerConnection之间交换候选地址，寻找可行的网络路径。协商流程包括创建连接、收集候选地址、通过信令服务器交换以及添加候选地址，直到建立连接。常见问题包括候选地址交换失败、NAT穿透障碍等，可通过日志调试和检查候选类型解决。本文还提供了前端代码示例和关键调
2025-07-06 21:27:14
1020
原创 Nuxt 3 面试题合集（中高级）
Nuxt 3采用约定式项目结构，主要目录包括：pages（自动生成路由）、components（自动注册组件）、layouts（布局模板）、composables（组合式函数）、plugins（启动插件）、middleware（路由守卫）、assets/public（静态资源）和server（API路由）。其路由机制基于文件系统，动态路由通过方括号（如[id].vue）定义，嵌套路由通过目录结构实现。Nuxt 3提供三类生命周期钩子：构建时钩子（用于模块开发）、应用运行时钩子（用于插件）和服务端运行时钩子（
2025-07-04 23:23:07
988
原创 Tailwind CSS工作原理
Tailwind CSS 是一个基于 PostCSS 的插件，其核心原理是通过扫描项目文件提取使用的类名，并动态生成对应的原子化 CSS 样式。主要流程包括：解析 @tailwind 指令、合并用户配置、按需生成实用类（JIT 模式）、处理插件扩展和 @apply 指令。Tailwind 利用 PostCSS 的 AST 操作能力，将设计系统中的主题配置（如颜色、间距）映射为具体 CSS 规则，并通过插件机制支持自定义样式。JIT 模式通过实时扫描代码中使用的类名，仅生成必要的 CSS，实现高效性能。整个处
2025-06-28 10:30:38
904
原创 React中的ErrorBoundary
React中实现错误边界(ErrorBoundary)的三种方法对比：1) 官方推荐的类组件方式，通过componentDidCatch捕获渲染错误；2) 使用react-error-boundary库的函数组件实现；3) 自定义Hook方式（仅能捕获逻辑错误）。前两种方法都能有效拦截组件渲染错误，防止应用崩溃，而第三种方法局限性较大。官方类组件方式最可靠，react-error-boundary则提供了函数式解决方案。开发者应根据项目需求选择合适方案。
2025-06-27 18:57:29
397
原创 Tailwind CSS自定义用法
摘要：React项目集成Tailwind CSS及自定义样式配置指南 本文详细介绍了在React项目中集成Tailwind CSS并进行自定义样式配置的完整流程。主要内容包括： 基础集成：通过Vite项目演示安装Tailwind CSS、PostCSS和Autoprefixer，配置tailwind.config.js文件，创建全局样式文件并引入核心指令（@tailwind base/components/utilities） 四种自定义方式： 通过theme.extend扩展主题（颜色、间距、字体等） 使
2025-06-27 12:46:01
1284
原创 Vue Router VS React Router v6+对比学习
本文对比了Vue Router（Vue 3）和React Router v6+的核心功能实现差异。主要内容包括：1）路由表配置方式（Vue使用对象结构，React采用JSX组件）；2）路由占位符与嵌套路由实现；3）编程式导航方法；4）参数获取方式；5）路由守卫实现（Vue内置全局守卫，React需手动封装）；6）动态路由和懒加载实现。文章通过代码示例直观展示了两者在语法和设计理念上的区别，并提供了功能对比表格，特别指出Vue支持命名路由而React不支持等关键差异点。
2025-06-27 08:39:10
443
原创 微信小程序中嵌入「视频号内容」和「公众号文章」
本文介绍了在微信小程序中间接嵌入视频号内容和公众号文章的方案，分析了不同实现方式的限制条件和操作步骤。主要包括：1) 通过按钮跳转绑定视频号主页；2) 使用web-view组件打开已关联公众号的文章；3) 配置业务域名白名单等关键设置。文章详细说明了视频号跳转的具体实现代码，并指出了各种方案的适用场景和功能限制表。最后提供了获取视频号跳转参数的渠道和替代方案建议，强调只能跳转主体一致的视频号内容，且需要用户主动触发。
2025-06-22 22:41:40
2254
原创 小程序的「双线程模型」
小程序采用双线程模型实现高性能运行：逻辑层（AppService）负责JS脚本执行、事件处理和数据管理，渲染层（WebView）负责页面渲染和用户交互，两者通过Native层桥接通信。这种设计提升了性能（避免阻塞）、增强了安全性（隔离DOM操作），但也带来通信延迟和数据拷贝的开销。实践建议控制setData频率和数据量，使用Worker处理复杂计算，并注意沙箱机制带来的隔离特性。与其他技术相比，小程序在渲染速度与跨平台适配性间取得了平衡，适用于轻量级应用场景。
2025-06-22 22:33:17
846
原创 Eslint自定义规则使用
文章摘要： 本文介绍如何通过自定义ESLint规则实现项目架构约束，禁止页面层直接调用数据服务层。以uni-app项目为例，团队要求视图层(pages/)禁止直接导入服务层(services/)，必须通过状态管理层调用。实现步骤包括：1. 创建规则文件no-service-import-in-pages.js，通过AST分析检测违规导入；2. 在ESLint配置中注册该规则。当开发者在页面层直接导入服务时，ESLint会立即报错提示。该方案有效维护代码分层，提升项目可维护性。（150字）
2025-06-20 08:44:27
825
原创 深入解析：ESLint 红色下划线的底层工作原理
ESLint红色下划线实现机制解析： 核心流程：代码变更触发毫秒级响应，经过解析器生成AST，规则引擎深度遍历检查，最终生成错误诊断信息。 关键技术： 解析器分层处理不同文件（Vue/TS/JS） AST转换实现精准代码分析 200+内置规则覆盖质量/风格/安全等维度 编辑器整合：通过LSP协议传递诊断结果，VSCode渲染红色下划线并支持快速修复。整个过程涉及操作系统监控、语言服务器、多插件协同等现代IDE核心技术。 （字数：149）
2025-06-20 08:16:55
759
原创 ESLint 新一代“平铺配置”（Flat Config)
本文介绍了如何解决ESLint和Prettier在Vue和TypeScript文件中的配置冲突问题。通过采用"分而治之"的策略，将配置拆解为多个独立模块，形成一条"流水线"处理流程：首先全局忽略不需要检查的文件，然后加载TS和Vue的推荐规则，再添加自定义规则，接着针对Vue文件设置专用解析器（Vue解析器处理外层，TS解析器处理script标签内容），最后用Prettier统一格式化风格。这种模块化配置方式解决了文件类型差异带来的解析问题，避免了工具间的规则冲突，实
2025-06-20 07:41:28
907
原创 React 国际化方案最佳实践调研
摘要 大厂React国际化最佳实践主要采用React-i18next、React-Intl和LinguiJS等方案。React-i18next功能全面，支持SSR和按需加载；React-Intl注重ICU标准，需自行实现语言检测；LinguiJS采用编译时优化，运行时体积更小。翻译资源管理建议按模块拆分JSON文件，采用动态加载优化性能。语言切换推荐URL前缀方式利于SEO，配合多级自动识别策略（优先用户选择，其次浏览器语言）。实现时应提供显式切换控件，确保用户体验。Next.js项目可通过App/Page
2025-06-17 18:25:13
1243
原创 HTML5 更新的功能
HTML5核心功能摘要： 语义化标签（如<header>、<article>）优化SEO与文档结构； 原生多媒体支持（<video>、<audio>）替代Flash； Canvas/SVG实现动态图形绘制； 表单增强新增输入类型（date、color）及验证属性； Web Storage提供大容量本地存储； 地理定位、拖放API等交互功能； Web Workers后台线程处理耗时任务； WebSocket支持实时通信。示例代码涵盖主要应用场景，显著提升现代We
2025-06-17 16:04:48
1141
原创 Next.js 的国际化 (i18n) 功能与 `react-i18next` 结合使用
本文介绍了如何在Next.js项目中结合国际化(i18n)功能和react-i18next库。主要步骤包括：1) 正确初始化i18next配置，确保语言支持与Next.js路由一致；2) 在应用顶层通过I18nextProvider组件提供翻译上下文，并动态响应路由语言变化；3) 在客户端组件中使用useTranslation hook获取翻译内容。该方法充分利用Next.js内置i18n路由，实现无缝的多语言切换。
2025-06-16 22:20:54
1440
原创 7大维度系统分析WebSocket常见断连原因
WebSocket连接断开的原因及解决方案分析：文章从网络层（50%）、传输层（15%）、服务端（20%）、客户端（10%）、应用层协议（5%）、运维环境（3%）和主动断开（2%）七个维度系统解析断连原因，并提出针对性优化方案。客户端需实现心跳机制、异常处理和指数退避重连策略，服务端应加强监控。通过分层诊断和优化（如分级重连、备用通道），可将断连率降至万分之一以下。诊断工具包括抓包分析和状态码监测。
2025-06-13 23:55:52
818
原创 WebSocket 前端断连原因与检测方法
WebSocket断连分析与React前端优化策略 摘要：本文分析了WebSocket连接中断的常见原因（网络波动、服务器断开、浏览器限制等）及检测方法，并针对聊天系统和行情推送两类应用场景探讨了断连的影响差异。提出了React前端中的稳定性优化方案，包括自动重连设计（采用指数退避策略）、心跳保活机制、连接状态管理、用户提示优化等核心策略。特别强调聊天系统需确保消息完整性，行情推送则需快速恢复数据连续性。文章还提供了不同场景下的差异化处理建议，为构建高可用的实时Web应用提供实用指导。
2025-06-13 20:56:05
1601
原创 React中修改 state 时必须返回一个新对象 (immutable update)
React通过浅比较(shallow comparison)检测状态变化，要求修改state时必须返回新对象才能触发重新渲染。核心原理是：1）React在processUpdateQueue中使用Object.assign浅合并新旧状态，生成新对象；2）shallowEqual先比较对象引用，若相同则跳过渲染；3）直接修改原state对象属性不会改变引用，导致浅比较认为状态未变化。错误示例中this.state.count=value虽能修改值，但因对象引用未变且React的批量更新机制，可能导致渲染失效。
2025-06-12 13:54:02
1304
原创 React & Vue 编译/运行流程
本文系统对比了React与Vue在编译和运行阶段的实现差异。React的编译阶段主要通过Babel将JSX转换为React.createElement调用，并由构建工具完成打包优化；运行时则采用Fiber架构进行异步调度，分为可中断的Render Phase（构建Fiber Tree）和同步的Commit Phase（DOM更新）。相比之下，Vue在编译阶段通过模板编译器生成render函数并实现静态节点优化，运行时则直接处理虚拟DOM的diff与patch。两者核心区别在于：React依赖运行时调度（Fi
2025-06-11 21:52:48
1185
原创 React 元素的生命周期
本文系统讲解了React元素（Virtual DOM）的生命周期，主要包括：1）React元素本质是描述UI的JS对象；2）从JSX到真实DOM的完整转换流程；3）各阶段涉及的关键技术（如Fiber架构、Diff算法）；4）以函数组件为例，详细解析挂载、更新和卸载三阶段的具体过程。文章通过流程图直观展示React如何将虚拟DOM转化为真实DOM，并触发相应生命周期钩子，最终揭示React组件更新的核心机制：每次状态变化都会重新走一遍"React元素→DOM"的完整生命周期流程。
2025-06-11 21:34:41
774
空空如也
lodop 如何自适应布局？
2023-12-19
TA创建的收藏夹 TA关注的收藏夹
TA关注的人