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

Question

万一我是这样的情况

1. 编写JavaScript
2. 不想使用像 jQuery 这样的框架
3. 想要用更短的内容替换对“document.querySelector”的频繁调用
4. 希望我的代码对于新开发人员来说仍然可读且熟悉

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

这是一个关于命名约定的问题。 我不是问如何做 缩写长函数名。作为参考，你可以这样做 这个：

var queryAll = document.querySelectorAll.bind(document);

Answer 1

不，没有。

此外，我认为使用缩写不是一个好主意。为什么要改变 Javascript API 没有其他原因，只是为了让它变得更短？

您可以重复使用类似

$

的内容，但是这样您可能会给读者留下您正在使用使用该缩写的现有库的印象。

其他一些注意事项：

• 如果您稍后决定添加使用相同缩写的库，会发生什么情况？你需要重构你的代码
• 如果有人想重用您的某些代码并且您的缩写与那里的代码或库冲突，会发生什么。
• 使用现代编辑器/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);

利用 箭头函数表达式 和 空合并运算符 (??) 和 分组运算符 ()
除非不明显，这总是 返回相同的东西，

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);
  }
}

为什么我选择命名“Selector”

• 我选择了第一个字母大写的命名有意，因为接口通常都是这样命名的，并且它稍微降低了全局级别上小猪代码冲突变量的风险
• 我没有将其命名为

  Select

  ，因为它含糊不清并且 可能意味着

  Selection

  这是一个不同的实验界面

• 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.

  ；
• 对于阅读你的代码的外人来说仍然完全可以理解。与

  querySelector

  不同，谷歌搜索

  Selector

  将立即产生结果。

此外，正如 Steve 所说，现代 IDE 无论如何都会自动完成名称，因此无需使其更短。您无需输入

doc

“tab”

.qu

“tab”，而只需输入

qu

“tab”。对我来说，这似乎很合理。

Answer 4

function qs(c,s) {
  if(s) {
    return c.querySelector(s)
  } else {
    return document.querySelector(c)
  }
}
function qsa(c,s) {
  if(s) {
    return c.querySelectorAll(s)
  } else {
    return document.querySelectorAll(c)
  }
}

这是一个糟糕的解决方案吗？