- 博客(230)
- 收藏
- 关注
RSS订阅
原创 元素偏移（offset，scroll,client)介绍，动态设置类名，样式
属性 / 方法描述表示一个元素的顶部边框的宽度，以像素表示。表示一个元素的左边框的宽度，以像素表示。在页面上返回内容的可视高度（高度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）在页面上返回内容的可视宽度（宽度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）返回任何一个元素的高度包括边框（border）和内边距（padding），但不包含外边距（margin）
2024-08-17 10:56:45
2691
5
原创 js获取本周时间,当月的日期,计算两个时间差，距离当前日期后几天的日期
本片文章主要记录一下遇到的问题，js计算当前一周的日期。感兴趣的小伙伴可以学习一下。
2024-08-02 16:50:48
9185
33
原创 javascript同步和异步代码
特性同步 (Synchronous)异步 (Asynchronous)执行顺序按代码顺序执行不按顺序执行阻塞性会阻塞后续代码不会阻塞后续代码返回值立即返回结果延迟返回结果使用场景简单计算、数据处理网络请求、文件操作、定时器性能影响可能造成界面卡顿更好的用户体验。
2025-09-24 15:02:39
314
原创 JavaScript 事件循环机制
nextTick是 Vue 提供的 API，用于在 DOM 更新完成后执行回调函数。// 这里可以获取到更新后的 DOM});异步更新：数据变化 → 通知Watcher → 加入队列 → 下一个tick批量更新DOM性能优化：同一个事件循环中的多次数据变化只会触发一次渲染$nextTick原理：利用微任务队列，确保回调在DOM更新后执行执行顺序：同步代码 → Vue异步更新（微任务）→ 其他微任务 → 宏任务代表一个个独立的、离散的工作单元。JavaScript 引擎在每次事件循环中会。
2025-09-23 17:05:42
1117
原创 箭头函数和普通函数的区别
特性箭头函数普通函数this指向词法作用域（定义时决定），继承自外层函数动态作用域（调用时决定），取决于调用方式能否作为构造函数否，使用new调用会报错是arguments对象没有自己的arguments对象有自己的arguments对象prototype属性没有prototype属性有prototype属性语法简洁性更简洁，适合短小的回调函数语法相对完整yield关键字不能用作 Generator 函数可以用作 Generator 函数重复命名参数不允许。
2025-09-23 11:06:44
651
原创 vue大文件上传
对于大文件上传，我主要采用分片上传+断点续传的方案。前端将文件分片，计算文件hash，并发上传分片并实时显示进度。后端提供检查、上传和合并接口，支持秒传和断点续传。同时我会注意内存控制、错误处理和用户体验优化。
2025-09-22 15:43:41
557
原创 vue中key的作用
这是key最核心的作用。它帮助 Vue 的 Diff 算法在对比新旧虚拟 DOM 时，快速准确地识别哪些节点是新的、哪些是旧的、哪些只是移动了位置。从而最大限度地复用已有的 DOM 元素，避免不必要的销毁和创建，提升性能。当列表中的元素拥有自己的临时状态（如用户输入的<input>、已切换的<checkbox>）或子组件状态时，使用唯一的key可以保证在数据顺序变化后，这些状态能跟随正确的数据项，而不会错乱。如果一个待办事项列表没有key或使用index作为key。
2025-09-17 16:11:50
901
原创 vue中为什么需要虚拟dom
方面没有虚拟 DOM有虚拟 DOM性能直接、频繁操作真实 DOM，性能开销大。差异更新，批量操作，减少重排重绘，性能更高。开发模式通常需要命令式地操作 DOM，代码繁琐易错。声明式编程，关注数据，自动更新 UI，代码更易维护。跨平台紧密耦合浏览器环境，难以移植。抽象了渲染过程，轻松实现 Web、小程序、原生应用渲染。需要注意的是，虚拟 DOM 并不是最快的方案，在极致的性能优化下，手动进行精细的 DOM 操作可能更快。但对于绝大多数应用来说，虚拟 DOM 提供了性能与可维护性之间的最佳平衡。
2025-09-17 16:06:48
879
原创 javaScript变量命名规则
规则类型要求示例硬性规则字母、数字、组成，不能数字开头，不能是关键字myVar1_temp$item软性规则（最佳实践）使用小驼峰命名法，名称要有意义，布尔值用ishas前缀，常量全大写firstNameisActiveMAX_SIZE清晰的变量名是代码文档的一种形式，它能极大地提高代码的可读性，让你和你的队友在未来更容易理解和维护代码。
2025-09-01 23:03:18
860
原创 hasOwnProperty是什么
特性in操作符检查范围仅对象自身对象自身 + 原型链继承属性falsetrue自身属性true不存在属性false简单来说：当你只关心对象“自己拥有”的属性时，就使用（或其现代替代方案。
2025-09-01 22:55:47
517
原创 为什么vue3会移除过滤器filter
方面过滤器 (Filters)方法/计算属性 (Methods/Computed)功能单一，仅格式化全能，无限制学习成本需要学习新语法和概念使用标准 JavaScript 概念TypeScript 支持差，难以类型推断优秀，完美支持灵活性受限（只能在插值和v-bind中使用）无限制，可在任何地方使用一致性引入特殊语法，破坏表达式一致性与普通 JavaScript 一致总而言之，Vue 3 移除过滤器不是一个轻率的决定，而是一个经过深思熟虑的、为了框架的更简单、更强大、更易于维护。
2025-08-30 11:00:14
959
原创 viteStaticCopy 插件介绍
是一个 Vite 插件，用于在构建过程中将静态文件复制到输出目录。在您的项目中使用的是^2.2.0版本。在您的项目中，动态主题支持: 根据环境变量复制不同主题的资源资源管理: 将源码中的静态资源复制到构建输出目录多域名配置: 支持不同域名下的不同资源配置这种配置方式使得项目能够灵活地支持多种主题和配置，是一个很好的架构设计实践。
2025-08-26 17:43:46
726
原创 JavaScript (JS) 和 TypeScript (TS)对比
JavaScript：一种灵活的、动态类型的、解释执行的脚本语言，是 Web 的通用语言。TypeScript：JavaScript 的一个超集，为其添加了静态类型定义和一些高级特性，最终会被编译成纯 JavaScript 运行。你可以把 TS 理解为“带了类型系统的 JS”或者“穿了正式西装的 JS”。它最终的目的还是变成 JS，但在编写阶段提供了强大的工具支持。
2025-08-26 17:24:42
465
原创 vue2和vue3的对比
Vue 2：基于的成熟稳定的框架，通过一系列选项（datamethodscomputed等）来组织代码，简单易上手，但大型项目代码组织性会变差。Vue 3：基于的现代化框架，允许通过逻辑功能（而非选项类型）来组织代码，提供了更好的逻辑复用、TypeScript 支持和更强的性能。Vue 2Vue 3状态维护期 (LTS)，不再增加新特性活跃开发，未来方向优点稳定、生态成熟、学习曲线平缓性能卓越、逻辑复用能力强、TS支持完美、现代化缺点响应式系统有缺陷、TS支持弱、大型项目组织性差。
2025-08-26 17:20:53
847
原创 Vuex 和 Pinia 各自的优点
Vuex：Vue 官方曾经的状态管理标准解决方案，成熟稳定，概念清晰，但语法稍显冗长。Pinia：Vue 官方推荐的新一代状态管理库，API 设计极其简洁，完美支持 TypeScript，且兼容 Vue 2 和 3。操作VuexPinia优势方定义 StatePinia(函数式，更好的 TS 支持)定义 Getter平手同步更新Pinia(更直观，代码少)异步操作Pinia(统一用 action，无歧义)模块化创建模块，在主 store 中注册创建独立 store，直接引入使用Pinia。
2025-08-26 17:17:08
938
原创 V-Scale-Screen（解决大屏适配）
V-Scale-Screen 是一个基于 Vue.js 的屏幕自适应缩放组件，主要用于大屏数据可视化项目中，解决不同分辨率屏幕下的自适应显示问题。它能够将设计稿按照指定比例缩放到实际屏幕尺寸，保持内容在不同设备上的一致显示效果。基本使用模板中使用四、配置参数参数名类型默认值说明widthNumber1920设计稿宽度heightNumber1080设计稿高度modeString‘scale’缩放模式（scale/full）delayN
2025-08-18 15:48:04
1634
原创 css变量的妙用（setProperty()的使用）
本文介绍了如何使用 setProperty() 方法动态修改 CSS 样式，重点演示了在 Vue 项目中操作 CSS 变量的应用。通过一个红色圆点水平移动的动画案例，详细说明了如何： 使用 setProperty() 动态设置容器宽度变量 --w 在 CSS 动画中通过 calc(var(--w) - 100%) 计算移动终点 比较了 setProperty() 与传统 style 属性操作的区别 提供了 Vue 中使用 ref 替代 querySelector 的最佳实践 关键点包括：CSS 变量必须用
2025-08-15 10:02:38
877
原创 uni.setStorage 详解
是 UniApp 提供的一个用于本地数据存储的 API，它可以将数据存储在客户端本地缓存中，类似于 Web 开发中的。
2025-08-14 17:13:52
875
原创 Uniapp 中的 uni.vibrate 震动 API 使用指南
是 Uniapp 提供的设备震动 API，可以让移动设备产生振动反馈。这个 API 主要适用于移动端（App 和小程序），在 H5 环境下通常无效。2. 长震动（400ms）二、兼容性写法由于不同平台支持程度不同，推荐使用以下兼容写法：三、平台差异说明平台支持情况微信小程序支持 和 App支持 和 H5不支持其他小程序部分支持（支付宝小程序支持，百度小程序部分支持，需实测）四、实际应用场景1. 按钮点击反馈2. 重要操作确认3.
2025-08-14 16:05:06
903
1
原创 Uniapp 获取系统信息：uni.getSystemInfo 与 uni.getSystemInfoSync
在 Uniapp 开发中，和都是用于获取设备系统信息的 API，但它们的调用方式和适用场景有所不同。
2025-08-14 16:02:15
1495
原创 Uniapp 中 uni.request 的二次封装
在 Uniapp 项目中，对进行二次封装可以提高代码复用性、统一处理错误和简化 API 调用。
2025-08-14 14:54:23
587
原创 Uniapp 自定义头部导航栏
Uniapp自定义导航栏实现指南摘要：本文介绍了Uniapp中自定义头部导航栏的三种方法：1)全局配置pages.json；2)单页面配置；3)完全自定义组件方案。重点讲解了隐藏原生导航栏后如何创建包含状态栏、标题和操作按钮的自定义组件，提供了完整的组件代码示例，并强调了注意事项如高度计算、平台差异处理和内容区padding设置。通过这几种方式，开发者可以实现灵活多样的导航栏样式，满足不同项目的UI需求。
2025-08-14 11:26:20
1153
原创 让文字立起来
属性用于控制元素的可见部分，类似于 Photoshop 中的蒙版（Mask）。它可以基于图像、渐变或 SVG 来隐藏或显示元素的某些区域。属性用于对元素（通常是图像或文本）应用图形效果，比如模糊、亮度调整、阴影等。，这会创建一个从透明到黑色的渐变蒙版，使阴影从上到下逐渐消失，营造出更自然的阴影淡化效果。伪元素，使阴影变得模糊，从而增强立体感。
2025-06-27 10:39:07
976
原创 CSS width: fit-content 详解
是 CSS 中一个非常实用的属性值，它可以让元素的宽度自动调整以适应其内容。下面我将详细解释它的工作原理和使用场景。上面的例子中，div的宽度会刚好包裹文本内容，而不会扩展到父容器的100%宽度。是一个非常实用的CSS特性，特别适合需要元素宽度自适应内容的场景。这样按钮的宽度会刚好包裹文字内容，而不会过宽或过窄。
2025-06-26 11:31:02
724
原创 多行文字擦除效果
文字擦除效果</.appwidth;height;;left;top;pmargin;color;inherits;;.text--v;color;animation;
2025-06-25 23:03:07
346
原创 使用IntersectionObserver实现图片懒加载
这段代码实现了一个基本的图片懒加载功能，使用 IntersectionObserver API 来检测图片是否进入视口（viewport），如果是，则将 data-src 的值赋给 src 属性，从而触发图片加载。当 entry.isIntersecting 为 true 时，表示目标元素（img）已进入视口。将 data-src 中的真实图片 URL 赋给 src，浏览器会自动加载图片。当目标元素 刚进入视口（0%） 时触发回调。默认是 0，可以不写。图片加载后，停止观察该元素，避免重复触发。
2025-06-25 11:37:37
490
原创 CSS :focus-within `:has,selection等伪类
是一个功能强大的CSS伪类，它允许开发者选择包含特定子元素或满足特定条件的父元素。这个选择器被称为"父选择器"或"反向选择器"，因为它可以选择基于后代元素的祖先元素。这个选择器非常有用，可以在子元素获得焦点时对父元素或祖先元素应用样式。伪类极大地扩展了CSS的选择能力，使开发者能够基于内容或子元素状态更灵活地设计样式，减少了JavaScript处理样式的需求。是一个强大的CSS伪类，可以极大地增强用户界面的交互性和可访问性，特别是在表单和复杂交互组件中。伪类不同，后者只在元素本身获得焦点时匹配。
2025-06-24 16:02:43
1249
原创 IntersectionObserver 详细介绍（实现加载下一页效果）
IntersectionObserver API 提供了一种异步观察目标元素与祖先元素或顶级文档视口交叉状态的方法，非常适合实现无限滚动或分页加载功能。
2025-06-24 15:28:17
1401
原创 卡片翻转效果
卡片翻动</.appwidth;height;;position;display;;;.cardwidth;height;cursor;box-sizing;;;color;width;height;;border;display;;;position;;box-shadow;transition;;;box-shadow;
2025-06-23 17:10:50
514
原创 css 四角线框跟随移动
*线框与图片的间隙 *//*图片左上角横坐标 *//*图片左上角纵坐标 *//*四角线框长度 *//*四角线框粗细 */
2025-06-23 13:21:30
1474
JavaScript日期操作技术解析与实践应用
2024-10-20
微PE工具箱系统重装详细指南
2024-10-11
Converting circular structure to JSON
2024-12-11
TA创建的收藏夹 TA关注的收藏夹
TA关注的人