[英]Is there a convention for renaming document.querySelector etc in JavaScript?
In the unlikely event that I am万一我是
Are there any abbreviations that are commonly used to replace querySelector, querySelectorAll, etc?是否有任何常用的缩写来代替 querySelector、querySelectorAll 等?
This is a question about naming conventions.这是一个关于命名约定的问题。 I'm not asking how to abbreviate a long function name .我不是在问如何缩写一个长的 function 名称。 For reference, you can do it like this:作为参考,您可以这样做:
var queryAll = document.querySelectorAll.bind(document);
No, there isn't.不,没有。
Furthermore, I don't think its a good idea to use abbreviations.此外,我认为使用缩写不是一个好主意。 Why change the Javascript API for no other reason than to make it shorter?为什么要更改 Javascript API 只是为了使其更短?
You could reuse something like $
, but then you might give the reader the impression that you are using an existing library that uses that abbreviation.您可以重复使用$
,但这样您可能会给读者留下您正在使用使用该缩写的现有库的印象。
Some other considerations:其他一些考虑:
I've done this in the past only to regret it later.我过去做过这件事,后来才后悔。 Makes your code less portable.使您的代码不那么可移植。
Short answer.简短的回答。 I don't recommend it.我不推荐它。
not that I know of从来没听说过
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);
Leverages arrow function expression and Nullish coalescing operator (??) and grouping operator ()利用箭头函数表达式和空合并运算符 (??)和分组运算符 ()
Unless not obvious, this always returns the same stuff, querySelectorAll
would, you can easily adjust this to do similar with querySelector
maybe naming it eg SelectorOne
, you get the picture...除非不明显,否则这总是返回相同的东西, querySelectorAll
会,您可以轻松调整它以与querySelector
类似,也许将其命名为SelectorOne
,您会得到图片...
Usage stays the same, but in case someone's worried about it breaking stuff:用法保持不变,但万一有人担心它会破坏东西:
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因为这是模棱两可的,并且可能暗示Selection
这是一个不同的实验界面Selector
, in HTML&CSS world, is specific enough :) Selector
,在 HTML&CSS 世界中,已经足够具体了 :)
PS: I really do wonder why they made it so long, when that was the main reason people were using heavy libraries (like old jQuery) instead of doing it in plain JavaScript... I really do hope it was a technical reason... PS:我真的很想知道为什么他们把它弄这么久,当这是人们使用繁重的库(比如旧的 jQuery)而不是用纯 JavaScript 来做的主要原因时......我真的希望这是一个技术原因.. .
While there isn't any convention, one other solution that I haven't seen mentioned here would be to declare虽然没有任何约定,但我在这里没有提到的另一种解决方案是声明
const querySelector = (sel, el) => (el ?? document).querySelector(sel);
const querySelectorAll = (sel, el) => (el ?? document).querySelectorAll(sel);
which is inspired from @jave.web's answer in syntax.灵感来自@jave.web 的语法回答。
The advantages are that this is:优点是:
document.
更短,因为您可以放弃document.
in case you're selecting from it;如果您要从中选择;querySelector
will immediately yield results, unlike Selector
.与Selector
不同,谷歌搜索querySelector
将立即产生结果。 Also, as Steve said, modern IDEs will autocomplete the name anyways so there no need to make it any shorter.此外,正如史蒂夫所说,现代 IDE 无论如何都会自动完成名称,因此无需缩短名称。 Instead of typing doc
"tab" .qu
"tab" you'll be just typing qu
"tab".不用输入doc
"tab" .qu
"tab",你只需输入qu
"tab"。 To me, this seems reasonable.在我看来,这似乎是合理的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.