Over a million developers have joined DZone.

Stop Using jQuery All the Time!

· Web Dev Zone

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.

I apologize for the link bait. I feel bad doing it. But at least you know I'm not a slimy SEO person and there is something useful in this article. ;)

Yesterday I blogged a simple little POC (Proof of Concept) that demonstrated adding a class to a random list element. As I said in the post yesterday, this was rather trivial code, but I wanted to share it because of the use of LocalStorage.

About an hour or so after I posted it, something began to bug me. I opened up the template and looked at the Network requests in Chrome dev tools.

Just in case it isn't obvious, let me break it down for you. My HTML document was a bit over 1.5K. The jQuery library, compressed, was 33K. To be fair, my HTML was limited to what was required for the demo, but even if I increased the size of my document ten fold, it would still be less than the size of the jQuery library.

Don't get me wrong. I love jQuery. I love what it has done for my development, my career, and my skin care. (Um, ok.) That being said, you don't need jQuery as much as you think. Consider what my demo did:

  • Run a function when the DOM was loaded.
  • Find some DOM items via CSS selectors.
  • Remove a class from one thing, add it to another.

That's it. Surely I could do that without an entire library, right? First, I switched to listening for the DOMContentLoaded event.

document.addEventListener("DOMContentLoaded", init, false);
    
function init() {

For finding DOM items, I made use of querySelector and querySelectorAll.

//get all the LIs
var menuItems = document.querySelectorAll("ul#menu li");

For adding and removing classes, I made use of the classList property.

document.querySelector("ul#menu li:nth-child("+(selected+1)+")").classList.add("selected");

After these changes, the size of my application was pretty much next to nothing.

Here is the complete template. Any questions?

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>

<style>
li.selected { background-color: red; }
</style>
</head>

<body>

<ul id="menu">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li class="selected">Item four</li>
<li>Item five</li>
</ul>

<script>
document.addEventListener("DOMContentLoaded", init, false);
    
function init() {
    //remove the selected class from the li that has it
    document.querySelector("li.selected").classList.remove("selected");
    
    //get all the LIs
    var menuItems = document.querySelectorAll("ul#menu li");

    //How many do we have?
    var numItems = menuItems.length;

    //Did we have a previous one?
    if(window.sessionStorage && window.sessionStorage.getItem("selected")) {
        previous = Number(window.sessionStorage.getItem("selected"));
    } else {
        previous = -1;
    }
    
    //Pick one by random
    var selected = Math.floor(Math.random()*numItems);
    while(selected === previous && numItems > 1) {
        selected = Math.floor(Math.random()*numItems);
    }
    
    if(window.sessionStorage) window.sessionStorage.setItem("selected", selected);
    
    //And set it
    document.querySelector("ul#menu li:nth-child("+(selected+1)+")").classList.add("selected");
}
</script>

</body>
</html>

 
 
 
 

Make the transition to Node.js if you are Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

Topics:

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}