Let’s write JQuery from scratch and why I think JQuery is useless in 2019.

http://www.quickmeme.com/p/3vsis5/page/2/

I started working as a software developer in 2015, and I honestly never understood why developers still use JQuery everywhere, I truly believe that jquery is useless nowadays and this article is meant to prove that we can do anything that JQuery can do, simply, and with native javascript and in a more intuitive way.

This is my opinion and only mine, other people think differently like hackernoon or this guy, you may disagree with me and that’s ok, keep it to yourself, please.

http://www.quickmeme.com/fuck-me-right/page/158/

I get it, simple operations that became web standards, have been a horrible thing to do back in the days when IE9 ruled the market, but today things are different and it really bothers me to still see people use JQuery.
One of the worst things I got to see was using JQuery inside Vue.js components to select elements (I mean… there is even a vue library to do so, that has over 100 weekly downloads. WTF?), and damn it Erik! I trusted you!.
I hate to see libraries that were great in the old days being abused like that when you already have a huge library that does those things, and especially I hate to see people preaching to do so and people who don’t understand why this is wrong.

So In this article, I’m going to build all of JQuery’s popular features from scratch.
It is meant to understand why JQuery has lost its value nowadays, if you don’t work with a framework, just use native javascript, and if you do use a framework — take the time and learn that framework properly, stop pushing query everywhere.

Show me the code

The first function we will have to build is the JQuery ($) function, it is able to accept a single parameter, it can be an HTML element, a selector, or another jqueryElement, or nothing.

ElementAbstraction class will be used as the element wrapper, I added a very specific key “__elementAbstraction” to identify it, and it will take an array of elements, another abstraction or nothing, which we can default to Document.body.

Great, now we can use it like this:

$('li'); // returns an abstraction of multiple elements
$(''); // returns an abstraction of document.body
$(); // returns an abstraction of document.body
$($('#my-id')); // returns an abstraction of a single element

Now let’s work on implementing the most used JQuery functions, the full implementation for those came out as 200 lines of code, so we will go over some of them and you can see the full implementation as a gist at the end of this article.

First I want to create a few helper functions, one to normalize the return value for arrays, and another to check if a value is null or undefined, and two to detect types, it will save us some code later.

const returnValue = values => values.length === 1 ? values[0] : values;
const exists = value => value !== undefined && value !== null;
const isString = value => typeof value === 'string';
const isArray = value => Array.isArray(value);

Now we can implement the html() function easily, we will map the elements, if we pass a new HTML string, we will assign it to the innerHTML, simple 😃.

// set or get html
html(newHTML) {
  // we map the elements html, if any html string was passed we
  const values = this.elements.map(el => {
    if (exists(newHTML)) {
      el.innerHTML = newHTML;
    }
    return el.innerHTML;
  });
  return returnValue(values);
}

It can now be used like this:

$('li').html() // returns an array like ['yo', '<p>list item</p>']
$('#myEl').html('Yo') // returns 'Yo' and assign Yo to the html

The next function I will show you how to implement here is the on, which is basically binding an event listener to the element since jquery can accept another selector to bind the event to under the element (for god’s sake why?) I named it “callbackOrSelector”.

// attach event to elements
on(eventName, callbackOrSelector, callback) {
  if (isString(callbackOrSelector)) {
  this.elements.forEach(el => {
    el = el.find(callbackOrSelector);
    if (el) {
      el.addEventListener(eventName, callback);
    }
  });
  } else {
    this.elements.forEach(el => el.addEventListener(eventName, callbackOrSelector));
  }
}

And that can be used like so:

$('#hello').on('click', function(event){
  $(this).html('clicked');
})

Let’s wrap this up by showing a full example for the 10 most used jquery functions:

https://www.reddit.com/r/ProgrammerHumor/comments/7osilb/when_you_ask_for_php_help_on_stackoverflow/

For conclusion, at least if you use a framework like React/Vue/Angular, stop using jquery, please! And if not, just use native javascript, it’s great, intuitive and more fun to work with 😁!