-
JavaScript设计模式是应对项目复杂度的稳定器，解决对象创建混乱、状态联动失控、条件分支爆炸三类痛点，常用模式包括工厂、单例、观察者、策略和模块模式，适用中大型项目以提升稳定性与可维护性。
-
正确使用HTML语义化标签是实现无障碍访问的基础。通过header、nav、main等结构化标签构建页面，为辅助设备提供清晰导航；合理使用h1-h6标题层级建立内容逻辑，避免跳跃；表单中用label、fieldset等关联输入与说明，确保可操作性；必要时结合ARIA增强动态组件的语义表达。语义化让代码更有温度，实现信息平等获取。
-
可用CSS变量配合hsl()与滚动位置实现颜色自然过渡：将HSL分量映射至滚动进度，通过scroll-timeline（Chrome115+）或JS动态更新变量，注意H值跨360°需归一化处理。
-
使用filter属性可调整元素亮度和对比度。1.brightness()函数用于控制明暗，参数小于100%变暗，大于100%变亮；2.可组合brightness与contrast同时调整视觉效果，如brightness(120%)contrast(90%)使元素更亮且对比减弱；3.常见应用场景包括悬停提亮图片、禁用状态变暗按钮；4.注意filter影响整个元素及其子元素，过度使用可能导致刺眼，老版IE不支持，建议配合transition实现平滑过渡。通过合理使用filter，可增强用户交互体验。
-
通过grid-area定位网格项并结合background与border，可精准设置各区域视觉样式。1.使用grid-template-areas定义布局区域；2.为子元素指定grid-area并添加背景边框；3.可选伪元素增强装饰；4.响应式下样式随位置自动适配，保持一致性。
-
实时搜索功能需结合防抖、取消旧请求和状态管理：监听input事件并延迟300ms执行搜索；用AbortController中止过期请求；渲染时处理加载、空结果、错误等状态，并建议后端优化索引、限流与缓存。
-
yield用于暂停生成器函数并返回单个值，调用next()继续执行；yield*委托给其他生成器或可迭代对象，逐个产出其值。
-
JavaScript虽无原生注解，但通过JSDoc、装饰器提案及框架扩展可实现类似功能：1.JSDoc用于类型提示与文档生成；2.装饰器（Stage3）修饰类成员行为；3.框架如NestJS利用装饰器定义元数据；4.构建工具识别特殊注释优化打包。
-
绝大多数情况下，position:sticky更合适，因其天然支持滚动吸附、不脱离文档流、无需手动监听滚动；position:fixed仅适用于全局悬浮按钮等特定场景，且存在移动端定位偏移等问题。
-
最简单有效的方式是在Vue单文件组件中使用<stylescoped>，它通过添加唯一属性和重写选择器实现样式局部化；其他场景需用类名隔离、CSSModules或ShadowDOM。
-
ARIA属性通过补充语义、状态和行为信息，使屏幕阅读器能理解自定义UI组件。当原生HTML无法满足交互需求时，应选用恰当的role（如tab、dialog）、state（如aria-expanded）和property（如aria-label），并结合键盘导航与焦点管理。关键原则是优先使用原生元素，仅在必要时用ARIA增强；动态内容需通过aria-live="polite"或"assertive"告知更新，且区域须预先存在于DOM中。测试时需结合自动化工具（如Axe、Lighthouse）与手动验证，重点
-
将script标签放在body末尾可避免阻塞页面渲染并确保DOM加载完成，src属性用于引入外部JS文件，支持相对路径、绝对路径或完整URL，推荐在</body>前引入以提升性能和执行可靠性。
-
首先使用LiveServer插件可实现实时预览，安装后右键HTML文件选择“OpenwithLiveServer”即可在浏览器中实时查看修改；其次可直接通过文件资源管理器找到HTML文件并双击用默认浏览器打开，适用于快速查看静态页面；最后可通过配置tasks.json自定义任务，利用系统命令一键运行HTML文件，适合高级用户。
-
JavaScript通过GeolocationAPI获取用户位置，需用户授权且仅限安全上下文；支持getCurrentPosition()和watchPosition()，注意兼容性、精度限制及国内浏览器降级方案。
-
PathFinder双窗格模式可提升macOS文件管理效率，通过菜单启用双窗格视图后，可并排浏览目录；结合CSS自定义样式优化界面外观，如调整分隔线颜色；利用HTML创建导航面板实现快速跳转；开启同步滚动功能便于文件夹内容对比，增强操作便捷性。
