前端技术文章
-
box-sizing:border-box和line-height是解决input与button高度不一致最稳定方案；需统一设置并加浏览器前缀，同时重置outline、border，button需type="submit"并处理移动端touch-action与缩放。440 收藏 -
安全引入第三方CSS库需确保来源可信、校验完整性和实施策略限制，具体包括：使用HTTPS协议从知名CDN（如jsDelivr、unpkg）引入并指定版本号；添加SRI完整性校验防止资源被篡改；配置CSP策略限制样式源仅限于自身和可信CDN；对高安全性要求项目建议本地托管以降低依赖风险。405 收藏 -
accept属性仅前端提示，不校验文件真实类型；必须结合文件名后缀与后端magicbytes双重校验，且multiple上传时无法自动过滤混合类型。165 收藏 -
必须用display:none才能让元素彻底消失、不占位、不影响布局；visibility:hidden仅透明化但保留盒模型参与布局，opacity:0仍可交互且性能开销最大。274 收藏 -
SCSS中应基于基础单位$spacing-unit派生语义化spacingmap，并封装spacing()函数支持方向参数与fallback，配合命名空间utilityclass和ESLint约束，实现可维护、可扩展的间距管理。371 收藏 -
因为.container的width始终为100%，但实际渲染宽度由断点媒体查询中的max-width决定；例如在≥1200px视口下，computedwidth显示1140px，正是@media(min-width:1200px){.container{max-width:1140px}}生效所致。422 收藏 -
BOM是浏览器厂商实践形成的事实接口，核心为window对象，它映射浏览器窗口、承载全局作用域，并提供弹窗、窗口管理、尺寸控制及事件监听等功能，协同location、history等子对象工作，但受安全策略限制。130 收藏 -
Array.prototype.with是ES2023新增的不可变数组方法，用于安全替换单个索引元素；它不修改原数组，仅接受数字索引和新值两个参数，越界或负数索引会抛出RangeError。249 收藏 -
quoted()和unquoted()仅作用于字符串字面量，不支持运行时计算结果；动态拼接应优先使用插值（@{...}），真正字符串操作需依赖Less4.0+的JS函数。316 收藏 -
可直接将URLSearchParams实例传给fetch的url参数，无需手动拼接；它自动编码（如中文转%E5%BC%A0%E4%B8%89），支持动态增删参数，服务端可原生解析。107 收藏 -
TextEncoder和TextDecoder仅支持UTF-8编码转换，不处理HTML实体、GBK等其他编码；encode()返回UTF-8字节而非码点；需复用实例、注意流式解码与浏览器兼容性。277 收藏 -
Array.from是NodeList转数组最稳妥的方式，因其专为可迭代对象设计，兼容IE11+、语义清晰、支持映射且避免扩展运算符潜在陷阱；错误包括传入null或连写未赋值，空NodeList无问题但querySelector返回null不可直接转换。477 收藏 -
原生<inputtype="time">能用但限制多：兼容性差（Safari旧版退化为文本框）、不支持分钟步进（如15分钟）、无清空按钮、无法隐藏秒；推荐flatpickr（轻量、支持minuteIncrement/清空/格式控制）或手写select方案。335 收藏 -
HTML中文乱码主因是文件实际编码与声明不一致，需统一为UTF-8（无BOM），确保<metacharset="UTF-8">在<head>最前、服务器响应头正确、外部资源也用UTF-8。151 收藏 -
JavaScript通过事件循环实现异步处理，先执行同步代码，再优先清空微任务队列，然后执行宏任务，形成“宏任务→所有微任务→下一宏任务”的循环机制。480 收藏