在 JavaScript 中是否有重命名 document.querySelector 等的约定？

Question

万一我是

写作JavaScript
不想使用jQuery
想要用更短的内容替换对 'document.querySelector' 的频繁调用
希望我的代码对于查看它的新开发人员来说仍然是可读和熟悉的

是否有任何常用的缩写来代替querySelector、querySelectorAll等？

This is a question about naming conventions. I'm not asking how to abbreviate a long function name. For reference, you can do it like this:
var queryAll = document.querySelectorAll.bind(document);

Answer 1

没有，没有。

此外，我不认为使用缩写词是个好主意。为什么要更改 Javascript API 只是为了缩短它？

您可以重用 $ 之类的内容，但您可能会给 reader 一种印象，即您正在使用使用该缩写的现有库。

其他一些注意事项：

如果您以后决定添加一个使用相同缩写的库会怎样？你需要重构你的代码
如果有人想重用您的部分代码，而您的缩写与那里的代码或库发生冲突，会发生什么情况。
对于现代编辑器/IDE，如果您使用自动填充，使用缩写不太可能减少输入量
对于学习 Javascript 的人来说，这很可能会使您的源代码难以阅读。

我过去这样做只是后来后悔了。使您的代码的可移植性降低。

简答。不推荐。

Answer 2

据我所知

让我们做一些

可在所有现代浏览器中使用的现代 JS oneliner

Selector = (s,c) => (c ?? document).querySelectorAll(s);

用法

// search in the whole document
Selector('.some, .randomClasses');

// search only in the context of someParent
var someParent = Selector('.give .me .parent')[0];
Selector('img', someParent);

杠杆作用arrow function expression and Nullish coalescing operator (??) and grouping operator ()
除非不明显，这总是 returns the same stuff, querySelectorAll 会，你可以很容易地调整它来做与 querySelector 类似的事情，或者命名它，例如SelectorOne，你懂的...

具有兼容性检查的更强大的 JS

用法保持不变，但以防万一有人担心它会破坏内容：

if (typeof Selector != "undefined") {
  console.warn('CONFLICT WITH Selector! - please address this issue!')
} else {
  function Selector(selector, current_context) {
    if (typeof current_context == "undefined") {
      current_context = document;
    }

    return current_context.querySelectorAll(selector);
  }
}

为什么我选择命名“选择器”

我选择第一个字母大写的命名故意，因为接口通常以这种方式命名，它略微降低了冲突的风险全局级别的小猪代码变量
我没有命名它~~Select~~因为是模棱两可的和可能意味着 Selection which is a different experimental interface
Selector，在HTML&CSS的世界里，够具体了:)

PS：我真的很想知道为什么他们把它写了这么久，这是人们使用大量库（比如旧的 jQuery）而不是做的主要原因简而言之 JavaScript...我真的希望这是技术原因...

Answer 3

虽然没有任何约定，但我在这里没有提到的另一种解决方案是声明

const querySelector = (sel, el) => (el ?? document).querySelector(sel);
const querySelectorAll = (sel, el) => (el ?? document).querySelectorAll(sel);

灵感来自@jave.web 的语法回答。

优点是：

更短，因为您可以放弃 document.，以防您从中选择；
阅读您的代码的外人仍然完全可以理解。 google 搜索 querySelector 会立即产生结果，这与 Selector.

此外，正如史蒂夫所说，现代 IDE 无论如何都会自动完成名称，因此无需缩短名称。您无需输入 doc“tab”.qu“tab”，而只需输入 qu“tab”。对我来说，这似乎是合理的。

在 JavaScript 中是否有重命名 document.querySelector 等的约定？

Is there a convention for renaming document.querySelector etc in JavaScript?

javascript

conventions

让我们做一些

可在所有现代浏览器中使用的现代 JS oneliner

用法

具有兼容性检查的更强大的 JS

为什么我选择命名“选择器”