- 博客(1230)
- 收藏
- 关注
RSS订阅
原创 Lodash一个一致性、模块化、高性能的JavaScript实用工具库
Lodash通过降低array、number、objects、string等等的使用难度从而让JavaScript变得更简单。遍历array、object和string对值进行操作和检测创建符合功能的函数futil-js是一套用来补足lodash的实用工具集。
2022-07-25 22:27:22
1742
原创 本地存储工具函数封装Cookie、localStorage、sessionStorage-值得收藏
工具函数封装localStorage 存储// 数据存储到本地缓存const localSet = (key, value, day) => { let d = new Date(); let time = 0; day = (typeof (day) === 'undefined' || !day) ? 1 : day;// 时间,默认存储1天 time = d.setHours(d.getHours() + (24 * day));// 毫秒 ...
2021-10-21 17:33:42
849
1
原创 Vue项目中如何快速上手Vuex状态管理--使用心得-值得珍藏
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，...
2021-05-18 10:50:37
2008
27
原创 Grid网格布局教程-语法篇
一、概述网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后.
2021-03-24 14:51:42
4726
原创 使用Echarts柱形图属性解读大全
Echarts官网在这个官网中有详细教程以及API，很容易入手Echarts，从个人刚学习Echarts图表来看，它的难度在于它有自己的一套属性，这和我们平时用的css是不同的，因而我们需要什么效果就得去遵守它的属性对柱形图各部分分析:（重点）根据柱形每个部分的专业名称去寻找官网中的配置项手册对应的属性<!DOCTYPE html><html><head> <title>echarts</title><
2020-12-01 14:01:56
2694
原创 React学习笔记--进阶之路
react框架 *react是facebook内部的一个javascript类库，用于构建用户界面的 JavaScript 库react官网：https://react.docschina.org/react不是一个完整的MVC框架，最多可以认为是MVC中的V（View）react引入了虚拟DOM机制react引入了组件化思想react使用facebook专门为其开发的一套语法糖--jsx使用注意事项-jsx语法注意事项 jsx语法* 标签内容内属性 例如*
2020-08-12 16:47:19
798
1
原创 小程序学习笔记--进阶之路
微信公众平台宣传、自媒体性的的事情。提升自身或企业的影响力。也有一些个人和组织进行卖产品公众号分类订阅号订阅号：为媒体和个人提供一种新的信息传播方式，主要功能是在微信侧给用户传达资讯；（功能类似报纸杂志，提供新闻信息或娱乐趣事）适用人群：个人、媒体、企业、政府或其他组织。（哪些组织可以注册订阅号）群发次数：订阅号（认证用户、非认证用户）1天内可群发1条消息。服务号服务号：为企业和组织提供更强大的业务服务与用户管理能力，主要偏向服务类交互（功能类似12315，114，银行，
2020-07-06 23:05:31
2422
1
原创 ES5-ES6中数组方法使用详解
Array 对象属性constructor 返回对创建此对象的数组函数的引用。 length 设置或返回数组中元素的数目。 prototype 使您有能力向对象添加属性和方法。传统Array 对象方法toSource() 返回该对象的源代码。 toString() 把数组转换为字符串，并返回结果。 toLocaleString() 把数组转换为本地数组，并返回结果。 valueOf() 返回数组对象的原始值修改原数组 不修改原数组 push， pop concat
2020-06-11 23:02:46
1429
2
原创 Flex弹性布局教程-语法篇
网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于，依赖属性 +属性 +属性。它对于那些特殊布局非常不方便，比如，就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介绍它的语法，给出常见布局的 Flex 写法。网友为本文的所有示例制作了，也可以参考。和。
2020-06-05 13:06:14
1904
2
原创 Vue.js学习笔记--进阶之路
框架，framework，是能够让程序开发人员更好的专注于业务逻辑的开发，而无需关心底层功能的实现。vue是一个渐进式 JavaScript 框架，Vue (读音 /vjuː/，类似于 **view**) 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。国人自己的开发的框架，作者是：尤雨溪vue有两大核心数据驱动页面组件化methods，用来存放用户自定义函数vue支持我们自定义一些指令来完成一定的操作。
2020-06-01 22:23:36
1394
1
原创 Node.js学习笔记--进阶之路
简介Node 是一个软件, 可以脱离浏览器, 独立执行JS文件Node实现了ECMAScript标准, 所以语言跟JavaScript基本一致 因为想成为全栈开发(前后端都可以的大拿) PHP等语言是阻塞的, 性能不如nodeJS node是事件驱动, 非阻塞的 Node中是大量的, 事件和回调函数 单线程（主线程单线程，后台I/O线程池） 跨平台 (Node软件可以安装在window系统/linux系统/mac系统/等等)安装Node...
2020-05-10 19:06:59
2505
原创 JS进阶学习之ES5-ES6
ES5补充拓展20200429ECMA介绍ECMA (欧洲计算机制造商协会) 这个组织的目标是评估、开发和认可计算机标准ECMA 发布 262 号标准文件（ECMA-262），规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScriptECMAScript5简介ECMAScript5, 就是ECMAScript的第五代标准, 也加ES5, 或者叫ESMAScrip...
2020-04-29 22:51:58
905
原创 CSS/jQuery基本选择器手册
CSS基本选择器选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素。 1 #id #firstname 选择 id="firstname" 的所有元素。 1 * * 选择所有元素。 2 element p 选择所有 <p> 元素...
2020-04-26 09:11:56
558
原创 JavaScript学习笔记--进阶之路
了解js特性&事件使用202003161、JavaScript简介历史： 第一个浏览器 就是文本和图片网景公司 增强用户的使用体验 急需一门语言 实现用户和网页之间的交互诞生：为了实现用户和网页的交互而出现1、开发一门新语言2、使用已经成熟的语言（java<sun> python c ------） 这个时候使用的是java ---...
2020-03-16 20:25:33
2127
原创 前端高频面试题--持续随缘更新
目录1、简述的作用？2、常见的浏览器及其内核有哪些？3、常见的块级标签和行内标签分别有哪些？4、b 和 strong （i 和 em ）标签的区别？5、谈谈对语义化的理解？1、简述<!DOCTYPE>的作用？<!DOCTYPE>帮助浏览器正确地显示网页声明叫做文件类型定义（DTD），告诉浏览器这个文件的类型，让浏览器知道该用哪个规...
2020-02-10 18:50:22
937
原创 大前端学习笔记--持续随缘更新
目录0210--前端知识&HTML常用标签0210--前端知识&HTML常用标签1、浏览器及内核介绍：chrome谷歌： 特点——简洁、快速、安全 内核——webkit,Blink 费用——收费Firefox火狐——Mozilla公司： 特点——非盈利、Gecko项目开源 内核——GeckoSafari苹果——苹果...
2020-02-10 13:55:24
1633
6
原创 Vue3实现默认的空图片和商品图片展示转换小技巧
该代码实现了一个商品陈列展示组件，主要功能包括：1.显示5个商品展示位，当前展示2件商品；2.支持一键清空陈列商品；3.提供一键加购功能；4.空位显示默认图片。组件采用Vue3的Composition API开发，使用网格布局展示商品，通过响应式数据管理商品列表。商品展示位包含图片、名称和价格信息，顶部显示当前陈列数量（2/5）。该组件支持后续扩展，如从API获取商品数据、添加拖拽功能等。
2026-04-08 10:36:14
7
原创 Vue3 全局事件总线封装指南-mitt 的优雅集成
Vue3事件总线替代方案：mitt封装指南 摘要：针对Vue3移除$on/$off事件总线API的情况，本文推荐使用mitt轻量级库(200bytes)实现组件通信。提供了完整的封装方案，包括：1) 类型安全的useEmitt Hook封装，支持自动清理和once方法；2) 多种使用场景示例(基础使用、手动管理、非组件环境)；3) 企业级最佳实践(事件命名规范、管理器封装)；4) 核心原理分析和高级特性(通配符监听、中间件、异步处理)。特别强调内存泄漏防范和类型安全实现，同时对比了适用/不适用场景，为Vue
2026-03-16 10:20:39
27
原创 前端项目中如何判断当前窗口是否位于顶层呢？-window.parent
本文详细解析了window.parent === window表达式的用途，用于检测当前窗口是否被嵌套在iframe中。当表达式为true时表示是顶层窗口，false则表示被嵌套。文章分析了不同嵌套情况下的窗口引用关系，包括单层和多层iframe场景，并探讨了跨域限制带来的安全问题。重点介绍了该技术的实际应用，如防止点击劫持、微前端架构、OAuth授权流程等场景，同时提供了安全通信、性能优化和调试测试的最佳实践。最后强调正确处理窗口关系对构建安全可靠的Web应用至关重要，特别是在复杂的跨域环境中。
2026-02-26 10:48:48
42
原创 Vue项目中使用Ant Design Vue - table组件实现表格合并-demo
本文介绍了Ant Design Vue表格组件的行列合并功能实现方法。表格支持通过column里的colSpan设置列合并，使用render中的单元格属性colSpan/rowSpan实现行列合并（值为0时不渲染）。示例展示了两种合并方式：1）水平合并通过设置colSpan，2）垂直合并通过rowSpan控制。还演示了如何将嵌套数据结构转换为表格数据，并通过rowSpan实现组件外观信息的垂直合并显示。代码中包含了数据转换函数transformData，用于处理原始数据并添加合并所需的rowSpan属性。
2026-02-02 15:44:09
108
原创 Day.js：轻量级日期库的全面指南与时间范围限制实战
摘要：Day.js是一个轻量级(仅2KB)的JavaScript日期处理库，提供与Moment.js相似的API。它支持日期解析、格式化、计算、比较等核心功能，具有不可变性和国际化特性。文章详细介绍了Day.js的安装、基础用法和常用API，包括日期操作、时间差计算和时区处理。通过三个实战案例（纯JS验证器、Vue3组件和React Hook实现）演示了如何限制时间选择范围不超过30天。最后推荐了常用插件并给出性能优化建议，是替代Moment.js的理想选择。
2026-01-26 10:16:37
93
原创 清除npm、yarn和pnpm的缓存的方式和设置缓存位置
本文提供了npm、yarn和pnpm三大包管理器的缓存管理指南。主要内容包括：各工具的缓存清理命令（npm cache clean、yarn cache clean、pnpm store prune）、缓存路径查看与修改方法，以及不同系统下的默认缓存位置对比。实用建议涵盖：统一设置缓存路径提升管理效率、创建定期清理脚本、SSD优化配置技巧，以及Windows系统的权限解决方案。文末特别提示修改全局配置后需重启终端生效，并说明--global参数的作用范围。这些操作能有效解决开发者日常遇到的缓存问题，提升开发
2026-01-13 10:09:15
379
原创 HTML+CSS+JavaScript实现图像对比滑块demo
本文介绍了一个图像对比滑块的实现方案，通过叠加两张图片并使用滑块控制显示区域。核心实现包括：1) 使用绝对定位叠加图片；2) 通过CSS clip-path动态裁剪图片；3) JavaScript处理滑块拖动事件；4) 响应式设计适配不同设备。该方案支持鼠标、触摸和键盘操作，提供直观的图片对比体验，适用于产品展示、设计比较等多种场景。
2026-01-01 09:00:00
786
原创 Nuxt中Pinia状态持久化：彻底解决“sessionStorage is not defined”的SSR难题
在Nuxt.js项目中使用pinia-plugin-persistedstate配置sessionStorage时，常见的"sessionStorage is not defined"错误是由于服务端渲染(SSR)时Node.js环境缺少浏览器API导致的。解决方案主要有三种：1)在Store定义中使用process.client判断客户端环境，仅在该环境下启用持久化配置；2)使用专为Nuxt设计的@pinia-plugin-persistedstate/nuxt模块；3)通过.clie
2025-12-15 10:34:40
112
原创 CSS滚动吸附详解：构建精准流畅的滚动体验-scroll-snap-type
CSS属性scroll-snap-type:x mandatory用于强制水平滚动容器在停止时精准对齐吸附点。该属性需配合子项的scroll-snap-align使用，定义吸附位置（如start/center/end）。mandatory表示必须严格对齐，而proximity则根据滚动情况智能判断是否吸附。典型应用包括横向轮播图，确保滚动停止时图片边缘或中心自动对齐容器，提升用户体验。
2025-12-02 14:29:54
1183
原创 vue3项目实现大屏分辨率动态适配方案-demo
摘要：本文详细介绍Vue3项目中PC端多分辨率适配方案，涵盖基础到高级的实现方法。基础方案采用视口单位(vw/vh)结合媒体查询，确保可靠适配；高级方案引入动态REM计算和PostCSS自动转换。文章还提供响应式布局Hook实现、断点管理方案，以及图表、表格等典型场景的解决方案。优化方面包括CSS变量控制、动态资源加载和性能监控建议，并配套开发环境测试工具，确保各分辨率下的显示效果。通过视口单位、弹性布局、动态REM和Vue3响应式API的综合应用，实现从1280px到2560px的完美适配。
2025-11-26 13:53:55
273
原创 CSS Flexbox 与 Grid 的默认行为-布局的底层机制
本文深入解析了Flexbox和Grid布局的默认行为及其差异。Flexbox默认采用内容优先的一维布局，通过flex-direction、flex-wrap等属性控制项目排列；而Grid作为二维系统，其默认行为由容器优先，通过grid-template-columns等属性定义轨道。重点分析了两者在对齐系统、项目尺寸控制等方面的不同表现。同时针对CSS中text-overflow:ellipsis失效问题，提供了多种解决方案，包括Flex/Grid布局中设置min-width:0、表格使用table-lay
2025-11-18 15:45:40
758
原创 Vue中使用axios+pinia实现token续期功能，自动刷新token
本文介绍了在Vue3项目中实现token自动续期的完整方案。核心内容包括：1）基于Pinia的状态管理，实现accessToken和refreshToken的存储与刷新；2）通过axios拦截器处理401错误，自动刷新token并重试请求；3）采用请求队列机制防止并发刷新冲突；4）结合主动刷新策略提升用户体验。方案还涵盖安全存储、CSRF防护、错误处理、性能监控等企业级特性，支持多租户和离线场景，并提供了丰富的开发调试工具，形成了一套完整的JWT认证解决方案。
2025-11-10 18:03:41
320
原创 CSS实现跑马灯效果-案例
本文介绍了一个纯CSS实现的跑马灯效果，包含文字和图片两种滚动形式。核心原理是使用CSS的@keyframes动画和transform属性，通过translateX实现水平移动。特色功能包括：悬停暂停、三种速度调节、反向滚动以及响应式设计。代码中通过复制内容实现无缝循环，并利用:hover伪类控制动画状态。整个效果无需JavaScript，适应不同屏幕尺寸，可直接复制使用。
2025-11-03 16:36:05
1156
原创 Vue中使用a-table组件实现复选框状态判断
摘要：实现表格复选框联动控制，要求：1)状态为1时复选框可用；2)选中记录后，后续只能选择相同templateType的数据。通过watch监听选中项变化，获取首个选中项的模板类型；在getCheckboxProps中判断当前行是否满足条件（状态=1且模板类型匹配），动态设置disabled属性。使用Vue3的ref和watch实现数据响应，确保选中项与模板类型的一致性。
2025-10-28 09:22:49
227
原创 White-space与Text-wrap属性详解
CSS中的white-space和text-wrap属性都用于控制文本排版，但侧重点不同。white-space主要处理空白字符（空格、换行等），决定是否保留源码格式和自动换行，支持normal/nowrap/pre等值，浏览器兼容性好。text-wrap是较新属性，专门控制换行方式，提供wrap/nowrap/balance/pretty等值，能实现更精细的排版效果（如平衡行长度），但部分特性浏览器支持有限。实际开发中可组合使用这两个属性，white-space适合处理代码/日志等需要保留格式的场景，te
2025-10-24 09:18:25
906
原创 CSS Grid中auto-fill和auto-fit的使用
CSS Grid布局通过auto-fit和minmax()函数实现响应式卡片布局： 核心代码：grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))，卡片最小宽度200px，剩余空间均分 自动换行：容器变窄时自动换行，无需媒体查询 auto-fit vs auto-fill：前者折叠空轨道使内容填满空间，后者保留空轨道 优势：代码简洁、自适应强、维护简单，适用于产品网格、相册等场景 这种现代布局方式彻底简化了响应式设计流程。
2025-10-20 09:34:26
241
原创 Vue3.0中websocket的使用-demo
本文详细介绍了在Vue3中使用WebSocket的完整实现方案。首先展示了基于Composition API的基础实现，包括连接建立、消息收发和生命周期管理。然后进阶封装为可复用的Composable，增加自动重连、心跳检测等功能。文章还提供了与Pinia状态管理集成的方案，并给出TypeScript类型支持示例。最后通过一个实时聊天应用完整示例，演示了实际开发中的最佳实践，同时列举了SSR兼容、性能优化等注意事项。该指南涵盖了从基础到高级的WebSocket应用场景，为Vue3开发者提供了全面的WebSo
2025-10-13 09:25:22
1267
原创 Vue2.0中websocket的使用-demo
通过以上方式，可以在 Vue 应用中高效地集成 WebSocket 功能，实现实时通信需求。建议根据项目规模选择原生实现或使用成熟的库（如 Socket.io）在 Vue 中使用 WebSocket 可以实现实时双向通信，适用于聊天应用、实时数据监控等场景。在 Vue 组件中直接使用原生 WebSocket API。
2025-10-09 11:14:04
198
原创 Vue中使用el-table实现表格数据合并展示-demo
本文介绍了一个基于Element Plus的3D模型管理系统，主要功能亮点包括：1) 实现el-table的合并单元格功能，使主模型及其子行共享序号和状态显示；2) 采用专业的数据展示方式，通过不同样式区分主模型与子行；3) 提供完整的筛选功能，包括按名称、编号、分类和状态的筛选；4) 设计了现代化的UI界面，包含渐变标题栏、卡片式布局和响应式设计；5) 实现多种交互功能如3D预览、AR预览、模型上传和下载等。系统通过处理原始数据为展平结构，并利用span-method方法实现单元格合并，优化了数据展示效果
2025-10-01 10:00:00
164
原创 Element-UI&Ant Design-UI在Vue中upload上传组件封装
本文介绍了基于Element Plus和Ant Design Vue封装的两种文件上传组件(el-uploadMUpload和a-uploadMUpload)的实现方案。两种组件都提供了文件类型校验、大小限制、上传数量限制等功能，并支持自定义上传逻辑。其中el-uploadMUpload组件通过计算文件hash值进行上传，支持获取文件ID；a-uploadMUpload组件增加了登录校验和进度监控功能。两种组件都支持图片预览功能，可通过slot自定义上传按钮样式，适用于不同UI框架的上传需求。实现细节包括文
2025-09-29 11:35:16
187
原创 ReferenceError: Cannot access ‘form‘ before initialization vue3中在computed中使用到form属性
在 Vue 3 的计算属性中使用属性也可能会遇到这个问题，因为计算属性被解析为函数，并且如果属性在函数声明之前被访问，则会引发此错误。在该代码块中被定义之前被访问。这可能是因为计算属性初始化时依赖了。这个错误提示意味着您在声明变量之前尝试访问它。这个错误是因为在computed计算属性中，尝试访问变量。属性时，使用到了一个尚未初始化的变量。变量定义为响应式的变量，可以使用。定义为一个响应式对象，并在。变量在初始化之前被调用了。将计算属性的初始化代码移到。在 Vue 3 中，由于。对象的属性，并将其返回。
2025-09-22 09:39:30
188
原创 js 实现将checked为true的添加到数组中，单用户取消选择将checked为false的时候从数组中将对应去除
可以使用数组的filter()方法来实现。这样就把checked属性为true的对象添加到了一个新的数组中。可以使用Array的filter和push方法来实现。首先创建一个空数组result，然后遍历给定的数组对象，如果当前对象的checked属性值为true，则将其添加到result数组中。接下来，当用户取消选择时，可以使用Array的filter方法来过滤出被取消选择的对象，然后通过Array的splice方法将其从result数组中删除。在这个例子中，我们使用了数组的push和filter。
2025-09-15 10:35:53
133
原创 day.js给定时间计算到现在有几天-demo
要计算从某一毫秒到现在有几天，可以使用Day.js和JavaScript的Date对象来获取当前日期，然后计算两个日期之间的天数差异。这个示例代码将计算从2021年9月30日到现在已经过去了多少天，并将结果输出到控制台。
2025-09-08 09:19:04
313
C语言复习资料.docx
2020-03-08
js时间对象实现倒计时效果(可设置倒计时开始时间)
2020-03-30
shopline-developer-plugin-1.0.0-beta.5 shopline开发vscode插件
2025-08-12
SliderCheck-手搓滑块验证vue版本-兼容移动端和pc端
2024-07-25
JackieDYH自定义板块html代码
2023-10-11
vscode-settings.json
2023-09-08
vscode-配置文件.code-profile
2023-09-08
Vue2.x和Vue3.x面试常问知识点-面试题-JackieDYH - CSDN博客.pdf
2023-09-07
两句css代码实现全屏滚动效果.zip
2023-04-03
微信小程序video标签如何在其他视频播放时让另一个视频暂停播放-demo
2023-03-29
Vue海报二维码组合图片生成和下载-qrcodejs2-html2canvas
2022-05-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人