javascript - addListener 在幕后

Question

过去，我还使用了一个调整大小监听器，将 requestAnimationFrame 与它捆绑在一起，作为轮询调整大小事件的某种优化版本:

/**
 * 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);
    },
  };
}());

我最近遇到了addListener()令人尴尬的是，我必须说我对此并不熟悉。尽管它说它只是 addEventListener() 的别名，但语法似乎非常简单，可以监听更改:

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

viewportMediumMin.addListener(checkScreenSize);

但是，我想弄清楚的是 addListener() 相当于:

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

或者，如果它在幕后做一些“更智能”的事情，那么与我提到的 optimizedResize 方法相比，我应该完全依赖它。我真的只对媒体查询变化的特定事件感兴趣，而不是找出每个像素宽度的变化。感谢您的帮助!

Answer 1

这基本上是重新发明轮子。 CSS3 的目的是在不同的屏幕尺寸上优雅地设计页面内容，并添加媒体查询以在某个断点处更改页面的外观。这些断点在当今的 Web 开发中很常见，现代 CSS 引擎经过了大量优化，可以尽快执行更改。因此

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

可能非常高效，因为 CSS 引擎检测到该事件，然后将其重定向到 JS 引擎。向 resize 添加监听器可能会更慢，因为每个像素更改都会引发 JS 事件，并且未优化的 JavaScript 必须确定是否通过了断点。您的 optimizeResize 并没有真正改变这一点。