前端技术文章
-
应使用rgba控制背景透明而保持文字清晰，opacity会使整个元素及子元素变透明；两者均影响颜色对比度，需确保符合WCAG标准且动画仅作用于opacity或transform以避免卡顿。280 收藏 -
最稳妥清晰的方式是提取公共CSS文件并通过<link>标签统一引入；包括重置样式、基础排版、工具类、组件结构和CSS变量，按vars→base→utils→页面样式的顺序引入，注意路径一致、缓存更新、禁用@import及避免全局污染。316 收藏 -
computed是Vue中用于声明式派生状态的响应式工具，基于惰性求值、依赖追踪与缓存复用机制，仅在依赖变化时重新计算，适用于列表过滤、格式化、权限判断等场景。208 收藏 -
闭包是模块模式实现真正私有的唯一机制，通过作用域隔离使变量无法被外部访问，所有接口函数都依赖闭包引用私有状态，ES6模块底层仍由闭包维护词法作用域。448 收藏 -
本文介绍如何对键值结构的JSON对象（而非数组）按disease字段高效过滤，核心是使用Object.values()转为数组后结合filter()实现精准匹配。283 收藏 -
统一margin基准并使用相对单位可解决容器外部留白不协调问题：1.设立8/10px倍数的间距体系；2.用rem、%等弹性单位替代固定px值；3.重置body、h、p等标签默认margin；4.借助auto实现自动居中与均衡分布。239 收藏 -
overscroll-behavior在iOS16.4前完全不支持，常见失效原因：写在html/body上被忽略、目标元素未设overflow、被fixed/transform等创建独立滚动上下文。104 收藏 -
Less中calc()无法实现响应式图片裁剪，因编译时静态求值且不支持运行时尺寸计算；应使用变量+媒体查询预设padding-top或aspect-ratio，并避免用小数形式aspect-ratio。418 收藏 -
Array.prototype.findLastIndex是同步方法，需先异步加载配置数据（如fetchConfigs），再在已排序的数组中按优先级规则（如环境＞租户＞全局）反向查找首个匹配项；关键在于保证数据就绪与顺序正确，而非让findLastIndex异步化。464 收藏 -
作用域链变量查找按“当前作用域→外层函数作用域→全局作用域”顺序线性搜索，逐层匹配；越靠后的层级查找越慢，因需更多比较、缓存命中率低，且全局变量还受属性动态性与内存布局拖累。386 收藏 -
答案：npm、Yarn和pnpm是主流JavaScript包管理工具，分别以生态、速度和磁盘效率见长，选择应根据项目需求与团队习惯，并统一工具及提交lock文件确保一致性。285 收藏 -
WeakRef无法直接包裹WebGLTexture，因其是宿主对象且不受JSGC管理；可行方案是用WeakRef持有HTMLImageElement或轻量元数据对象，并通过FinalizationRegistry在对象销毁时调用gl.deleteTexture()，且须先校验gl.isTexture()。199 收藏 -
在document上用addEventListener('keydown',handler,true)监听全局快捷键最可靠，需用e.preventDefault()阻止默认行为，通过e.ctrlKey等判断组合键，避免与浏览器冲突，并在React/Vue中正确管理生命周期。349 收藏 -
<p>里不能放<div>，因为HTML解析器会自动闭合<p>，将<div>移至外部，导致DOM结构变为<p></p><div>内容</div>，使CSS选择器p>div失效、JS查询失败、样式错乱。431 收藏 -
真正能靠纯CSS实现可靠等高的方案只有display:flex和display:grid；浮动方案本质是用padding-bottom与margin-bottom抵消制造视觉假象，依赖overflow:hidden裁剪，并非真等高。150 收藏