纯JS基础断点变化事件监听器

Question

基础文档使用JQuery监听断点变化

https://get.foundation/sites/docs/media-queries.html

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {
     if (
    (oldSize === "small" && newSize === "large") ||
    (oldSize === "small" && newSize === "xxlarge") ||
    (oldSize === "medium" && newSize === "large") ||
    (oldSize === "medium" && newSize === "xxlarge")
  ) {
    //my custom function
    displayFacets("desktop");
  } else if (
    (oldSize === "xxlarge" && newSize === "small") ||
    (oldSize === "large" && newSize === "small") ||
    (oldSize === "large" && newSize === "medium") ||
    (oldSize === "xxlarge" && newSize === "medium")
  ) {
    displayFacets("mobile");
  }
});

如何在纯 JS 中转换它？

Answer 1

不太清楚你到底在想什么。但是您可以使用 matchMedia 实现类似的目标。例如，您可以创建一个 EventListener 来响应某个 MediaQuery 是否匹配。看这个例子：https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/onchange

编辑：好的，在您更改示例后可以看出您实际上只想区分移动设备和桌面设备。您可以使用提到的函数很容易地实现它：

const mql = window.matchMedia('(max-width: 600px)');
mql.onchange = (e) => {
  if (e.matches) {
    /* the viewport is 600 pixels wide or less */
    displayFacets("mobile");
  } else {
    /* the viewport is more than than 600 pixels wide */
    displayFacets("desktop");
  }
}

Answer 2

Foundation 是开源的，因此您可以随时查看他们的源代码以弄清楚他们是如何解决特定任务的。

您的问题的相关部分可以在这里找到：foundation.util.mediaQuery.js

他们所做的是监听window的resize事件：

  _watcher() {
    $(window).off('resize.zf.mediaquery').on('resize.zf.mediaquery', () => {
      var newSize = this._getCurrentSize(), currentSize = this.current;

      if (newSize !== currentSize) {
        // Change the current media query
        this.current = newSize;

        // Broadcast the media query change on the window
        $(window).trigger('changed.zf.mediaquery', [newSize, currentSize]);
      }
    });
  }

并使用 window.matchMedia(…).matches:

检查当前匹配的媒体查询

  _getCurrentSize() {
    var matched;

    for (var i = 0; i < this.queries.length; i++) {
      var query = this.queries[i];

      if (window.matchMedia(query.value).matches) {
        matched = query;
      }
    }

    return matched && this._getQueryName(matched);
  },

替换这些代码部分中的 on、off 和 trigger 应该很简单。提取断点可能会有点问题，但这也在 _init 函数的那个文件中。

或者您也可以使用 MediaQueryList.onchange:

var mql = window.matchMedia('(max-width: 600px)');

mql.onchange = (e) => {
    if (e.matches) {
    /* the viewport is 600 pixels wide or less */
    console.log('This is a narrow screen — less than 600px wide.')
  } else {
    /* the viewport is more than than 600 pixels wide */
    console.log('This is a wide screen — more than 600px wide.')
  }
}

如果媒体查询匹配或不匹配则获取事件。

纯JS基础断点变化事件监听器

pure JS foundation breakpoint changes event listener

javascript

zurb-foundation