- 博客(73)
- 收藏
- 关注
RSS订阅原创 使用autofit.js自适应页面尺寸，浏览器缩放自适应，pc/大屏自适应方案
autofit.js是一款简洁高效的自适应工具，只需一行代码即可实现PC项目全屏适配。它基于等比缩放原理，通过动态调整容器宽高来适应不同分辨率，保持元素比例不变。支持配置设计稿基准尺寸（如1920x1080）和监听窗口变化，使用后需手动销毁监听。相比传统方案，它能完美填充屏幕且避免元素变形。
2025-08-21 14:28:06
105
原创 开发过程中不同分支的命名和作用
本文介绍了软件开发中常见的五种分支类型及其管理策略： prod分支：用于生产环境，需严格测试和审批，确保稳定性。 stg分支：模拟生产环境测试，用于客户验收测试（UAT），比测试环境更接近真实场景。 sit分支：系统集成测试分支，验证各模块协同工作，通常从开发分支合并而来。 uat分支：用户验收测试分支，由最终用户验证功能是否符合需求，通常从预发布分支合并。 dev分支：核心开发分支，用于功能开发和代码迭代，需结合代码审查和单元测试管理。 每种分支在开发流程中承担不同角色，确保软件质量和顺利交付。
2025-08-19 16:30:45
487
原创 vant4 页面使用Popup,导致Toast样式变成白底
摘要：在Vant组件库使用中，需要在main.ts文件中全局引入基本样式后，再单独引入Toast组件的样式。示例代码展示了先引入"vant/lib/index.css"作为全局样式，再额外引入"vant/es/toast/style"以确保Toast组件样式正确加载。这种分层引入方式可以避免样式冲突问题。
2025-08-06 20:26:31
90
原创 判断元素是否在视口内
本文介绍了两种检测元素是否在视口内的方法：1）使用getBoundingClientRect()获取元素位置信息，通过比较视口尺寸判断可见性，支持部分或全可见检测；2）使用Intersection Observer API异步监测元素交叉状态，性能更优但需考虑兼容性。文章对比了两种方法的优缺点，getBoundingClientRect兼容性好但性能较低，IntersectionObserver性能高但不支持IE11以下。代码示例展示了两种方法的具体实现方式，并提供了相关参数说明。
2025-07-29 10:16:23
423
原创 vscode，cursor，Trae终端不能使用cnpm、npm、pnpm命令解决方案
摘要： 解决VSCode执行脚本权限问题，需以管理员身份运行后，通过终端命令set-ExecutionPolicy RemoteSigned修改策略。若报错，可改用Set-ExecutionPolicy RemoteSigned -Scope Process。验证时get-ExecutionPolicy显示RemoteSigned即解禁成功。该方法能有效解除脚本执行限制。
2025-07-22 18:08:55
378
原创 原型与原型链到底是什么？
JavaScript原型与原型链是面向对象编程的核心机制。原型（Prototype）作为对象的"基因库"，通过__proto__和prototype实现属性和方法的共享继承；原型链则通过对象间的__proto__串联形成属性查找路径。构造函数、原型与实例构成三角关系，实现继承与共享。典型应用包括组合继承、扩展内置对象和创建纯净字典。需注意原型污染、属性遮蔽和this指向问题。调试可使用console.dir()和instanceof等工具。原型链的本质是JavaScript特有的原型继承
2025-07-09 11:31:59
1240
原创 封装WebSocket
摘要：本文介绍了一个前端WebSocket封装库的设计与实现。该库采用单例模式，提供自动重连、心跳检测等核心功能，确保稳定的WebSocket通信。主要特点包括：1) 浏览器兼容性检查与认证连接建立；2) 基于定时器的心跳检测机制，未响应时触发重连；3) 可配置的重连策略，含次数限制和间隔控制；4) 消息分类处理，区分心跳响应与业务数据。该封装通过状态管理和事件监听，为前端应用提供了高可用的WebSocket通信解决方案。
2025-07-09 11:20:45
369
原创 前端小数点精度问题解析
前端开发中常见的小数点精度问题源于JavaScript采用IEEE 754标准的浮点数表示法，导致如0.1+0.2≠0.3等现象。本文介绍了四种解决方案：整数转换法、toFixed()方法、第三方库（如decimal.js）和自定义精度函数，并建议最佳实践包括整数优先计算、谨慎处理用户输入和充分测试。这些方法可有效避免电商价格计算等场景中的精度误差，提升代码可靠性。
2025-07-08 15:11:01
571
原创 vue中Pinia 与 Vuex 的区别
Pinia vs Vuex核心摘要 Pinia作为Vue官方推荐的新状态管理工具，相比Vuex具有明显优势：采用Composition API风格，取消mutation机制，直接通过actions修改reactive状态；原生支持TypeScript推导和模块化，代码更简洁；体积更小、性能更优。Vuex则需通过commit/dispatch分层操作，适合Vue2旧项目。Pinia在Vue3项目中开发体验更佳，尤其适合大型应用，而Vuex仅建议在强依赖其插件生态时使用。两者均支持Devtools，但Pinia
2025-07-08 14:58:02
513
原创 JavaScript箭头函数没有this ?
本文探讨了JavaScript中this绑定的问题及解决方案。传统函数方法中的回调函数会导致this指向改变，开发者通常使用self变量保存this引用。ES6引入的箭头函数通过词法作用域继承this，解决了动态绑定问题，无需额外保存this引用，简化了代码结构并提高了可读性。箭头函数的这一特性使其成为回调场景的理想选择，提升了开发效率。
2025-07-08 14:39:06
226
原创 判断变量是否为 `null` 或 `undefined` 的各种写法比较
本文系统总结了JavaScript中判断变量是否为null或undefined的多种方法。通过对比undefined与null的区别，详细分析了==null、严格比较、typeof、可选链等判断方式的优缺点及适用场景，并给出了实际应用建议。重点指出if(!value)可能导致的误判问题，推荐使用value==null或value??等更现代且语义清晰的写法。文章还建议对公共API使用显式判断、封装工具函数提升代码可读性，帮助开发者编写更健壮的代码。
2025-07-02 14:30:56
380
原创 回顾JS中基础API find与findIndex
JavaScript数组方法find和findIndex的区别： find返回第一个符合条件的元素值，找不到时返回undefined findIndex返回第一个符合条件的元素索引，找不到时返回-1 示例展示了用find查找id=2的用户对象，用findIndex查找name='Alice'的用户索引。这两个方法都只返回第一个匹配项。
2025-07-01 10:21:51
111
原创 回顾map和filter的使用以及区别
JavaScript数组方法map和filter的区别：map用于数据转换，对每个元素执行操作后返回等长新数组，如将数字数组每个元素加倍；filter用于数据筛选，返回符合条件元素组成的新数组，如从数组中筛选出大于2的数字。两者都不改变原数组，map保持数组长度，filter可能改变数组长度。示例展示了map将[1,2,3,4,5]转为[2,4,6,8,10]，filter将同数组筛选为[3,4,5]。
2025-07-01 10:15:12
320
原创 JavaScript 中 return和break 的区别
JavaScript中的return和break都是控制流语句，但用途不同：return用于函数中终止执行并返回值，只能在函数内使用；break用于终止循环或switch语句，只能在循环/switch内使用。return会结束整个函数，而break仅退出当前循环。箭头函数可隐式return，break还能配合标签跳出多层循环。关键区别在于return处理函数返回值，break控制循环流程。
2025-06-18 13:58:55
184
原创 vue里实现一个炫酷的动态border边框
这段CSS代码实现了一个带有动态渐变色边框的视图效果。通过conic-gradient创建锥形渐变边框，结合自定义属性--angle实现旋转动画。使用background-clip将渐变限制在边框区域，同时添加双层阴影增强立体感。关键点包括：1) 利用CSS Houdini的@property定义角度变量；2) 通过animation使边框颜色持续旋转；3) 采用现代CSS技术实现纯代码视觉特效，无需图片资源。最终呈现一个具有流动感边框的卡片UI组件。
2025-05-27 09:49:50
131
原创 ES6实用的优化技巧（必备基础）
ES6引入了多项新特性，显著提升了JavaScript代码的简洁性和可读性。解构赋值允许从对象或数组中提取多个属性或元素，简化了变量声明。模板字符串通过${}插入变量和表达式，使字符串拼接更加直观。扩展运算符（...）简化了数组和对象的合并操作，如去重和合并对象。find和filter方法使数组操作更高效，分别用于查找和过滤元素。Promise和async/await让异步代码更易读，避免了回调地狱。Object.values和Object.keys简化了对象键值的获取。可选链操作符（?.）和空值合并运算符
2025-05-15 16:55:25
646
1原创 vue ref和reactive区别
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
2024-08-25 09:57:22
7200
原创 node 切换版本安装cnpm报错
npm install -g cnpm@7.1.0 --registry=https://registry.npmmirror.com/
2024-02-21 11:19:29
813
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人