-
JS实现多语言切换的核心是通过JSON文件管理多语言文本资源，并利用JavaScript动态加载和替换页面文本；具体做法是将不同语言的文本以键值对形式存储在JSON文件中，通过fetch加载对应语言包，结合localStorage保存用户选择的语言，使用translate函数根据键名返回对应文本并支持动态占位符替换，再通过data-i18n属性标记需翻译的元素，在语言切换时遍历这些元素更新内容；该方案轻量可控，适用于简单场景，但面对复数形式、动态内容插值、多语言格式化等复杂需求时，手动实现维护成本高，因此
-
localStorage默认持久化，但需避免无痕模式、跨协议访问、未序列化对象、重复覆盖等误用；存取对象须用JSON.stringify/parse并try-catch；storage事件不触发当前页；容量受限且因编码差异实际可用空间不同。
-
:target是CSS伪类，用于选中URL片段标识符对应的元素。结合::before可在锚点跳转时插入提示内容，如“?您正在查看这里”，通过高亮样式提供视觉反馈。示例中，.highlight:target::before添加醒目提示块，增强单页或FAQ页面的定位体验。需注意布局影响、可访问性及旧版IE不兼容问题。
-
HTML5通过WebCryptoAPI手动实现HKDF（Extract+Expand），需用HMAC-SHA256分两步派生密钥：先以salt为key、IKM为message得PRK，再以PRK为key迭代HMAC生成输出；主流浏览器均支持，但旧版Safari对raw导入有限制。
-
justify-items用于Grid布局中控制项目在行内轴（水平）的对齐，align-items在Grid和Flexbox中均适用，控制块轴（垂直）对齐，Flexbox中主轴对齐由justify-content实现，默认值均为stretch。
-
高阶函数是将函数作为参数或返回值的设计实践，本身不提升可读性；其优势需配合纯函数、无副作用和合理抽象才能体现。
-
本文提供无需媒体查询的纯CSS解决方案，通过合理运用position、z-index和负边距，使英雄图层与悬浮文本框形成独立视觉容器，确保后续内容自然流式排布，彻底摆脱反复调整媒体查询的维护负担。
-
深拷贝在JavaScript中用于完全复制对象，常见方法包括：1.JSON.parse(JSON.stringify())仅适用于纯数据对象，不支持函数、undefined、Symbol、Date等，且无法处理循环引用；2.手写递归实现可支持多种类型并处理循环引用，但性能较低；3.Lodash的_.cloneDeep()功能全面、稳定可靠，支持Map、Set等复杂类型，但需引入库；4.structuredClone()为现代浏览器原生方法，性能好、语法简洁，支持多数类型但不兼容老版本。性能排序为：stru
-
正则表达式是字符串处理的基础设施，本质是描述字符串模式的语法规则；JavaScript中通过String和RegExp对象原生支持，test()返回布尔值用于判断，match()返回数组用于提取，需注意null与空数组的真值差异。
-
vw/vh是视口单位，1vw=视口宽1%、1vh=视口高1%，不依赖父元素或字体大小；而%依赖父容器宽度，em依赖父元素font-size。
-
transition必须写在非hover的基础样式中才能生效，因为它需同时控制进入和离开的过渡；支持过渡的属性有限，transform和opacity最安全高效。
-
JavaScript安全编程关键在于识别执行上下文、控制数据流向、阻断不可信输入自动求值；需避免innerHTML拼接、慎用eval/JSON.parse、正确配置CSP、防范原型污染，并从首行异步请求起贯彻可信数据假设。
-
overflow:hidden裁剪溢出内容并禁用滚动，非仅隐藏滚动条；可用于图片圆角裁切，但会触发BFC、影响动画性能及焦点管理，需配合其他属性保障可访问性。
-
主轴方向由flex-direction决定，必须配合display:flex使用；row（水平向右）、row-reverse（水平向右但顺序反转）、column（垂直向下）、column-reverse（垂直向下但顺序反转）；justify-content仅在已定主轴上分配空间，不改变方向。
-
JavaScript无内置物理引擎，常见第三方库有：①Matter.js（轻量2D）；②Planck.js（高精度Box2D移植）；③Cannon.js/es（3D刚体）；④Ammo.js（功能全的Bullet移植）。
