- 博客(22)
- 收藏
- 关注
RSS订阅原创 CDN 优化前端打包体积
bundle（打包文件）是指前端项目构建后生成的一个或多个包含 HTML、CSS、JavaScript 的压缩合并文件，它们是浏览器加载运行网站所需的最终资源。在开发时，我们写了很多模块化的 JS 文件（如 React 组件、Vue 页面、ESM 模块），这些文件可能：使用了模块语法（如引入了第三方库（如axioslodash包含了动态资源（如图片、字体）但是浏览器不原生支持这些开发格式。于是我们用打包工具（如 Webpack、Vite、Rollup）将这些源文件：✅ 转换为浏览器能识别的格式。
2025-07-22 16:34:02
616
原创 表单校验--数组各项独立校验
这里的写法是字符串拼接，最终会生成类似 hospitalDoctorList.0.hospitalDeptRelationId、hospitalDoctorList.1.hospitalDeptRelationId 这样的路径。这样做的好处是，表单校验（比如 required 校验）可以精确地作用到每个医生（药师）对象的 hospitalDeptRelationId 字段上，实现动态表单校验。写需求时遇到一个这样的问题，就是校样项是多个的，但是其字段名称相同。这时我们可以这样校验，注意字段之间的关联性。
2025-07-21 21:24:28
236
原创 面试必备--js数组操作大全
变异方法会改原数组（push、pop、splice、sort、reverse、fill、copyWithin...）非变异方法返回新数组或值（map、filter、slice、concat、flat、includes、find...）常用场景：增删改查、转换、过滤、搜索、归纳。
2025-07-10 19:26:33
497
原创 深入理解js模块与 import.meta的使用
我们先讲笼统一点，js分了两个模块特性ES6 模块 (ESM)CommonJS 模块 (CJS)导入方式importrequire()导出方式exportexports模块加载方式异步加载（浏览器）同步加载（Node.js）兼容性原生支持（现代浏览器、Node.js）主要用于 Node.js静态分析支持静态分析（可优化、tree shaking（去除无用代码））不支持静态分析支持浏览器（通过Node.js 和大部分服务器端环境任意一个。
2025-07-03 20:45:43
713
原创 Animation,Transition 与 Transform，以及 Vue 动画详解
Animation,Transition 与 Transform，以及 Vue 动画详解
2025-06-26 20:41:26
257
原创 Promise详解
Promise是 ES6 引入的一种异步编程解决方案，用于避免「回调地狱」问题。它表示一个可能还未完成但将来会完成的操作，其主要作用是用于异步操作的结果管理。
2025-06-26 15:04:35
788
原创 常用 HTTP 请求头设置及其作用详解
请求头是 HTTP 请求中的一部分，位于请求行之后。它们向服务器传递客户端环境信息、身份认证、缓存机制等。比如告诉服务器你是谁、你能接受什么格式的返回、你的语言偏好等等。请求头常用场景是否必需POST、PUT 请求体✅ 是Accept响应内容协商✅ 建议使用认证授权✅ 若需认证User-Agent客户端识别❌ 可选Referer来源跟踪、反盗链❌ 可选Cookie会话状态✅ 若有登录多语言支持❌ 可选控制缓存行为❌ 可选Origin跨域请求。
2025-06-15 22:23:23
799
原创 图文结合-带你轻松掌握 CSS Grid布局！
grid布局是非常好用的网格布局方式！话不多说，我们直接看实例来学习！注意，用份额 （fr）单位网格单元不必设置固定的宽高然后定义行与列：这将创建一个 3 列、2 行的网格结构：：固定宽度：分配 1 份剩余空间：根据内容自动调整大小添加间距： : 创建块级网格容器: 行内网格容器定义每一列/行的尺寸： 、、: 固定单位: 剩余空间份额: 根据内容调整: 限制范围: 简化重复🔹 不使用 ：🔹 使用 ：两个是等价的，但后者更简洁、易读，尤其在重复很多列的时候效
2025-06-08 09:00:00
767
原创 图文结合展示--带你掌握 CSS Flex 布局！
咳咳...,之前学过但是有一些细节忘记了，来加深下印象。Flexbox（弹性盒子）是 CSS3 中为了解决布局问题而引入的强大布局模型。相较于传统布局方式（如 float、inline-block、table），它提供了更灵活、简洁的方式来实现响应式设计。
2025-06-04 09:00:00
668
原创 详细学习 requestAnimationFrame —— 浏览器动画的“正确打开方式”
写个人博客时，想实现一个雪花飘落的动画效果，一开始用的是卡顿，后来找资料发现有个更好用的函数，于是写下这篇比较详细的学习博客 是浏览器提供的一个 原生 API，用于在浏览器下一次重绘（repaint）之前执行 JavaScript 回调函数。它是进行 高性能动画渲染 的首选方式。 浏览器每次屏幕刷新时都会调用一次回调（大多数显示器是 60Hz，即每秒 60 帧，约 16.7ms 一次）它不会主动控制时间间隔，而是将你注册的回调交由浏览器统一调度自动与浏览器渲染时机同步，防止掉帧理解 rAF 的最
2025-06-01 09:00:00
428
原创 学TypeScript这篇文章就够了--基础篇
TypeScript 是 JavaScript 的一个超集（superset），它在 JS 的基础上加入了静态类型系统，主要作用是：编写时类型检查，提前发现错误更强的开发工具支持（自动补全、跳转）更适合大型项目开发最终 TS 会被编译（transpile）成标准 JavaScript 来运行。
2025-05-30 09:00:00
540
原创 Vue 中的混入（Mixin）：概念、应用与vue3替代方案
mixin 是一个。当组件使用了 mixin 时，mixin 中的datamethodscreated等生命周期钩子，会被“混入”到组件中。
2025-05-25 08:00:00
1345
原创 深入理解 Vue 自定义指令--Vue 3 版本
Vue 中的指令（directive）是带有v-前缀的特殊属性，像v-ifv-modelv-for是内置指令。自定义指令允许我们封装复用的DOM 操作逻辑，比如自动聚焦、设置样式、监听元素变化等只有当所需功能只能通过直接的 DOM 操作来实现时，才应该使用自定义指令。一个常见例子是使元素获取焦点的v-focus指令。// 在模板中启用 v-focus</script><template>
2025-05-24 23:39:25
590
1
原创 一篇文章搞定跨域问题！
协议://域名:端口号协议（Protocol）：如http://https://域名（Domain）：如端口号（Port）：如:80:443只有这三者都相同，两个页面才属于“同源”，如果三者有其一不同，则会产生跨域二.跨域常见的类型。
2025-05-16 15:09:44
793
原创 关于a标签设置download属性重命名失效问题的解决
最近遇到一个问题，接收服务器的文件链接之后进行下载时，往往文件名是哈希值，所以我们要进行重命名，但是设置download会失效，经过资料查找找到了解决方案注意：html5 新特性a标签download属性只支持谷歌和火狐。
2025-05-09 18:45:18
822
1
原创 一招搞定图片与pdf打印功能！
最近遇到一个需求，需要实现图片与pdf的打印功能，翻阅资料过后，发现用iframe预览pdf时呈现的工具栏会自带打印功能所以我们只需要在获取链接时，用iframe预览就可以实现打印功能了，但是图片怎么解决呢？
2025-04-30 15:23:14
415
原创 element-plus进阶使用：限制el-Select的输入字符数量
接到个需求，限制el-Select的输入字符数量，本来el-select是不能输入的，但是开启远程搜索后就可以输入，问题是官方文档并没有给出限制输入的方法，所以需要我们自己解决以下为背景代码。
2025-04-21 20:50:26
387
原创 从服务器获取文件数据来进行预览遇到了一个奇怪的报错End of data reached
从服务器获取文件数据来进行预览时，遇到了这么一个问题，很久都没有找到解决办法，但是看了一些文章之后。被我用一种很奇怪的方式解决了。数据长度是17796，要求是17997。其实不用思考丢失的长度为1的数据去哪里了，只需要更改一下代码。这里我是用切片上传的，分了一百份，可能是因为传输不需要那么准确，所以我扩大了上传的份数。于是文件被我成功预览出来了，这个问题就被我莫名奇妙的解决了。改成了101份，这时候达到了要求的数据长度。
2025-03-01 17:06:14
282
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人