Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

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).



What 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



Oops. 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);


Congrats 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.


I am truly interested in your arguments on why using chainable DOM Elements leads to less buggy websites.


You'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.


> 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!


Thanks again for a nice demonstration of having to reinvent the wheel to produce a poor-man's buggy reimplementation of jQuery.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: