自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 手写 Promise 核心逻辑保姆级教程

Promise 是 JavaScript 中处理异步操作的解决方案。想象你叫外卖:你下单(创建 Promise)等待餐品制作(pending 状态)收到外卖(fulfilled 状态)或配送失败(rejected 状态)实现要点说明状态管理使用 state 属性跟踪状态回调队列收集 pending 状态的回调异步执行使用 setTimeout 模拟链式调用每个 then 返回新 Promise错误冒泡自动传递错误到最近的 catch值穿透处理非函数参数。

2025-04-04 18:43:08 721

原创 原生JavaScript实现课程表拖拽功能(保姆级教程)

本教程将详细讲解一个基于原生JavaScript实现的课程表拖拽系统。科目拖拽功能:支持将左侧科目拖拽到右侧课程表可视化反馈:拖拽过程中的悬停效果、放置动画数据持久化:使用LocalStorage保存课程表状态删除功能:每个课程项内置删除按钮响应式布局:采用Flex布局适配不同屏幕最终实现效果:左侧科目列表可拖拽右侧5列课程表(周一到周五)拖拽时显示半透明占位效果成功放置后显示带删除按钮的科目卡片刷新页面自动恢复上次状态纯原生实现:不依赖任何第三方库完整数据流:从UI交互到本地存储的闭环。

2025-04-04 15:49:57 772

原创 前端性能优化

性能优化需结合具体场景权衡,遵循「测量 → 分析 → 优化」的循环。优先解决瓶颈问题(如长任务、大图片),再逐步细化到代码层级。保持对新技术(如)的关注,持续迭代优化方案。

2025-03-29 08:27:50 519

原创 当网站更新时如何优雅地通知用户?全链路解决方案指南

网站更新通知是用户体验与技术实现的双重挑战。通过结合浏览器原生 API、Service Worker、WebSocket 等现代前端技术,配合智能的服务端推送策略,同时注重交互设计与用户体验优化,我们可以构建高效且友好的更新通知系统。通知的价值不在于频率,而在于相关性与及时性。

2025-03-20 14:06:19 656

原创 验证码背后的前端安全体系:从攻防实战到全面防御

目录引言:验证码——前端安全的放大镜一、验证码的攻防博弈:安全设计的试金石1.1 验证码的典型攻击模式1.2 安全验证码设计原则二、前端安全威胁链:从验证码到系统漏洞2.1 XSS攻击:数据层的隐形杀手2.2 CSRF攻击:身份验证的致命漏洞2.3 点击劫持:视觉层的精密陷阱三、纵深防御体系:构建五层安全护盾3.1 输入层:数据过滤3.2 通信层:传输安全3.3 渲染层:内容安全3.4 会话层:状态管理3.5 监控层:实时防御四、合规与伦理:安全设计的边界4.1 隐私保护合规要求4.2 无障碍设计标准五、持

2025-03-20 13:45:17 338

原创 从响应式设计到媒体查询的完整指南

响应式设计是一种网页设计方法,旨在使网页能够根据用户的设备(如PC、平板、手机)自动调整布局、字体大小、图片尺寸等,以提供最佳的浏览体验。它的核心思想是“一次设计,随处可用”。通过本文的详细介绍,我们深入探讨了如何使用媒体查询实现PC端和手机端的自适应布局,响应式设计不仅提升了用户体验,还降低了维护成本,是现代网页设计中不可或缺的技术。希望本文能帮助你更好地理解响应式设计和媒体查询,并在实际项目中应用这些技术,如果你有任何问题或建议,欢迎在评论区留言讨论。

2025-03-18 11:40:45 738

原创 微前端架构开发秘籍:乾坤(Qiankun)全流程实战指南(保姆级)

大型项目痛点:单体应用维护成本高、技术栈升级困难、团队协作效率低微前端价值独立开发、部署和测试技术栈自由选择增量升级与重构多团队并行开发多团队并行开发互不干扰技术栈自由选择与渐进式升级独立部署与回滚能力更优的用户体验(预加载、按需加载)增强沙箱能力(WebAssembly 支持)智能资源管理(动态预加载策略)服务端渲染(SSR)支持跨框架状态管理方案。

2025-03-10 09:28:36 661

原创 如何在项目中使用柯里化函数?

乍一看,Currying 可能显得很复杂,但正如我们所见,它是一个强大的概念,可以简化函数定义,让你的代码更明了、更可复用。

2025-03-05 21:05:55 750

原创 vue3封装Hooks 实现图片懒加载(保姆级教程)

简单解释什么是图片懒加载。即图片在进入浏览器的可视区域时才进行加载,而不是在页面初始化时就全部加载所有图片。可以用一些简单的示意图或者类比的方式(比如把页面想象成一个画展,只有当观众走到画作前才会仔细去看这幅画,也就是才加载这幅画的细节,类似图片进入可视区才加载)来帮助读者更好地理解懒加载的概念。

2025-03-05 18:44:09 1017

原创 前端路由守卫的使用及应用场景

前端路由守卫是一种在路由导航过程中进行控制的机制,允许开发者在路由切换的不同阶段执行特定的逻辑。在 Vue.js 中,路由守卫是通过 Vue Router 提供的钩子函数实现的。这些钩子函数可以用于权限验证、数据预取、错误处理等场景,从而实现高级的导航控制。

2025-02-11 14:15:12 697

原创 关于vue项目中的多种语言切换

国际化(Internationalization,缩写为 i18n)是指通过将应用中的文本内容、日期、时间等本地化元素抽离,来支持多语言环境的一种技术。通过国际化,可以轻松地将应用翻译成不同的语言版本,而无需对代码进行大规模修改。Vue I18n是专为 Vue.js 设计的国际化插件,支持多语言管理、动态切换语言、复数处理、日期和数字格式化等功能。它与 Vue.js 生态系统无缝集成,适用于任何规模的 Vue 应用。语言包通常以 JSON 文件的形式存在,结构简单直观。json代码解读。

2025-02-11 11:52:06 655

原创 Vuex基本使用

1、安装Vuex命令行输入:npm i vuex@3注意:默认安装的是Vuex 4版本,适用与Vue 3,而Vuex 3版本适用于Vue 2,所以安装的时候要注意指定安装版本号2、创建store目前有两种方式:1)创建vuex文件夹,然后在文件夹里面创建store.js2)创建store文件夹,然后在文件夹里面创建index.js目前开发中,两种方式都比较常用,官方介绍的是第二种。3、在js文件中,定义actions、mutations、state对象,创建Vuex实例对象,并配置参数。

2024-05-15 08:56:02 1015 4

空空如也

空空如也

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

TA关注的人

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