自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(92)
  • 收藏
  • 关注

原创 Vue3+JS 高级前端面试题

响应式正确性:避免直接替换reactive对象的根引用(如需替换,用解构响应式状态时,使用toRefs保证响应式不丢失;深层嵌套对象无需手动递归代理,Vue3 Proxy 会懒递归处理。性能优化:计算属性依赖 “最小化”(如用而非整个list做依赖);避免在循环中定义计算属性 / 方法,减少不必要的响应式依赖。工程化:统一通过 Pinia 方法修改状态,避免组件直接修改,保证状态可追溯。编译优化核心::将静态节点提升到渲染函数外部,避免每次渲染重新创建;

2025-12-16 17:36:13 858

原创 高颜值鼠标追踪器示例

【代码】高颜值鼠标追踪器示例。

2025-12-10 17:36:52 156

原创 异步任务调度器 AsyncScheduler

设计一个异步任务调度器。

2025-11-26 18:23:31 273

原创 手写自适应码率切换(ABR)播放器控制逻辑

该播放器是基于 Vue3 + TypeScript + HLS.js 开发的自适应码率(ABR, Adaptive Bitrate Streaming)视频播放组件,核心能力是,同时支持手动控制与策略配置,兼顾播放流畅性与画质体验。

2025-11-26 18:18:42 909

原创 视频截图功能

该组件的视频截图功能支持在摄像头预览或录制过程中快速捕获视频帧,生成高清 PNG 格式截图,提供截图预览、下载、清除等完整操作流程,同时适配普通预览和全屏预览两种场景,兼顾易用性与兼容性。

2025-11-25 17:47:24 773

原创 视频放大(全屏预览)功能

该组件的视频放大功能核心为「全屏预览」能力,支持在不中断录制流程的前提下,将摄像头实时画面或录制中的视频以全屏模式展示,提升视觉体验与画面细节查看效率,同时提供便捷的操作入口与退出方式。

2025-11-25 17:44:50 562

原创 链接生成二维码组件

该组件是一个基于 Vue3 + TypeScript 开发的轻量化工具组件,核心功能为,并提供二维码预览、链接复制、二维码下载等一站式操作,适用于会议分享、资源分发等需要快速将链接转化为可扫描形式的场景。

2025-11-25 16:32:36 584

原创 增强版视频录制工具

该功能是一个。

2025-11-25 16:04:39 394

原创 2025-11-11

当 A 用户输入内容时,B 用户的光标位置需要根据 A 的输入动态调整(例如 A 在 B 光标前插入文字,B 的光标应自动后移)。:内容管理系统中,不同角色有不同的菜单访问权限,需根据用户角色权限过滤树形菜单(仅保留有权限的菜单及其父节点,无权限的子节点隐藏)。:远程会议的聊天区中,需要计算用户当前未读消息数量。:地图导航 APP 中,用户搜索 "咖啡店" 后,需根据用户当前坐标计算各店铺的直线距离,并按距离由近到远排序。的去重合并能力、贪心算法在优惠计算中的应用,实际项目中用于购物车性能优化与价格计算。

2025-11-11 18:28:22 240

原创 2025-11-10

v-forv-if二,场景:老师在白板绘图时,学生端需实时显示同步轨迹。核心:用 WebSocket 实现双向通信,Vue 响应式数据lines驱动两端视图同步,通过角色区分控制发送权限。三,场景:老师上传 100MB + 课件,需支持断点续传、进度显示。优势:通过文件 hash 实现断点续传,分片上传减少单次请求压力,实时进度反馈提升远程教学中的用户体验。:根据组件关系选择(父子 / 跨级 / 兄弟),实际项目中需结合场景灵活运用。

2025-11-10 18:27:30 258

原创 format的理解(json-schema以及自定义format)

使用场景:企业内部规范(如 11 位手机号、18 位身份证)、特定编码格式(如自定义订单号实现方式// 自定义手机号校验});// 使用自定义 format// true。

2025-11-10 11:05:08 265

原创 2025 -11 -4——vue3

在会诊系统这类逻辑复杂、复用需求高、类型安全要求严的大型项目中,Composition API 通过 “逻辑聚合、明确复用、类型友好” 三大特性,显著降低了代码维护成本和出错风险,这是 Options API 难以比拟的。

2025-11-04 17:43:41 962

原创 vue3+ts——JSX,SFC

都是在描述 “组件的渲染逻辑、交互行为和样式规则”,最终都会被编译为渲染函数,生成虚拟 DOM,再映射为真实 DOM。,无优劣之分,关键是理解底层编译逻辑和框架设计理念。

2025-10-31 15:04:56 361

原创 vue3+ts,技巧

对于需要更复杂逻辑的组件,可以使用显式定义组件选项。<template></div><slot /></div></div>// 定义 props 接口// 卡片标题title?: string// 是否有阴影shadow?: boolean// 自定义样式// 定义 emits 接口name: 'Card', // 显式指定组件名(利于调试和 IDE 提示)props: {title: {},shadow: {},},// 计算属性(带类型推断)}))

2025-10-31 14:34:51 809

原创 数据可视化

************************思考:Antv G2 的绘图流程是怎样的?*********************1.编写 canvas 标签(注意指定宽高。5.调用 zrender add 方法绘图。2.获取 canvas DOM 对象。4.初始化 zrender 绘图对象。3.初始化 zrender 对象。3.获取 Canvas 对象。1.引入 zrender 库。Zrender:绘图流程。highcharts介绍。2.编写 div 容器。WebGL:绘图流程。

2025-09-11 16:29:47 326

原创 面试技巧——仅个人观点

1.关于简历:简洁明了,突出个人技能和项目经验(项目技术栈)2.把个人博客、开源作品放在简历中3.保证能力真实性(避免使用精通导致造成面试攻击)4.面试过程注意事项(1)如何看待加班:像借钱,救急不救穷(2)千万不要挑战面试官,反考面试官(3)学会给面试官惊喜,处理问题的解决方案(4)遇到不会的问题,说出你知道的部分即可,别岔开话题(5)谈谈你的缺点:说一下你最近在学习什么即可

2025-08-12 15:14:28 128

原创 白板功能文档

医学白板是一个支持多人协作的绘图工具,主要用于医疗场景下的图形标注、测量及文字说明。支持多种绘图工具(手绘笔、直线、箭头、矩形、圆形等),并具备图形选择、移动、删除等编辑功能,同时支持直线距离测量(以厘米为单位)。坐标系统:使用百分比坐标而非像素坐标,确保在不同尺寸的画布上正确显示绘图历史:通过数组存储所有绘图动作,支持撤销、重绘和协作同步图形命中检测:实现了不同图形的点击检测算法,支持精确选择测量功能:通过像素距离与实际尺寸的转换(1cm = 37.8px)实现距离测量协作机制。

2025-08-12 14:43:31 302

原创 标注工具组件功能文档

该标注工具是一个基于 Canvas 的交互式绘图组件,支持多种绘图工具、测量功能、隐私遮挡(蒙版和马赛克)以及协作标注等功能。组件采用 Vue 3 + TypeScript 开发,结合 Element Plus 组件库,提供了丰富的标注能力和友好的用户界面。

2025-08-12 14:39:05 398

原创 数组reduce用法?

初始值决定累计器类型,回调逻辑决定转换规则,弱依赖原数组结构的灵活处理场景首选。

2025-08-12 11:44:43 159

原创 weakMap和weakSet区别?

WeakMap 和 WeakSet 均通过弱引用机制优化内存管理,主要区别在于存储结构(键值对 vs 单一对象集合)和弱引用的目标(键 vs 存储的对象本身),适用于需临时关联对象数据的场景。

2025-08-12 11:18:46 305

原创 2025面试题——(13)

需要键值对 →。

2025-08-11 18:19:16 235

原创 2025面试题——(12)

将子元素的事件监听委托给父元素,利用事件冒泡触发父元素的监听函数,再通过。

2025-08-11 15:33:41 861

原创 2025面试题——(11)

script>变为 <script>,直接显示,而不会作为脚本执行。脚本内容:获取 cookie,发送到我的服务器(服务器配合跨域。一个博客网站,我发表一篇博客,其中嵌入<script>脚本。发布这篇博客,有人查看它,我轻松收割访问者的 cookie。替换特殊字符,如 <变为 < >变为 >前端要替换,后端也要替换,都做总不会有错。

2025-08-07 11:24:49 189

原创 2025面试题(10)

url 和文件不变,则会自动触发 http 缓存机制,返回 304;,避免无样式闪烁、优化渲染流程,从而提升用户体验和页面性能。这是网页开发中被广泛遵循的最佳实践。非 SSR(前后端分离):先加载网页,再加载数据,再渲染数据;文件内容不变,则 hash 不变,则 url不变;直接用 drag 事件,则会频发触发,很容易导致卡顿。:生成CSSOM树,与DOM合并为渲染树(Render Tree)。SSR:服务器端渲染:将网页和数据一起加载,一起渲染;(2)减少访问次数:合并代码,SSR服务器端渲染,缓存。

2025-08-06 18:34:59 474

原创 2025——js面试题(9)——开发环境相关

git add用于将工作区的修改添加到暂存区,是提交前的准备步骤。比如git add .可以添加当前目录所有变更,让这些修改进入 "待提交" 状态。把暂存区的修改提交到本地仓库,-m后是提交说明(如 "修复登录 bug"),形成一条版本记录。将本地仓库的提交推送到远程仓库(origin是远程仓库别名)的master分支,实现代码共享。从远程master分支拉取最新代码并合并到本地当前分支,确保本地代码与远程同步,减少冲突。用于查看和编辑网页的 HTML 结构和 CSS 样式。

2025-08-06 10:57:15 262

原创 实现视频实时马赛克

通过临时画布生成块状图案,确保视觉效果一致;采用百分比坐标存储位置,适配不同尺寸的画布;支持实时编辑(移动、调整尺寸)和网络同步,满足协作需求;截图时单独处理绘制逻辑,确保导出内容完整。

2025-07-29 17:07:16 477

原创 实现多路标注截图

截图功能通过创建合成画布→分层绘制(背景→视频→标注)→导出下载的流程,实现了标注内容与原始画面的精准融合,同时保留了马赛克等隐私保护元素。核心是通过坐标比例转换确保各元素位置对齐,以及临时画布技术处理复杂标注(如马赛克)的绘制。

2025-07-29 17:00:50 834

原创 在vue3中watch和watchEffect的区别

是 "自动收集依赖" 的立即执行监听。是 "显式指定依赖" 的惰性监听,

2025-07-24 11:35:53 221

原创 2025 js面试题8——(https)

使用第三方证书(慎用免费、不合规的证书)加密方式:对称加密,非对称加密。http 和 https。

2025-07-23 17:58:19 96

原创 2025js——面试题(8)-http

302临时重定向(配合location,浏览器自动处理)(返回302,然后进入新的地址)301永久重定向(配合location,浏览器自动处理)(域名到期出现的域名)8.Content-type发送数据格式,如application/json。1.Content-type返回数据格式,如application/json。3.Content-Encoding 返回数据的压缩算法,如gzip。Etag 资源的唯一标识(一个字符串,类似人类的指纹)一致则返回304,否则返回200和最新的资源。

2025-07-14 18:48:07 577

原创 axios 与 fetch 的区别

Axios:功能全面,适合追求开发效率和兼容性的项目。Fetch:轻量原生,适合对体积敏感或不需要复杂功能的场景。项目中使用Axios或Fetch时如何处理错误?如何在项目中选择使用Axios还是Fetch?在项目中使用Fetch发送POST请求时如何设置请求体?

2025-07-11 14:55:25 1395

原创 2025 js——面试题(7)——ajax相关

题目:一、手写一个简易的AJAX?结合promisejquery和Ajax0-UNSET 尚末调用 open 方法1-OPENED open 方法已被调用2-HEADERS RECEIVED send 方法已被调用,header 已被接收3-LOADING 下载中,responseText 已有部分内容4-DONE 下载完成2xx-表示成功处理请求,如 2003xx-需要重定向,浏览器直接跳转,如 301 302 3044xx-客户端请求错误,如 404 403。

2025-07-11 14:47:34 591

原创 封装一个有最小化的dialog组件

el-button type="primary" @click.stop="toggleMinimize" class="min-btn">最小化</el-button><el-button type="danger" class="close-btn" @click.stop="close" plain>关闭</el-button>ElMessageBox.confirm(props.confirmTxt, '温馨提示', {-- 最小化后的弹窗 -->-- 主弹窗和蒙板 -->

2025-07-10 11:52:13 518

原创 2025——js面试题(6)

五、无限下拉的图片列表,如何监听每个图片的点击?3.用matches来判断是否触发元素。2.用e.target获取触发元素。三、编写一个通用的事件监听函数?2.事件会顺着触发元素,向上冒泡。二、分别拆解url各个部分。一、如何识别浏览器的类型。四、描述事件冒泡的流程?1.基于DOM树形结构。

2025-07-10 11:47:08 201

原创 2025——js面试题(5)

DOM性能:(DOM 操作非常“昂贵”避免频繁的 DOM;操作 对 DOM 查询做缓存 将频繁操作改为一次性操作)attribute:修改html属性,会修改html结构。property:修改对象属性,不会提现到html结构中。一、DOM 操作:DOM是哪种数据结构DOM树。三、attr和property的区别。四、一次性插入多个DOM,考虑性能?两者都有可能引起DOM重新渲染。二、DOM操作常用的API。

2025-07-09 17:03:04 124

原创 2025 js-面试题(4)

异步(setTimeout,ajax等)使用回调,基于event loop。宏任务:setTimeout,setInterval,Ajax,DOM事件。pending——resolved或者pending——rejected。catch:正常返回resolved 报错返回rejected。then:正常返回resolved 报错返回rejected。遇到异步,会先‘记录下’,等待时机(定时,网络请求等)rejected:会触发后续catch回调函数。resolved:会触发后续then回调函数。

2025-07-09 09:51:51 354

原创 2025-js-面试题(3)

同步任务优先执行:按代码顺序立即执行(135异步任务(setTimeout)后执行:即使延迟0ms,也会等同步任务完成后才执行(4先于2,因为4的延迟更短,先进入任务队列)。事件循环:负责将任务队列中的异步任务调度到主线程执行。

2025-06-26 18:17:43 531

原创 2025 js面试题(2)

优点数据封装,保护私有变量保留状态,避免全局变量实现函数工厂和柯里化优化性能(如缓存)缺点内存占用:闭包会保留对变量的引用,可能导致内存泄漏调试困难:闭包的作用域链可能不直观性能开销:创建闭包会增加一定的内存和 CPU 开销四、创建 10 个`<a>'标签,点击的时候弹出来对应的序号?

2025-06-25 18:16:47 489

原创 2025——js 面试题

在大多数情况下,推荐使用方法,因为它简洁、高效且跨环境安全。如果需要兼容非常旧的浏览器(如 IE8 及以下),可以使用方法作为替代。七、手写一个简易的jquery,考虑插件和扩展性?八、class的原型本质,怎么理解?class:是 “家族规矩” 的简洁写法,规定了 “每个成员(实例)该有啥属性(name)、家族工具箱(prototype)里放啥方法(sayHi)”。原型(prototype):是 “家族共用工具箱”,存着大家通用的能力(方法),避免每个成员重复带工具(节省内存)。原型链。

2025-06-23 16:34:38 948

原创 原生写radio组件

title: '简洁radio',

2025-06-17 16:06:56 411

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除