前端技术文章
-
词法作用域使异步回调保持变量一致性，靠的是记住定义时的位置而非值；函数创建时绑定外部变量，与调用时机无关；let每次迭代新建绑定，var共享同一变量；闭包携带引用而非拷贝，延长变量生命周期；常见陷阱包括this丢失、参数遮蔽和时序错误。324 收藏 -
在线工具页面应以输入-处理-输出三步链路清晰为核心，用语义化main+section结构、flex响应式布局、pre+code输出及DOM属性驱动状态，确保可访问性与确定性。324 收藏 -
Chrome105+、Safari15.4+、Firefox121+已默认支持:has()伪类，可实现子元素反选父元素，需用>、+、~等关系符精确控制层级，且不可用于选择器中间或与伪元素连用。324 收藏 -
生成器函数调用后返回一个Generator对象，它既是迭代器（含next()方法）又是可迭代对象（支持for...of和展开运算符），内部维护执行上下文，仅在调用next()时推进并暂停于yield。324 收藏 -
网页标题 background-attachment:fixed失效主因是body未占满视口，需同时设置html,body{height:100%;margin:0;padding:0;}且background-attachment必须写在body上。324 收藏 -
clearTimeout用于取消未执行的setTimeout定时器，需传入其返回的timerID；未保存ID则无法取消，重复调用或传入无效值均无效果但不报错。324 收藏 -
用reduce解析CSV可行但非最直观，适合边读边构建结构；简单CSV可直接split(",")配合reduce生成对象，复杂CSV需状态机解析引号与转义，推荐split("\n")后map+reduce组合实现更清晰健壮。324 收藏 -
Day.js比Moment.js轻因支持tree-shaking、无依赖、纯函数式设计且插件按需引入；核心仅约2KB，不修改原生Date，仅用format和加减时无需插件。324 收藏 -
inherit无效最常见原因是用于不可继承属性（如margin、display），浏览器直接忽略；或父元素该属性计算值为initial/unset，子元素继承“空值”。324 收藏 -
Flex布局对齐需先确认主轴方向：flex-direction决定主轴（row为水平，column为垂直），justify-content控制主轴对齐，align-items控制交叉轴对齐；主轴变化时二者作用方向同步改变。323 收藏 -
使用CSS的@keyframes、transform和opacity可实现图片缩放与透明度动画。1.创建含图片的容器；2.用@keyframes定义0%到100%的缩放与透明度变化；3.将动画绑定至图片，设置时长1.5s、缓动ease-out并保持最终状态forwards；4.可选:hover触发交互效果，提升视觉表现力。323 收藏 -
Vue路由跳转时不应直接传递对象，应采用预存状态、sessionStorage或动态路由+API兜底方案；避免将对象塞入URL、使用history.state或router.replace传参。323 收藏 -
正确写法是<audiosrc="music.mp3"controls></audio>，但需确保路径正确、使用HTTP服务器而非file://协议、配合用户交互调用play()并捕获异常，autoplay必须搭配muted才可能生效。323 收藏 -
浮动父容器高度塌陷是必现问题，因CSS2.1规定浮动元素脱离文档流，父容器不计算其尺寸致高度为0，引发溢出、背景消失等问题，需逐层用clearfix或改用Flex/Grid。323 收藏 -
const保证绑定不可变而非值不可变：原始值因自身不可变故无法修改，引用值（对象、数组）的属性或元素可修改，但变量不能重新赋值；需Object.freeze等显式操作才能禁止内部修改。323 收藏