Lifting the jQuery Veil

Published on 30th Mar, 2015

I remember my first forays into JavaScript. I was working with the Joomla! CMS and at the time it exclusively used MooTools. I wasn't even really sure what JavaScript was, certainly not MooTools. I knew it was related to animating the webpage but I didn't have the foggiest idea on how to code it.

I scoured over pre-existing MooTools extensions trying to makes sense of what was going on, but between my ignorance of the language in general, and the added layer of the MooTools syntax, I never made much headway.

Then I discovered jQuery. From tweaking CSS layouts I recognized the class and ID syntax and it instantly clicked. A few hours fiddling about and I was guessing what functions to use from the jQuery API before I even looked them up.

Almost overnight, jQuery became my JavaScript.

That never really changed for almost 3 years. I never bothered (or needed) to open the hood and see what jQuery was actually doing. This was never really a disadvantage, but I was taking it for granted and decided it was time I did the right thing and learned something new.

I have a side-project that I've been wanting to start for quite some time and I finally made the leap and got some coding done, but I made an important decision: I will not be using jQuery. Again, this is nothing against jQuery, it's a fantastic library and works wonders at simplifying the language. But in order to better understand what JavaScript is (and what jQuery is doing), I'm writing every aspect of this project with vanilla Javascript. This goes for any dependencies I plan to add as well, that way I can debug them as I work to integrate them into my project.

Aside from the holy mission to better myself, I am also going to take advantage of the significant speed increases that come with bypassing the extra layer of jQuery, mainly because one of the core requirements of my side project is a super fast UI. Thus it makes sense to be as streamlined as possible and to cut out any and all fat...even helpful fat.

Luckily, I don't have to do this on my own. There is a fantastic site that translates a large chunk of the more important jQuery functions to plain JS: http://youmightnotneedjquery.com/. I plan to be referring to that one frequently, it even lets you pick the minimum version of IE you plan to support (since IE is a problem child at any version). This site is great for most all things, but something I didn't see that I like to use is delegated events. Essentially it's where you attach your event listener to a parent div, but only want the event to fire on certain child elements. This is fantastic for Ajax loaded content, because you don't need to re-attach your events after you reload something.

jQuery handles this with the on() function like so:

$("#myParentDiv").on("click", ".myChildElement", function(){/do stuff/});
So that's saying, attach a click event to this div, but only trigger it if someone clicked an element with the "myChildElement" class within the div.

I wanted to handle this in plain JS (which, by the way, is always an uglier affair) so what I did is attach my event listener to m parent like normal, then included a bunch of if statements that check the class of the event.target property that comes back with the event, like this:

container = document.querySelector("#my-container"); // Get the element
toolContainer.addEventListener("click", function(e){ // Attach listener and pass the event "e"
    if(e.target.className.indexOf("my-ajax-loaded-button") != -1){ // Check for class
        // Execute logic for this button
    }
});
There you have it. Delegated events in plain js. Instead of a bunch of if statements you could just grab the className property and run a switch statement, but I'll leave that to you. Also, I'm not saying this is how jQuery handles it on the back end, I haven't looked, rather this is just a way that I found to make it work.

There's nothing wrong with being a jQuery-head. I'm doing this as a matter of principle than anything else. I think there are many things in our lives we take for granted that we should learn about: our cars, our computers, our houses (plumbing, electric, etc). And in that vein, I'm going to get smart about how JavaScript works under the hood, you should too.

Take care.

This article is my 24th oldest. It is 739 words long

comments powered by Disqus