Javascript 幕后听众

在过去，我还使用了一个resize侦听器，它将

requestAnimationFrame

捆绑在一起，作为轮询resize事件的优化版本：

/**
 * Resize listener
 * @return {function}
 */
export const optimizedResize = (function () {
  let callbacks = [],
    running = false;

  // fired on resize event
  function resize() {
    if (!running) {
      running = true;

      if (window.requestAnimationFrame) {
        window.requestAnimationFrame(runCallbacks);
      } else {
        setTimeout(runCallbacks, 66);
      }
    }
  }

  // run the actual callbacks
  function runCallbacks() {
    callbacks.forEach((callback) => {
      callback();
    });

    running = false;
  }

  // adds callback to loop
  function addCallback(callback) {
    if (callback) {
      callbacks.push(callback);
    }
  }

  return {
    // public method to add additional callback
    add(callback) {
      if (!callbacks.length) {
        window.addEventListener('resize', resize);
      }
      addCallback(callback);
    },
  };
}());

我最近遇到了一个尴尬的问题，我必须说我不熟悉这个问题。虽然它说它只是

addEventListener（）

的别名，但它的语法听上去非常直截了当：

const viewportMediumMin = window.matchMedia(`(min-width: 768px)`);

viewportMediumMin.addListener(checkScreenSize);

但是，我想弄明白的是，

addListener（）

相当于：

window.addEventListener('resize', function() {
    console.log('addEventListener - resize');
}, true);

---

或者，与我提到的

optimizedResize

方法相比，如果它在幕后做一些“更聪明”的事情，我应该完全依赖它。我真正感兴趣的只是媒体查询更改的特定事件，而不是每个像素宽度的更改。谢谢你的帮助

这基本上是重新发明轮子。CSS3用于在不同的屏幕大小上优雅地设置页面内容的样式，并添加媒体查询以在某个断点处更改页面的外观。这些断点在今天的web开发中很常见，现代CSS引擎经过了大量优化，以尽可能快地执行更改。所以

 window.matchMedia(`(min-width: 768px)`).addListener(/*...*/)

---

由于CSS引擎检测到事件，然后将其重定向到JS引擎，因此可能非常有效。将侦听器添加到

resize

可能会比较慢，因为每个像素的更改都会导致JS事件，而未优化的JavaScript必须确定是否传递了断点。您的

优化调整大小

并没有真正改变这一点。

这基本上是在改造轮子。CSS3用于在不同的屏幕大小上优雅地设置页面内容的样式，并添加媒体查询以在某个断点处更改页面的外观。这些断点在今天的web开发中很常见，现代CSS引擎经过了大量优化，以尽可能快地执行更改。所以

 window.matchMedia(`(min-width: 768px)`).addListener(/*...*/)

---

由于CSS引擎检测到事件，然后将其重定向到JS引擎，因此可能非常有效。将侦听器添加到

resize

可能会比较慢，因为每个像素的更改都会导致JS事件，而未优化的JavaScript必须确定是否传递了断点。您的

优化调整大小

并没有真正改变这一点。

太好了！是的，我认为过去的很多教程都认为完全调整大小的侦听器是一种方法，但我很少（如果有）需要侦听每一个像素的变化；差不多就在我的病情改变的那一刻。谢谢你的信息@zach well

.matchMedia

非常棒！是的，我认为过去的很多教程都认为完全调整大小的侦听器是一种方法，但我很少（如果有）需要侦听每一个像素的变化；差不多就在我的病情改变的那一刻。谢谢你的信息@扎克威尔

.matchMedia

是一个全新的媒体