- 博客(561)
- 资源 (8)
- 收藏
- 关注
RSS订阅
原创 避免异步任务竞态更新-已过期的不再允许更新
这个概念在前端里面其实比较少听到，但是其实我们是有遇见过的，并且很常见。只是翻遍了前端书籍都很难到对这个概念的解释。有幸读到霍春阳的《vue.js设计于实现》，真的是三生有幸有代码①如下:let res=null;function async update(){res=await Api.get(“someThing”);return res;}var A=update();// 假设返回结果为avar B=update();//假设放回结果为b假设受到网络波动的..
2022-05-14 13:23:05
625
原创 react Dva.js框架分享
Dva.js出现的原因:React React 专注解决视图层问题，UI = f(data)只提供简单的setState手动更新 数据来触发视图更新，对多组件通讯或需要全局状态管理的支持不够健全，也缺乏computed这种生成组合变量的功能以及对某个组件变量的watchDva就是对react状态管理方面进行拓展依赖:redux提供功能:1.状态管理2.异步加载3.提供集成环境应用层面的语法:es6 Generator它简化了 redux 的使用，并且.
2021-11-14 06:34:50
2130
原创 wap 横屏适配和竖屏适配的通用方案
这个话题应该能聊的东西挺多的，从16年做手机端开始就研究，也写了两篇博客来记录过（但是受限于但是的经验和认知，现在看起来不是特别清晰）。为什么今天会继续这个话题呢，在做了reactnative和之前小游戏横屏页面后，我觉得有必要总结一下。本篇博客，最终针对wap横屏和竖屏给出两个通用的适配方案，rn上面可能实现方式和web的不大一样，但是思路逻辑是一样的。从生产流程来考虑，适配这个东西，产品经理和设计都是需要考虑的，相对传统pc设计，移动端能展示的区域比较小。这个就要求设计出来的产品（.
2021-03-18 20:07:00
2506
2
原创 react-native 表单校验库 react-native-validator
npm i react-native-validator说明这是一个类似jQuery.validator的表单校验工具点击查看demo提供两种常用的校验方式（1.点击校验所有表单元素通过就提交，2.在输入表单过程中自动验证，如果所有表单验证通过按钮高亮可点击提交）你可以覆盖所有样式支持动态表单校验(包括数组和对象)目前校验规则是写在elFormItem里面的，暂时不考虑在elForm上加MP4演示需要科学上网，你也可以下载仓库里面的video.mp4如果你npm下载后使用报错，建议拷贝包
2020-06-18 00:58:25
2666
原创 vue指令以及dom操作
“AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 通过内置的指令来为应用添加功能。AngularJS 允许你自定义指令。”这是我最初接触“指令”这个词。还记得那时候，ng大行其道的时候，我特别好奇怎么给一个div加一个"ng-app" 就能解决这么多问题。后来随着前端工作的深入，我用了jq的data-attr并且学会了jq的插件使用。但，这这并不能让我把它“指令...
2017-02-19 15:13:35
16587
原创 swiper.js居中露边轮播
这篇文章介绍了如何在订购页中实现居中露边轮播效果，并详细分析了为什么选择 Swiper 8 而非 Swiper 11。文章首先指出 Vant Swipe 和 uni-app 自带 <swiper> 无法满足需求，然后比较了 Swiper 8 和 11 的差异：Swiper 8 通过克隆 DOM 实现流畅循环，适合居中露边场景；而 Swiper 11 改用重排节点，导致首屏缺邻卡、拖动缩放不连贯等问题。最后提供了 Swiper 8.4.7 的具体配置方案，包括关键参数 loopedSlides 的设置建议和跟
2026-08-18 23:26:35
355
原创 Flex 布局里 `min-height: auto`：为什么子元素会把父级撑爆
当使用 Flex 布局时，子元素默认的 min-height: auto 会导致内容溢出父容器。这是因为 Flex 子项默认会扩展以容纳内容，即使设置了 flex: 1。解决方法有两种： 显式设置 min-height: 0：允许子项高度小于内容高度，由 Flex 分配剩余空间。 利用 overflow 非 visible 的特性：如 overflow: auto 或 hidden 也会强制最小高度为 0。 推荐直接使用 min-height: 0，代码意图更清晰，兼容性更好。对于需要内部滚动的布局，建议固
2026-08-05 15:12:51
224
原创 Vue3 跨页面点对点通信：私有 Channel + Composable（可复制即用）
本文介绍了一种在Vue3中实现跨页面点对点通信的解决方案，通过创建私有Channel和Composable来实现精确的事件传递。主要特点包括： 使用Map存储openId和bus的对应关系，确保只有持有对应openId的页面能收到事件 提供了两个核心Hook： useOpenerChannel：用于打开方创建通道、注册监听、跳转页面 useOpenerEmitter：用于被打开方向opener发送事件 相比全局事件总线更安全，避免误收事件 相比Pinia更适合临时性的回传场景 自动处理通道的创建和销毁，防止
2026-07-30 08:56:10
322
原创 Ngrok 内网穿透完整
上手极简，一行命令启动隧道，零基础快速上手；自动签发可信HTTPS证书，适配微信小程序、公众号调试硬性HTTPS要求；内置请求日志面板，可查看、重放接口请求，调试Webhook极其方便；跨平台全系统兼容，Windows/Mac/Linux通用。
2026-07-28 08:58:01
293
原创 JavaScript 数组填充：Array.from 与 Array.fill 用法详解及核心区别
本文详细对比了Array.from和Array.fill两种数组初始化方法的区别与应用场景。关键点包括：1）new Array()创建的是无法遍历的稀疏数组；2）Array.fill适合填充基础值但存在引用类型共享地址问题；3）Array.from能生成独立对象数组，支持索引参数，适合结构化数据；4）核心区别在于是否修改原数组、引用类型处理和索引支持；5）最佳实践是简单值用fill，对象数组必须用from。掌握两者的特性可以避免常见的数据联动bug，提高开发效率。
2026-07-21 14:10:59
198
原创 Uni-App 竖向 Swiper 开启 circular 后，「换一换」方向乱跳？用列表复制解决
摘要 Uni-App竖向Swiper开启circular后，当推荐列表条数为4～6时，点击「换一换」会出现方向异常（向下滚动或来回切换）。原因是circular模式下Swiper会自动选择环上最短路径，而非按current数值顺序滚动。 解决方案：当业务数据长度（total）满足step < total ≤ 2×step时（如step=3时total为4/5/6），将列表复制一份再传入Swiper，使得环长足够保证正向滚动。关键点包括： 区分业务数据长度和渲染数据长度 换一换逻辑需对复制后的长度取模 注意处
2026-07-20 17:46:36
393
原创 文字排版行盒如何确定的
本文深入解析了CSS中行盒(line-box)和基线(baseline)的生成原理。在包含多个字号不同的span元素时，浏览器会将它们打包成一个行盒，并基于第一个带文本的span字体基线作为整行的公共基线，其他span的基线默认对齐这条公共线。父元素p仅作为容器不参与基线计算，但替换元素(如图片)会重新定义基线。vertical-align属性只调整单个元素相对于公共基线的位置，不会改变基线本身。文章通过具体示例演示了基线确定逻辑和不同场景下的对齐表现。
2026-07-17 10:38:56
186
原创 中文到底贴基线还是铺满四条线？——从字体到 `vertical-align`
SSE + 打字机效果实现摘要 本文提供了一个50行代码实现的SSE（Server-Sent Events）服务端推流Demo，具有打字机逐字显示效果。关键实现包括： 服务端： 使用Express创建SSE长连接接口（GET /sse-stream） 将完整消息拆分为delta片段分次推送 包含心跳保活机制（10秒间隔） 每5秒推送一条新消息 前端： 通过EventSource接收SSE数据流 动态创建消息DOM元素 实现逐段追加效果（80ms/段） 自动滚动保持最新消息可见 特点： 完整可运行的示例代码（
2026-07-17 07:48:29
435
原创 50 行 SSE + 打字机效果：从零跑通服务端推流 Demo
SSE + 打字机效果实现摘要 本文提供了一个50行代码实现的SSE（Server-Sent Events）服务端推流Demo，具有打字机逐字显示效果。关键实现包括： 服务端： 使用Express创建SSE长连接接口（GET /sse-stream） 将完整消息拆分为delta片段分次推送 包含心跳保活机制（10秒间隔） 每5秒推送一条新消息 前端： 通过EventSource接收SSE数据流 动态创建消息DOM元素 实现逐段追加效果（80ms/段） 自动滚动保持最新消息可见 特点： 完整可运行的示例代码（
2026-07-12 11:27:06
319
原创 前端工程化（vscode自动格式化）-格式校验、代码质量校验大乱炖
本文介绍了前后端混合仓库的代码质量与格式检查方案，主要工具分工如下： 工具分工： Prettier：统一管理所有文件的排版格式（JS/TS/CSS/SCSS/MD等） ESLint：负责JavaScript/TypeScript代码质量检查 Stylelint：专管CSS/SCSS语法和语义检查 关键配置： 使用.prettierrc作为唯一格式标准 通过eslint-config-prettier和stylelint-config-prettier避免规则冲突 VS Code设置确保保存时自动格式化并修复
2026-07-06 14:29:04
252
原创 Prisma 表格更新 流程
本文提供了使用Prisma 7进行数据库迁移的完整流程，分为两个阶段：首次迁移（针对已有数据的库）和日常改表流程。 首次迁移（阶段1）： 通过db pull对齐schema 生成初始迁移文件但不执行 使用migrate resolve标记迁移已完成 日常改表（阶段2）： 修改schema.prisma文件 运行migrate dev生成并执行迁移 generate更新客户端 修改业务代码 提交并在其他环境使用migrate deploy 注意事项： 禁止在有数据时使用migrate reset 空库需使用附
2026-07-01 17:09:35
264
原创 Prisma和TypeORM的区别
本文对比了Prisma和TypeORM在数据库表结构变更时的异同。两者的核心流程都需要先描述表结构，生成并执行SQL迁移，最后更新代码类型。主要差异在于操作位置、SQL生成方式和备注管理。Prisma通过修改schema.prisma文件并使用migrate工具，而TypeORM则通过装饰器修改实体类并生成迁移。TypeORM对列备注的支持更直接，Prisma则更适合版本化协作。文章针对不同场景给出了工具选择建议，并强调无论采用哪种方式，都必须保持数据库与代码的同步。对于现有项目，作者建议根据团队规模和工作
2026-07-01 15:26:12
256
原创 JPA是啥
摘要： JPA是Java中规范ORM（对象-关系映射）的标准API，核心思想是通过操作Java对象间接管理数据库（类似TypeORM）。实际开发中通常结合Hibernate（底层实现）和Spring Data JPA（简化接口）使用，通过@Entity定义实体类、Repository自动生成CRUD。与手写SQL的MyBatis不同，JPA更侧重面向对象，适合熟悉Prisma/TypeORM的开发者。作为Java后端核心技能，JPA将数据库表映射为类，方法调用转为SQL，与现有ORM经验高度相通。
2026-07-01 15:25:01
279
原创 Prisma安装使用
本文是Prisma集成指南，指导如何将Prisma工具链接入现有MySQL项目。核心步骤如下： 环境准备：确保MySQL服务运行，im_db库存在且含业务表 安装配置：通过prisma init初始化，需特别注意.env中的DATABASE_URL配置指向目标库 逆向工程：使用db pull从数据库提取表结构生成Schema文件 客户端生成：执行generate创建类型化PrismaClient 验证测试：通过临时脚本验证连接和基础查询功能 关键提示： 首次集成时无需修改现有SQL代码 IM业务表可保留在S
2026-06-29 19:12:18
212
原创 vue keep-alive 从原理到实现
Vue 的 是一个很实用的组件，它能在组件切换时保留状态（DOM、滚动位置、输入框内容等），避免重复渲染。本文将从最基础的原生 DOM 实现开始，逐步演进到 Web Component 封装，深入理解 keep-alive 的核心原理。在动手写代码之前，先理清 keep-alive 需要解决的问题：组件切换时不销毁 DOM：切换回旧组件时，DOM 还在状态保留：输入框内容、滚动位置等不丢失生命周期：需要 （首次挂载）、（激活）、（失活）、（销毁）当 DOM 节点从文档树中移除时（、），浏览器会重置 为
2026-06-24 12:35:31
359
原创 overscroll-behavior-y: contain弹窗滚动穿透救星
摘要：该HTML文档演示了如何使用CSS的overscroll-behavior-y: contain属性解决弹窗滚动穿透问题。页面包含两个对比弹窗：未设置该属性的弹窗滚动到边界时会触发底层页面滚动，而设置了该属性的弹窗则能阻止滚动穿透。通过添加这行CSS代码，可以优雅地解决移动端和网页中常见的滚动干扰问题。
2026-06-23 00:35:46
152
原创 简单固定列表个澳督 虚拟滚动
当列表数据量很大时（如 10000 条），直接渲染所有 DOM 节点会导致页面卡顿。只渲染可视区域内的元素，通过控制startIndex和endIndex来决定渲染范围。
2026-06-20 15:45:34
238
原创 vue2封装hook函数，可以监听主页面生命周期
摘要：文章介绍了一个延迟显示加载提示的优化方案。通过delayedDisplayLoading函数实现：1)延迟300ms显示加载提示避免闪烁；2)支持传入Vue实例(this)，利用hook:beforeDestroy自动清理定时器和隐藏提示；3)提供hide方法手动关闭。该方案解决了页面销毁时的资源清理问题，避免了内存泄漏，适用于uni-app环境下的异步请求场景。函数内部通过$once监听组件销毁事件，确保及时释放资源。
2026-03-13 18:15:48
129
2
原创 css 宽度屏幕50%，高度等于宽度的50%，窗口变化，比例不变（宽度百分比，高度等比例自适应）
本文介绍了两种实现响应式等比例高度盒子的CSS方案。方案一使用aspect-ratio属性（宽高比2:1）直接控制元素比例；方案二通过padding-top百分比（相对包含块宽度）实现兼容旧浏览器的备用方案。代码演示了两个并排盒子的实现，宽度各占50%，高度随宽度等比例变化。文章还提供了内容居中显示的技巧，并解释了百分比值的计算基准是包含块宽度而非元素自身宽度。两种方法都能实现宽度变化时高度自动按比例调整的效果。
2025-11-06 11:52:52
320
原创 弹窗分页保留其他页面勾选的数据（vue）
摘要：本文介绍了一种实现多选弹窗保留勾选状态的方法。核心思路是在服务器返回数据之外维护一个列表A来存储勾选数据。关键步骤包括：1) 初始化时处理外部传入的已选数据；2) 获取列表数据时根据已选状态初始化勾选；3) 通过同步函数更新勾选状态，包括匹配外部传入数据和当前页面勾选数据，并合并新增勾选项。该方法封装了show、getList和updateSelected等核心函数，解决了页面切换时保持勾选状态的需求，避免了重复手动处理勾选状态的繁琐操作。
2025-09-11 10:16:14
632
原创 element ui v2,用js关闭MessageBox 弹框
Element UI的MessageBox组件（包括$alert、$confirm、$prompt）返回的是Promise实例，无法直接操作DOM关闭。正确关闭方式是调用this.$msgbox.close()。这些方法在完整引入Element时会自动挂载到Vue.prototype上。虽然官方文档未明确说明关闭方式，但可通过Vue实例调用。调用参数可参考相关技术社区讨论。需要注意的是，这种方式要求项目已完整引入Element UI组件库。
2025-08-22 17:00:38
673
原创 Promise.all任意一个失败都不会触发catch
摘要： 当使用Promise.all时，若其中任一Promise被reject，则会触发catch并返回第一个reject值。若希望即使有失败也继续执行并返回所有结果，需在每个Promise内部处理异常（通过catch返回自定义值）。未显式返回值的catch会导致结果为undefined。优化方案是在catch中返回结构化错误信息，确保Promise.all的then能接收到完整结果。关键点：各Promise需自行消化异常，避免向上抛出。最终输出示例：[{a:1}, {err:{b:2}, promise2
2025-08-20 10:59:12
484
原创 element el-cascader v-model,只传递选中节点id数组
摘要：通过设置emitPath:false，Element UI的级联选择器el-cascader可以简化多选模式下v-model的返回值格式。当值为[["100","1001"],['100','1002']]时，启用该配置后直接返回扁平化的数组['100','1001','1002']。示例代码展示了如何在组件中配置props参数实现该功能，同时支持多选(multiple:true)和严格选择模式(checkStrictly:true)。这一设置优化了数据结构处理
2025-08-12 15:39:25
455
原创 一些关于微前端的文章
深入调研了微前端，还是iframe最香微前端是什么 微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 - 掘金https://juejin.cn/post/7121883538311348238https://juejin.cn/post/7121883538311348238
2025-06-23 17:33:03
356
原创 vue组件渲染到iframe里面（同域名下），组件可以在同一项目下维护
1.不需要开启单独服务维护iframe里面的html。2.完美支持display：fixed布局问题。
2025-05-22 18:29:31
568
原创 vue2和vue3，一个很大区别的特性，一个elemntui v2表单校验引发的血案
vue2用的是Object.definedPropertyvue3用的是Proxy这大家都知道，问了都说知道什么回事😄😄，对不对那应该大家都知道Proxy的性能比Object.definedProperty好了吧那就不说了在家😂～～Vue2开发的时候有个要求，data里面元素的值是个对象（例如名字叫from）的时候，这个对象的属性必须在初始化时候都提供默认值，不能遗漏某个属性，后面再补充，除非用this.$set(this.form,”attr”,”value”)去更新这是为什么呢？
2025-05-15 17:55:06
633
原创 长列表局部渲染（监听window滚动），wndonw滚动同理
滚动到底时候获取裁剪位置，的到需要渲染的20条数据，通过vue diff算法更新到dom。后端一股脑给了几千个数据，我们滚动过程永远只渲染20条。
2025-03-20 12:52:31
492
原创 uniapp-x js 编程最佳实践（无奈的妥协写法）
两个对象必须是UTSJSONObject，如果有其他对象类型，需要先转成UTSJSONObject。执行后还需要执行JSON.parse<>(JSON.stringly(结果对象))！合并UTSJSONObject和其他类型数据，函数封装。
2025-03-17 16:21:07
643
cors，谷歌插件，破除下载图片空白
2023-07-10
jqZoom放大镜,淘宝放大镜，jqZoom.js
2015-07-25
程序员的数学，程序员的数学 3线性代数
2018-08-02
我的文章怎么变成vip可见了！！经过我同意了吗
2025-04-17
TA创建的收藏夹 TA关注的收藏夹
TA关注的人