I'm trying to wean off of jQuery to reduce dependencies, but it makes me appreci...

bigfudge · on March 2, 2021

What I don't understand is why the modern js api didn't just adopt query's conventions... they're so much nicer and more expressive most of the time.

fendy3002 · on March 2, 2021

They cannot. If they do and remove the old getelementbyname, etc, then it will be breaking change.

If they just add $ notation, then there will be redundancy / inconsistency with existing api. Furthermore it will break / confuse apps which use jquery.

Then it's far easier to just include minified jquery into your apps when you want to use it, and you have more control about it's version, etc.

bigfudge · on March 3, 2021

I'm not saying to use $, but the elegance/composability of jQuery could have been implemented as they updated the API. And deprecating getelementbyname etc could have been done over a long period.

megous · on March 2, 2021

You can easily extend NodeList.prototype with Array.prototype functions you like, and then just use them:

    ['map', 'find'].forEach(f => NodeList.prototype[f] = Array.prototype[f]);

    document.querySelectorAll('bla').map(el => whatever)

That's what prototypes are for, anyway.

rofrol · on March 3, 2021

Nice,

  ['map', 'find', 'filter', 'reduce'].forEach(f => NodeList.prototype[f] = Array.prototype[f])
  // this is for for..of, cannot be above 'map', 'filter' etc.
  NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator]
  document.querySelectorAll('span').map(el => console.log(el))
  document.querySelectorAll('span').filter(el => el.className === 'fc-black-500').reduce((acc, el) => (acc += el.className, acc), '')
  for(let p of document.querySelectorAll('p')) { console.log(p) }

- https://stackoverflow.com/questions/30836289/for-of-loop-que...

megous · on March 5, 2021

You can also create a getter on NodeList.prototype named '_' that returns Array.from(this) and then just use any of the array methods on it. Like

    document.querySelectorAll('div')._.some(...)

So many options. :)