前端技术文章
-
Promise.all一错即停，适合强一致性场景；Promise.allSettled则全部返回结果，含status、value或reason，适用于需汇总、降级或统计的业务。418 收藏 -
justify-self:end没生效，首要原因是缺乏对齐空间：父容器须设display:grid且定义列轨道（如grid-template-columns:1fr），目标元素必须是直系子元素且未脱离网格流（无position:absolute等）。344 收藏 -
ES6中let和const提供块级作用域、存在暂时性死区、const不可重新赋值但允许修改对象内容、均禁止重复声明，推荐优先使用const，其次let，避免var。170 收藏 -
浮动与绝对定位本质冲突，混用会导致布局错乱、高度塌陷等问题；因absolute完全脱离文档流，会忽略float声明，应明确职责、择一使用，优先采用Flexbox或Grid等现代布局方案。160 收藏 -
最稳路径是用$button-variantsMap配合@each循环及lighten()/darken()生成按钮样式；key须为带引号字符串，value须为list或嵌套map，状态伪类须置于循环内，尺寸与色彩逻辑应分离管理。128 收藏 -
纯HTML无法实现可运营的双十一页面，因其缺乏动态倒计时、库存更新、用户登录态、支付跳转等能力，必须配合JS、CSS及后端服务。306 收藏 -
<p>data-*属性仅用于存储静态、轻量、非敏感的上下文信息，命名须小写连字符（如data-order-status），JS中通过dataset.orderStatus访问，写入必须用setAttribute，值恒为字符串且明文可见。</p>501 收藏 -
Vue3的reactive对数组本身完全响应，但直接索引赋值（如arr[0]=val）或修改length不触发更新；应使用push、splice等内置方法或嵌套响应式对象。214 收藏 -
预售定金翻倍需前后端协同：前端用localStorage标记支付状态并动态渲染膨胀金额，结合时间戳校验活动期；后端必须二次校验，接口层防护重复提交，且须跨时区真机测试。225 收藏 -
CLS值是所有布局偏移分数（影响分数×距离分数）的累积和，目标≤0.1；影响分数为不稳定元素在视口中的可见区域占比，距离分数为其最大位移占视口最大尺寸的比例。216 收藏 -
button[disabled]仅匹配HTML中显式声明的disabled属性，不响应JS动态设置；:disabled伪类覆盖所有禁用方式（HTML、JS赋值、setAttribute），且仅作用于原生可禁用元素。251 收藏 -
JavaScript中this指向取决于调用方式而非定义方式：谁调用函数，this就指向谁（箭头函数除外，它继承外层this）。414 收藏 -
width:fit-content能用但受限于display类型、父容器布局和浏览器版本；Grid中需写为minmax(0,fit-content())，Flex中须设flex:00fit-content才生效。487 收藏 -
HTML实现滚动触发渐入动画，通常需要结合HTML、CSS和JavaScript来完成。下面是一个简单但有效的实现方式：✅ 实现思路使用CSS定义动画样式（如 opacity 和 transform）。通过JavaScript检测滚动事件，判断元素是否进入视口。当元素进入视口时，添加一个类，触发动画。📝 示例代码1. HTML 结构
IntersectionObserver实现滚动渐入动画的核心是用其判断元素是否进入视口，而非监听scroll事件；需设threshold、及时unobserve/disconnect、用CSSclass控制过渡、标记状态防重复触发，并在React中正确使用useRef和useEffect管理实例与清理。255 收藏
report-uri已废弃，必须改用report-to配合Report-To响应头；前端CSP中需写report-togroup-name，服务端须返回合法JSON格式的Report-To头，且URL必须HTTPS、group名严格匹配。436 收藏