具有类似jQuery语法的Vanilla Javascript

Question

我知道用普通JavaScript代替jQuery是可能的。例如，我们可以将$('.some-class')替换为document.querySelector('.some-class')。

总而言之，这太棒了。我唯一不喜欢的是普通JavaScript语法有多冗长。document.querySelctor和$。

我想知道是否可以使用普通的JavaScript来获得类似jQuery的语法。它不一定是美元符号。也许是qs('.some-class')-或类似的符号。

这可能吗？如果是，如何？

谢谢。

Answer 1

是的，正如评论所说，你绝对可以用现代js 做到这一点

让我们看看我们可以用一些不同的方法来实现类似于jquery的东西，并举几个例子：

const qs = (query, att, val) => {
const multiple = document.querySelectorAll(query);
const setAtt = (child,index) => {
try {
child[att] = val;
} catch(e1){
try{
child.setAttribute(att, val);
} catch(e2){
console.log('error', e1, e2);
}
}
};    
//if its only 1 element it only runs once
multiple.forEach(setAtt);
}
qs('.single', 'innerText', 'Example');
qs('.multiple', 'innerText', 'Example2');
qs('.multiple', 'style', 'height: 25px; background-color: blue;');

div.single, div.multiple {
height: 50px;
clear: left;
background-color: red;
border: 1px solid black;
color: white;
}

<div class="single"></div>
<div class="multiple"></div>
<div class="multiple"></div>
<div class="multiple"></div>
<div class="multiple"></div>

但正如评论所说，如果你最终想要JQuery的1换1功能，那么你最终只会重新发明轮子。

为了构建相同的方法以便链接方法，需要不同的方法(总是返回一个对象，然后可以再次访问方法等(

需要明确的是，在我看来，vanillaJS现在可以很好地完成大多数事情。

以下是香草JS中的相同示例：

const qs = (query) => document.querySelectorAll(query);
qs('.single').forEach(child => child.innerText = 'Example');
qs('.multiple').forEach(child => child.innerText = 'Example2');
qs('.multiple').forEach(child => child.setAttribute('style','height: 25px; background-color: blue;'));

div.single, div.multiple {
height: 50px;
clear: left;
background-color: red;
border: 1px solid black;
color: white;
}

<div class="single"></div>
<div class="multiple"></div>
<div class="multiple"></div>
<div class="multiple"></div>
<div class="multiple"></div>

我很好奇我们将如何创建一个允许像JQuery这样的方法链接的对象/函数，所以我开始创建它：

const qs = (query) => {
const returnObj = {
multiple: document.querySelectorAll(query),
setAtt: function(att, val) {
return function(child,index){
try {
child[att] = val;
} catch(e1){
try{
child.setAttribute(att, val);
} catch(e2){
console.log('error', e1, e2);
}
}
}
},
//if its only 1 element it only runs once    
set innerText(val) {this.multiple.forEach(this.setAtt('innerText',val) ) },
set style(val) {this.multiple.forEach(this.setAtt('style',val) ) }
}
return returnObj;
}
qs('.single').innerText = 'Example';
qs('.multiple').innerText = 'Example2';
qs('.multiple').style = 'height: 25px; background-color: blue;';
//https://www.w3schools.com/js/js_object_accessors.asp

div.single, div.multiple {
height: 50px;
clear: left;
background-color: red;
border: 1px solid black;
color: white;
}

<div class="single"></div>
<div class="multiple"></div>
<div class="multiple"></div>
<div class="multiple"></div>
<div class="multiple"></div>

或者，我们可以在没有setter的情况下完成它，API可能看起来像这样(可能更接近JQuery(：

const qs = (query) => {
const returnObj = {
multiple: document.querySelectorAll(query),
setAtt: function(att, val) {
return function(child,index){
try {
child[att] = val;
} catch(e1){
try{
child.setAttribute(att, val);
} catch(e2){
console.log('error', e1, e2);
}
}
}
},
getAtt: function(att) {
return function(child,index){
if (child[att]) {
return child[att];
} else{
try{
return child.getAttribute(att);
} catch(e2){
console.log('error', e2);
return false;
}
}
}
},
_DOM_methods: function(att, val){        
if (val){  
this.multiple.forEach(this.setAtt(att,val) )
return this;
} else{
const returnArr = [...this.multiple].map(this.getAtt(att) )
if (returnArr.length == 1){
return returnArr[0];
} else{
return returnArr;
}   
} 
},
//if its only 1 element it only runs once
//if val is not supplied it returns the current val
innerText: function(val) {
return this._DOM_methods('innerText', val);
},
style: function(val) {
return this._DOM_methods('style', val);
}
}
return returnObj;
}
qs('.single').innerText('Example');
qs('.multiple')
.innerText('Example2')
.style('height: 25px; background-color: blue;');
console.log(qs('.single').innerText());
console.log(qs('.multiple').innerText());

div.single, div.multiple {
height: 50px;
clear: left;
background-color: red;
border: 1px solid black;
color: white;
}

<div class="single"></div>
<div class="multiple"></div>
<div class="multiple"></div>
<div class="multiple"></div>
<div class="multiple"></div>

查看如何在此处链接方法并返回当前值：

qs('.single').innerText('Example');
qs('.multiple')
.innerText('Example2')
.style('height: 25px; background-color: blue;');
console.log(qs('.single').innerText());
console.log(qs('.multiple').innerText());