- 博客(51)
- 收藏
- 关注
RSS订阅原创 js树的排序
本文介绍了树的基本遍历方法和树排序算法。主要内容包括： 二叉树的三种遍历方式： 前序遍历：根-左-右 中序遍历：左-根-右 后序遍历：左-右-根 每种遍历方式都提供了递归实现的代码示例。 树排序算法： 基于二叉搜索树，将数据插入树后通过中序遍历获取有序序列 分析了时间复杂度：平均O(n log n)，最坏O(n²) 提出使用平衡二叉树优化性能 文章通过代码示例详细说明了各种遍历和排序的实现方法。
2025-07-04 11:27:15
258
原创 js算法笔记
摘要：动态规划适用于具有最优子结构的问题（如最大子序列和），通过存储子问题解提高效率；贪心算法（如背包问题）追求局部最优但可能牺牲全局最优；分治算法（如二分搜索）将问题分解为独立子问题递归解决；回溯算法（如N皇后问题）穷举所有可能解。四类算法在问题类型、解质量和效率上各有特点：动态规划和分治确保最优解，贪心效率高但解可能非最优，回溯可找全部解但效率较低。
2025-07-04 11:26:00
478
原创 vue状态管理与TS
本文介绍了Vue.js中的状态管理和TypeScript集成。状态管理部分首先解释了组件独立状态的概念，然后讨论了多组件共享状态的问题，提出了使用响应式API进行简单状态管理的方案，并推荐使用官方维护的Pinia库替代Vuex。TypeScript部分强调了TypeScript在Vue开发中的优势，包括错误检测和开发效率提升，详细介绍了IDE支持、defineComponent()的使用方法，以及如何在组合式API中为组件props标注类型，特别说明了<script setup>语法下defin
2025-07-04 11:23:27
798
原创 异步编程与事件循环机制
本文介绍了JavaScript异步编程的演进，从传统回调模式到Promise机制。首先分析了setTimeout等回调函数处理异步操作的局限性，包括处理异步返回值、失败处理和嵌套回调带来的"回调地狱"问题。接着重点讲解了Promise的工作原理，包括三种状态（pending、fulfilled、rejected）、执行器函数的同步特性以及状态转换的不可逆性。最后介绍了Promise.resolve()静态方法的使用，可以将任何值转换为Promise对象。文章通过代码示例展示了Promis
2025-07-04 11:20:49
1266
原创 vue3组件通信
Vue3组件通信方式总结 Vue3提供了多种组件通信方式：1️⃣props实现父子组件通信，数据为只读；2️⃣自定义事件实现子父组件通信；3️⃣全局事件总线（可使用mitt插件）实现任意组件通信；4️⃣v-model实现父子数据双向绑定，支持多v-model同步；5️⃣useAttrs获取组件属性和事件，类似于$attrs功能。这些方式覆盖了组件间的各种通信需求，开发者可根据场景选择合适方案。其中props和自定义事件是最基础且常用的通信方式，而v-model简化了父子数据同步的实现。
2025-07-04 10:53:29
1163
原创 vue3逻辑复用
Vue中的逻辑复用可以通过组合式函数和自定义指令实现。组合式函数(Composables)利用Vue的组合式API封装有状态逻辑，遵循"use"前缀命名规范，只能在setup上下文中同步调用，解决了mixin的数据来源不清晰等问题。而自定义指令主要用于复用底层DOM访问逻辑，通过定义包含生命周期钩子的对象来实现，可以局部或全局注册。两者分别适用于不同场景：组合式函数侧重逻辑复用，自定义指令专注DOM操作。
2025-07-04 10:51:43
922
原创 vue事件处理
Vue.js事件与表单处理摘要： Vue提供了v-on指令（@简写）监听DOM事件，支持内联处理器和方法处理器两种形式。事件修饰符（如.stop/.prevent）可以简化常见DOM操作，按键修饰符（.enter等）方便处理键盘事件。v-model实现表单双向绑定，根据输入类型自动匹配value/checked属性和input/change事件。修饰符.lazy延迟更新，.number自动转换数字，.trim去除空格。值绑定支持静态和动态数据，使用v-bind绑定非字符串值。系统按键修饰符（.ctrl等）和
2025-07-04 10:50:32
550
原创 ant-vue-design 中a-select下拉选择框全局自定义滚动条样式
在vue项目中，实现全局使用的a-select选择框都可以默认有自定义滚动条样式。在assets中创建css文件夹用于放自定义样式文件。在main.js中引入样式文件。
2025-03-20 10:38:35
296
原创 JavaScript数组的浅拷贝&深拷贝，以及JSON.parse(JSON.stringify())深拷贝的局限性
JSON.parse(JSON.stringify()) 是一种简单但有限的深拷贝方法。如果需要处理函数、undefined、循环引用等特殊情况，可以使用第三方库（如 Lodash）或手动实现深拷贝。
2025-03-20 10:29:35
970
原创 sonar关于认知复杂度的计算：前端如何降低代码认知复杂度？
认知复杂度主要关注的是代码块的嵌套层次和控制流的复杂性。它与圈复杂度（Cyclomatic Complexity）不同，后者更多地关注代码路径的数量。认知复杂度更注重代码的可读性和理解难度。我们的代码认知复杂度为什么很高？嵌套层级太深、else-if 太多。
2025-02-12 15:08:42
767
原创 前端代码大量if else if替换成switch case 能否降低代码认知复杂度？
结构类型认知复杂度增加点数备注每个if和else ifelse增加 1 点每增加一个条件分支都会增加认知复杂度，嵌套结构也会增加复杂度。整个switch语句增加 1 点尽管有多个case分支，但整体复杂度较低，通常不会为每个case增加复杂度。：每个条件分支都会增加认知复杂度，适合处理较为复杂的条件判断。：整体复杂度较低，适合处理多个离散值的情况。根据具体的业务需求和代码复杂度，选择合适的控制结构可以有效降低认知复杂度，提高代码的可读性和可维护性。
2025-02-10 16:55:37
800
原创 解决Echarts 图表Y轴name属性太长显示不全问题
当y轴标题name太长内容显示不全被隐藏问题，在yAxis中加入以下代码：截断name,自定义要展示的最大宽度，超出后展示省略号，鼠标悬浮展示全部name。
2025-02-08 15:52:20
604
原创 WangEditor5上传/粘贴图片
wangEditor5富文本编辑器上传/粘贴图片，并回显在富文本中。也可以将上传到富文本中的图片自动加入到附件中。附件一般是一个上传图片文件组件，附件在另一篇文章中
2024-12-02 13:28:27
394
原创 ant-design-vue使用upload上传图片并实现预览缩放查看图片
ant-design-vue上传图片后实现预览查看，并支持缩放图片大小
2024-12-02 13:25:36
858
原创 a-tooltip内容过多超出屏幕的优化方案
文本内容溢出使用a-tooltip悬浮展示，但内容真的超级超级多，几千字符，直接导致悬浮窗超出屏幕高度。
2024-10-30 18:59:01
640
原创 vue中子组件的mounted/created钩子不会等待父组件created钩子中的异步方法执行完，生命周期不是跨组件的依赖或等待
vue生命周期钩子执行顺序，钩子不是跨组件等待，是自身的生命周期
2024-09-10 11:39:56
1266
原创 ant design vue 树表格chilren为空数组时也有展开符（加号+）
所有行都有展开符（加号），但实际上chilren为空的数据是不应该有展开符的。
2024-02-26 10:40:08
419
原创 antdesign vue 树形表格 table 默认展开所有行 遇到的坑！
默认展开所有行数据：给table添加`defaultExpandAllRows`属性为true。给table绑定动态key，每次数据更新都更新key值，table就会自动变成新的component，即重新渲染。
2024-02-23 14:23:47
1641
原创 a标签添加disabled属性后，没有鼠标禁用的红色样式（cursor:not-allowed不生效）
给a标签disabled属性添加上了`鼠标禁用样式`cursor:not-allowed和`鼠标禁用事件`pointer-event:none，但禁用样式不生效。
2024-01-11 15:55:41
1799
原创 ant design vue动态添加输入框，输入框动态样式bug
写了一个button点击事件动态添加输入框，当输入框为2个及以上时，在输入框右侧新增一个删除功能图标。，所以当新增输入框时，删除的icon会立即执行，而input框会在0.3s后改变宽度为90%。在这里使用了v-bind 对input输入框的style样式进行动态更新。
2023-12-26 11:26:18
643
原创 antdesign vue 自定义实现可选表格，表格某列选项可选、行可选、表头可选
需求：表格指定列中所有单选框的选中状态与对应行的单选框状态，两两相关；每一行的单选框状态又与表头的单选框状态，两两相关。（1）当选择某些行时，表头是部分选样式；所有行选中时，表头会是选中状态；所有行不选时，表头是非选中状态。（2）当点击表头单选框为选中状态时，每一行会变为选中状态。同理，表格数据选中状态与行选中状态类似上述两步~
2023-12-22 17:33:28
2467
1
原创 DOM编程-动态创建脚本、动态添加样式、DOM创建表格
动态脚本就是在页面初始加载时不存在，之后又通过 DOM 包含的脚本。有两种方式通过动态为网页添加脚本：动态加载外部文件在上面最后一行把元素添加到页面之前，是不会开始下载外部文件的。
2023-12-22 16:20:30
242
原创 DOM操作（包括Node类型、Document类型、Element类型、Text类型）
如何使用DOM操作节点、文档、HTML元素、文本节点的详细方法~
2023-12-22 16:16:41
1301
原创 Web Socket原理和使用
实时性：WebSocket提供了实时的双向数据传输，能够实现高效的实时通信，而不需要通过轮询或长轮询等间接方式。低延迟：由于WebSocket建立在TCP连接上，并且使用更轻量级的协议头部，因此可以减少数据传输的延迟，提供更快速的响应时间。节省带宽：WebSocket使用较少的网络流量，因为它使用更紧凑和有效的数据帧格式，并且可以使用二进制数据传输，而不仅仅是文本数据。更强大的功能。
2023-12-05 13:53:11
277
原创 router.push刷新当前页面，停留在当前标签页不跳转到默认标签页
首先使用了router.push传参query后，路由地址会先改变为’/flowcharts?activeKey=2’,再刷新当前页面（‘/flowcharts?activeKey=2’），就可以实现刷新并停在当前标签页！
2023-12-04 14:17:26
699
原创 Ant-Design的Tooltip如何只在内容溢出时显示，内容不溢出时不显示
scollHeight：元素内容高度，包括溢出的不可见内容。（可视区域高度+被隐藏区域高度，当内容没有溢出时clientHeight ===> scollHeight ）clientHeight ：元素像素实际高度。（内容有溢出时，理解为可视区域高度）写一个方法阻止鼠标事件，及时页面有多个Tooltip也可以重复使用该方法！
2023-11-30 15:01:12
1545
原创 JS异步编程：Promise、Async/Await、setTimeout与事件循环机制
setTimeout、Promise、Async/Await的使用和区别，它们在事件循环机制中的执行顺序
2023-11-27 10:53:48
1363
原创 MVVM模型和数据代理
在getter和setter内部去操作（读/写）data中对应的属性。具体操作：使用Object.defineProperty()把data对象中所有属性添加到vm上；为每一个添加到vm上的属性都指定一个getter和setter；VM-视图模型viewmodel-vue实例。V-视图view，模板代码。3.数据代理：通过vm对象来代理data对象中数据的操作（读/写）2.MVVM模型：M-模型model，data中的数据。优点：更方便操作data中的数据。
2023-11-24 11:23:14
82
1
前端开发基于Chrome Performance工具的页面性能监控与优化：核心指标分析及问题定位方法
2025-07-04
前端开发Vue3框架核心技术解析：响应式系统、组件通信与构建工具优化
2025-07-04
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人