风口的程序猿-CSDN博客

原创前端实用工具方法 —— 持续更新中...

本文介绍了一套Vue前端开发中的实用全局工具方法集，包含三类核心功能：1)校验工具类：提供整数、手机号、身份证号等常见表单验证规则；2)日期处理类：支持日期选择器配置和格式化；3)表格处理类：实现金额格式化等表格操作。还包含全局工具方法如日期格式化、对象空值处理、金额转换和语音播报等。此外，扩展了Date和Vue原型方法，增强了日期格式化和表格自适应布局能力。这些方法经过实际项目验证，可根据需求灵活调整，持续更新优化前端开发效率。

2025-08-05 23:53:33 99

原创 VUE -- 基础知识讲解（三）

本文系统总结了Vue开发中的关键知识点：1）组件生命周期顺序：父组件优先创建，子组件优先挂载；2）keep-alive组件缓存机制及Vue3中的使用变化；3）从零搭建Vue项目的完整流程，包括插件引入、规范配置和目录结构；4）最佳实践建议，涵盖编码风格、性能优化和安全性；5）Vuex状态管理的核心概念和使用场景；6）模板编译为render函数的过程；7）Vue实例的挂载机制。文章通过理论解析、实践指导和源码分析相结合的方式，为Vue开发者提供了全面的技术参考。

2025-07-31 00:06:43 1114

原创 VUE -- 基础知识讲解（二）

本文系统介绍了Vue.js核心概念，包括虚拟DOM、diff算法、Vue3新特性和关键技术。虚拟DOM通过JavaScript对象描述视图结构，减少直接DOM操作提升性能；diff算法采用同层比较策略高效更新DOM。Vue3新增了Composition API、Teleport等特性，优化了响应式系统和编译器。文章还详解了动态路由、key的作用、nextTick原理，以及watch和computed的异同，帮助开发者深入理解Vue工作原理和最佳实践。

2025-07-30 20:36:34 638

原创 VUE -- 基础知识讲解（一）

本文总结了Vue3的核心知识点，包括组件通信、生命周期、双向绑定等。Vue3在组件通信方面进行了优化，移除了$on、$children等API，推荐使用props、$emit等方式；v-if和v-for的优先级在Vue3中调整为v-if更高；生命周期函数有所调整，新增了renderTracked等调试钩子；v-model实现双向绑定，Vue3增加了多参数绑定功能；响应式系统改用Proxy重构，性能更优且支持浅层响应式。文章还对比了Vue2和Vue3的差异，并提供了权限管理、组件扩展等实践方案。

2025-07-29 23:44:11 1214

原创 webpack 原理及使用

本文系统介绍了webpack打包工具的核心概念与进阶技术。基础部分重点讲解了entry、output、loader、plugin、mode和DevServer六大核心概念，并通过手写简化版webpack演示了模块加载原理。进阶内容深入解析了webpack核心技术，包括sourcemap映射、文件指纹哈希算法、Chunk分包策略等核心机制，并详细介绍了打包效率优化（缓存、并行处理）和页面性能优化（代码压缩、TreeShaking）等实用技巧。

2025-07-29 15:52:00 912

原创 VUE + i18n 全动态国际化解决方案

本文介绍了前端项目国际化(i18n)的优化实现方案。针对中英文长度差异，采用单行直译、多行直译和缩写+释义三种展示方式；重构i18n文件结构为按业务模块划分，便于分步实施；实现动态数据和静态资源的国际化加载；提供了国际化公共组件T_r和三个公共方法(g_tr/g_tp/g_td)来处理不同场景的国际化需求。通过VueI18n配置和mixins混入，使项目能灵活适配多语言环境，支持渐进式国际化改造。

2025-07-28 17:45:26 288

原创 DOM + HTML + HTTP

HTML5新特性与DOM核心知识摘要： HTML5新增语义化标签（header/nav等）、表单增强、音视频支持、Canvas绘图等功能，提升开发效率和SEO优化。DOM操作中，innerHtml、textContent和nodeValue各有特点，分别用于获取带标签内容、原始文本和所有节点。浏览器渲染流程包括构建DOM/CSSOM树、生成渲染树、布局和绘制，重绘与重排影响性能，可通过分离读写、样式集中修改等方法优化。此外，script标签的async/defer属性可解决阻塞问题，SVG和Canvas分

2025-07-27 14:46:02 1023

原创 JavaScript -- ES6的Promise

本文系统讲解了Promise在前端异步编程中的应用。首先分析回调函数的缺点（嵌套地狱），重点介绍Promise的实现原理：通过返回Promise对象和.then()链式调用实现异步顺序执行，并说明传参和错误处理机制。同时介绍了ES7的async/await语法糖，可消除.then()嵌套。还详细解析了Promise.all()和Promise.any()等原型方法的使用场景，通过商品查询案例演示其实际应用。最后预告将分享手写Promise的实现过程，帮助开发者深入理解异步编程原理。

2025-07-27 00:10:48 828

原创 JavaScript -- ES6

本文总结了ES6核心特性：1. 模板字符串支持${}嵌入变量和表达式；2. let解决了var的声明提升和块级作用域问题；3. 箭头函数简化语法但改变了this指向；4. for...of循环简化遍历但无法获取索引；5. 参数增强包括默认值、剩余参数和展开运算符；6. 解构赋值简化对象/数组取值；7. class类语法统一了构造函数和原型方法定义，支持继承和静态属性。这些特性显著提升了JavaScript的开发效率和代码可读性。

2025-07-24 23:11:48 840

原创 JavaScript -- 面向对象

本文系统介绍了JavaScript面向对象编程的核心概念与应用。主要内容包括：1）封装：通过直接量、构造函数等方式创建对象；2）继承：利用原型对象实现子对象共享属性和方法；3）多态：子对象重写父对象成员。详细讲解了10种创建对象的方法、7种继承实现方式以及深浅克隆技术，并深入分析了原型链机制和this关键字的多种应用场景，为前端开发提供了全面的面向对象编程指导。

2025-07-23 14:27:17 826

原创 JavaScript -- 闭包

本文系统讲解了JavaScript作用域与闭包的核心概念。主要包括：1）作用域链、变量提升、函数传参等基础原理，强调函数作用域对象临时创建的特性；2）闭包的定义与实现方法，分析其底层通过作用域链引用实现变量保护的机制；3）闭包应用实例包括函数柯里化、动态表格交互等；4）结合setTimeout、call/apply等案例深入解析作用域链与闭包的运行机制。文章通过大量代码示例，详细阐述了如何利用闭包实现变量保护与复用，同时指出了可能造成内存泄漏的风险及解决方案。

2025-07-23 12:28:22 601

原创 VUE组件更新机制 + $nextTick()

本文深入解析Vue组件更新机制和$nextTick原理，从数据驱动视图原理、$nextTick作用与使用、实现原理、事件循环中的位置及与定时器区别等五个方面展开。重点阐述了异步更新的必要性（避免阻塞进程、批量更新优化），详细分析了$nextTick通过微任务队列实现异步回调的机制，比较了其与setTimeout/setInterval在任务队列中的差异。通过实例代码演示了$nextTick在事件循环中的执行时机，解释了为何在特定情况下$nextTick回调会先于Promise执行。

2025-07-22 16:05:42 1057

原创 uni-app标准热更新(wgt)解决方案-具体代码实现

本文详细介绍了UniApp前端热更新机制的设计与实现，主要包括以下内容：1. 热更新检查机制，包含环境检查、版本比对和更新包下载逻辑；2. WGT更新包处理流程，包括静默更新、强制更新和版本切换的实现；3. 更新页面交互设计，展示下载进度、安装状态和异常处理；4. 版本管理功能，支持历史版本查看和指定版本切换。作者分享了从方案设计到功能实现的完整过程，强调通过100+次更新包测试验证了方案的可靠性。该方案有效解决了APP热更新的关键技术问题，为开发者提供了实用的参考案例。

2025-07-14 09:33:33 350

原创 uni-app标准热更新解决方案

摘要：本文针对uni-app跨平台应用的热更新机制进行优化，解决现存四个痛点问题：多版本更新冲突、交互体验差、登录页更新缺失和老版本缓存问题。提出通过后端返回可更新版本数组、增加静默更新类型、优化更新页面交互、配置环境清除策略等解决方案。详细阐述了更新检查逻辑、版本匹配规则和更新流程优化方法，强调将更新过程转化为初始化阶段以提升用户体验。最后指出将更新后的环境配置处理和缓存清理作为滞后操作，并附上热更新流程图。

2025-07-13 02:18:37 1034 2

原创 eCharts图例移除后，对应的线仍存在于画布上

摘要：ECharts使用setOption更新图表时，默认采用普通合并模式，不会删除已有组件，导致减少图例时旧线条仍显示。问题根源在于组件合并规则差异：普通合并仅支持增加/更新，而替换合并支持删除。官方API详细说明了setOption的不同合并模式及使用方法。

2025-07-12 12:50:28 214

原创 Vue全动态路由解决方案（路由信息落库）

摘要：本文提出了一种动态路由权限控制方案，通过解耦前端路由与菜单配置实现灵活管理。关键技术涉及动态路由生成算法、ES模块动态导入和数据字典重构。实践表明，该方法有效解决了传统方案中路由与菜单强耦合、

2025-07-12 12:32:25 636

原创 VUE+eCharts大数据折线图自定义框选缩放解决方案

本文针对eCharts折线图在处理秒级数据时存在的两大痛点：坐标轴缩放操作不便和鼠标悬浮框显示不稳定问题，提出了一套完整的解决方案。通过框选式缩放技术优化了坐标轴操作体验，实现原理是监听鼠标事件，动态计算框选区域并转换为缩放比例。对于悬浮框问题，采用像素点与数据点动态匹配算法，手动控制Tooltip显示逻辑。该方案有效提升了大数据量场景下的交互体验，使缩放精度提高300%，悬浮框显示稳定性达100%。

2025-07-12 11:00:18 1089

原创 VUE 全屏切换自适应布局解决方案（监听F11）

摘要：针对Vue项目中全屏模式切换存在的浏览器F11与screenFull插件不兼容问题，提出统一解决方案。通过监听F11按键事件(122)并调用screenFull切换方法，同时利用window.onresize事件更新全局状态isFullScreen，绕开Chrome的安全限制。页面根据isFullScreen状态值动态调整布局，实现全屏/非全屏模式的自适应切换。该方法整合了系统快捷键与按钮控制，优化了用户体验。

2025-01-14 22:57:11 474