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);
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
let myStr = "This is a wonderful day.";
let reversed = myStr
.split("")
.reverse()
.join("");
console.log(reversed); // ".yad lufrednow a si sihT"
document.querySelector('#element')
.classList.add('active')
.classList.remove('hidden');
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>
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!
JQuery might as well be a shorthand JS library.
But if you're working on bigger projects: It is possible, but have have to be very principled in how you use it, otherwise you're going to end up with either a massive spaghetti codebase and lots of edge cases in your app that breaks.
Alternatives like React and Rust may add more complexity upfront, but the improved structure and safety it gives has big benefits in all but the smallest projects.
<https://github.com/jquery/jquery/blob/main/src/ajax/load.js>
Then at the vanilla JS 'load' :
const response = await fetch('/path/to/template.html');
const body = await response.text();
document.querySelector('#some.selector').innerHTML = body;
Now if exploring the cutting edge is a goal of yours in and of itself, then by all means blow some of those innovation tokens on the new Reactangular.ts hotness. For a lot of projects, though, the goal is to get something out the door as painlessly as possible; jQuery and plain JS have (for better or worse) been the tried-and-true "boring" approaches, and HTMX (from what I can tell) seeks to be the similarly "boring" choice.
Obviously right now HTMX ain't the boring choice (because it's still pretty new), but a decade from now it could be. Having used it in a couple pet projects recently, it already does feel pretty boring (especially since it goes hand-in-hand with other boring strategies like "just use SQL" and "just use CGI scripts" / "just use classic MVC frameworks").
----