如何在 JavaScript 中设置客户 '$' 功能？

Question

在我的代码中我使用

$('button').hide();

隐藏按钮。

我不想包含 jQuery。在下面的示例中，我尝试将 $ 定义为 document.querySelector 函数。

const $ = document.querySelector;
$('button').style.display = 'none';

我无法使用 $ 以这种方式绑定函数。

你能解释一下为什么会这样吗

您还可以解释一下我如何将 $ 绑定到 document.querySelector

Answer 1

在你的例子中

const $ = document.querySelector;

我们正在将 querySelector 函数绑定到 $ 如果没有文档上下文，这将失败，因为 querySelector 函数需要父文档对象知道要查询的内容。

您可以通过在函数中包含文档引用来解决这个问题。

const $ = selector => (document.querySelector(selector));

如果您喜欢更详细的代码：

const $ = function(selector) {
    return document.querySelector(selector);
}

或者你可以这样写：

function $(selector) {
    return document.querySelector(selector);
}

这 post 可能与：

Why can't I directly assign document.getElementById to a different function?

How to set customer '$' function in JavaScript?