有人可以解释一下 `matcher` 和 `addListener` 是什么吗？ [复制]答案

【问题标题】：Can someone please explain what `matcher` and `addListener` are? [duplicate]有人可以解释一下 `matcher` 和 `addListener` 是什么吗？ [复制]
【发布时间】：2023-01-11 16:55:00
【问题描述】：

这是一个非常菜鸟的问题，但是......

我不明白这段代码是如何工作的。它有一个叫做 matcher 的东西，我什至不必声明这个“变量”或其他任何东西。另外，什么是addListener？我以为应该是addEventListener。

代码有效，但我不知道如何。我确实了解 OnUpdate 函数是如何工作的，但我不了解下面的部分。

"use-strict";

lightSchemeIcon = document.querySelector("link#light-scheme-icon");
darkSchemeIcon = document.querySelector("link#dark-scheme-icon");

function OnUpdate() {
  if (matcher.matches) {
    darkSchemeIcon.remove();
    document.head.append(lightSchemeIcon);
  } else {
    document.head.append(darkSchemeIcon);
    lightSchemeIcon.remove();
  }
}

matcher = window.matchMedia("(prefers-color-scheme: dark)");
matcher.addListener(OnUpdate);
OnUpdate();

我试着搜索它们，但我得到的唯一答案是 match() 和 addEventListener()。但是，我想知道的是 matcher 以及它是如何在没有任何声明的情况下工作的，以及 addListener。

【问题讨论】：

它是 "use strict"; 而不是 "use-strict"; 是的，您应该已经声明了这些变量。
“我什至不必声明这个“变量” [...] 它是如何在没有任何声明的情况下工作的“这就是 matcher = window.matchMedia("(prefers-color-scheme: dark)") 所做的。”我试着搜索它们" developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia 在我搜索时立即出现。
matchMedia 返回一个 MediaQueryList，它有一个 addListener 方法

标签： javascript dom

【解决方案1】：

window.matchMedia()创建一个新的MediaQueryList实例，它有一个方法addListener()

添加监听器()

向 MediaQueryList 添加一个回调，每当媒体查询状态（无论文档是否与列表中的媒体查询匹配）发生变化时都会调用该回调。该方法的存在主要是为了向后兼容；如果可能，您应该改为使用 addEventListener() 来监视更改事件。

https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList

看起来 addListener 现已弃用：https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener

【讨论】：