检测调整窗口大小 - JavaScript

在 Web 开发中，经常需要检测窗口大小的变化，并根据变化来调整页面布局。JavaScript 为我们提供了一些方法来实现这一功能。

监听窗口大小变化

我们可以使用 window 对象的 resize 事件来监听窗口大小的变化。例如，我们可以编写如下代码来监听窗口大小变化并输出当前窗口大小：

window.addEventListener('resize', function() {
  console.log('窗口大小改变了：' + window.innerWidth + 'x' + window.innerHeight);
});

上述代码中，window.addEventListener 可以监听 resize 事件，当窗口大小发生变化时，回调函数会被执行。

响应式布局

在 Web 开发中，我们常常需要编写响应式布局，以适应不同的设备和屏幕大小。通过监听窗口大小的变化，我们可以很方便地实现响应式布局。例如，我们可以利用 CSS3 的媒体查询来适应不同的屏幕大小：

/* 在窗口宽度小于 600 像素时，应用此样式 */
@media (max-width: 600px) {
  /* ... */
}

节流与防抖

在监听窗口大小变化时，事件会频繁触发。为了避免频繁处理事件，我们可以使用「节流」或「防抖」的技术来优化性能。例如，我们可以使用 lodash 库的 throttle 或 debounce 方法来实现：

// throttle: 限制事件处理的频率
window.addEventListener('resize', _.throttle(function() {
  console.log('窗口大小改变了：' + window.innerWidth + 'x' + window.innerHeight);
}, 200));

// debounce: 在事件触发后等待一段时间再处理
window.addEventListener('resize', _.debounce(function() {
  console.log('窗口大小改变了：' + window.innerWidth + 'x' + window.innerHeight);
}, 200));

总结

通过监听窗口大小的变化，我们可以实现响应式布局和优化性能。同时，我们需要注意节流和防抖技术的使用，以提高性能和用户体验。