9、响应式 JavaScript：构建轻量级高性能 Web 应用

响应式 JavaScript：构建轻量级高性能 Web 应用

1. 响应式 JavaScript 的需求

在构建导航模块时，我们可能已经实现了在无 JavaScript 时也能完美工作，在合适屏幕上能良好使用 JavaScript，在大屏幕上达到理想状态。但存在一个问题，JavaScript 会一直在后台监听 .menu-toggle 的点击事件，即便它已不可点击。因此，我们需要一种在 JavaScript 中像在 CSS 里那样有条件地查询浏览器特性的方法。

2. 几种解决方案分析

• 服务器端特性检测
  • 原理 ：将媒体查询的工作交给服务器，通过解析浏览器的用户代理字符串，抽象出不同设备的功能。例如，服务器端代码需要创建不同文件，都解析为 ./script.js ，并使用 "vary:user-agent" HTTP 头来提供服务。
  • 示例代码 ：

<script type="text/javascript" src="./script.js"></script>

- **优缺点**：虽然能解决问题，但需要为不同设备类型创建不同的资产（HTML、CSS 和 JavaScript），模糊了适应设备和创建新移动网站的界限