5 ms·
That website is (inadverently) one of the most effective marketing campaigns for jQuery. Some of the vanilla JS examples are atrocious. What it doesn't show is
by The_Colonel 2y ago
That website is (inadverently) one of the most effective marketing campaigns for jQuery. Some of the vanilla JS examples are atrocious.
What it doesn't show is that vanilla JS is not chainable (jQuery is).
- Bengalilol 2y agoWhat do you mean ? 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); // 16
- deniz-a 2y agothat classlist example won't work: https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenLis...
- Bengalilol 2y agoOops. You are right, I beg your pardon. Here's a working example. HTML <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);
- hu3 2y agoCongrats you're reinventing jQuery. With a worse and more limited API. 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.
- Bengalilol 2y agoI am truly interested in your arguments on why using chainable DOM Elements leads to less buggy websites.
- hu3 2y agoYou're the only one making that claim. Plus using a homemade alpha version of jQuery written by one dev leads to more bugs, not less.
- Bengalilol 2y ago> 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. 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!
- The_Colonel 2y agoThanks again for a nice demonstration of having to reinvent the wheel to produce a poor-man's buggy reimplementation of jQuery.