What it doesn't show is that vanilla JS is not chainable (jQuery is).
What it doesn't show is that vanilla JS is not chainable (jQuery is).
let result = " hello jQuery "
.trim()
.replace("jQuery", "javascript")
.toUpperCase();
console.log(result);
map, filter, ... let numbers = [1, 2, 3, 4, 5];
let result = numbers
.filter(num => num % 2 === 0)
.map(num => num * 2)
.reduce((sum, num) => sum + num, 0);
console.log(result); // 12
Simple string let myStr = "This is a wonderful day.";
let reversed = myStr
.split("")
.reverse()
.join("");
console.log(reversed); // ".yad lufrednow a si sihT"
DOM elements document.querySelector('#element')
.classList.add('active')
.classList.remove('hidden');
Using a class class Chainable {
constructor(value) {
this.value = value;
}
add(num) {
this.value += num;
return this; // make it chainable
}
multiply(num) {
this.value *= num;
return this;
}
getValue() {
return this.value;
}
}
let result = new Chainable(5)
.add(3)
.multiply(2)
.getValue();
console.log(result); // 16HTML
<span class="a b c"></span>
JS function getClassList(el) {
let ele = document.querySelector(el);
let list = ele.classList;
return {
add: function (c) {
list.add(c);
return this;
},
toggle: function (c) {
list.toggle(c);
return this;
},
remove: function (c) {
list.remove(c);
return this;
},
}
}
getClassList('span').remove('b').add('e').toggle('a');
console.log(document.querySelector('span').classList);Plus jQuery is one of the most battle tested libraries in the world.
That "ops" you made with classlist, you're bound to repeat these mistakes ad infinitum. And they can bite in subtle ways only your users might experience.
People rarely report broken websites unless they really need to.
Plus using a homemade alpha version of jQuery written by one dev leads to more bugs, not less.
I think those two sentences are out of bounds, but I somehow get you. Yet I don't get the 'broken website' remark (took it condescending, or is it from experience?).
Mainly, I was replying to the affirmation that javascript is not chainable which is (imho) an indication of how one could get disconnected to the underlying lang by simply relying on libs such as jQuery (and I am thinking the same about htmx). Thanks for your reply!