avoid-jquery-when-possible.md

Avoid jQuery When Possible

jQuery does good jobs when you're dealing with browser compatibility. But we're living in an age that fewer and fewer people use old-school browsers such as IE <= 7. With the growing of DOM APIs in modern browsers (including IE 8), most functions that jQuery provides are built-in natively.

When targeting only modern browsers, it is better to avoid using jQuery's backward-compatible features. Instead, use the native DOM API, which will make your web page run much faster than you might think (native C / C++ implementaion v.s. JavaScript).

If you're making a web page for iOS (e.g. UIWebView), you should use native DOM APIs because mobile Safari is not that old-school web browser; it supports lots of native DOM APIs.

If you're making a Chrome Extension, you should always use native APIs, not only because Chrome has almost the latest DOM APIs available, but this can also avoid performance issue and unnecessary memory occupation (each extension needs a separate memory space for its jQuery; it is not shared).

$("#header") → getElementById()

As long as you know the actual ID of the target element, why don't you use getElementById?

document.getElementById("header");
// instead of $("#header");

This works for IE >= 5.5

$(selector) & .find() → querySelectorAll()

Use querySelectorAll() instead:

document.querySelectorAll("#header ul li");
// instead of $("#header ul li")

// or when you're finding in the context of #header

var header = document.getElementById("header");
header.querySelectorAll("ul li");
// instead of $("#header").find("ul li");

This works for IE >= 8.

$("<a class='blah' href='…'>hi</a>") → createElement()

jQuery(html) is useful when you're doing DOM tree manipulation with that html snippet. But if you only have to create a new element, use the native DOM API createElement instead:

var element = document.createElement("a");
element.href = "http://www.example.com/";
element.className = "blah";
element.innerText = "hi";

The element.className lets you access the class attribute of that element. More about this in the section below.

class manipulation: use classList & className

jQuery provides some class manipulation functions such as addClass(), removeClass(), toggleClass() as well as hasClass(). With the new DOM API classList, we can avoid these functions.

Unfortunately IE <= 9 does not support classList. In this case you can use polyfills like classList.js or this polyfill for IE 9, or implement it manually by tokenizing the className string into an array, just like what jQuery does.

classList Usage

var element = document.getElementById("header");

// add class
element.classList.add("holiday-special");
// instead of $(element).addClass("holiday-special")

// for IE <= 9, we can do this: // mind the space!
element.className += " holiday-special";

// remove class
element.classList.remove("holiday-special");
// instead of $(element).removeClass("holiday-special")

// toggle a class
element.classList.toggle("hide");
// instead of $(element).toggleClass("hide")

// test if the element has some class
element.contains("hide");
// instead of $(element).hasClass("hide")

.css() → style attribute & style.cssText

jQuery's .css() is useful for style manipulation (merging one set into another set). But if you only have to assign one attribute or override the whole style rule, don't use it.

Alternatives:

Assigning One Attribute

e.g. Width

element.style.width = "320px";
// instead of $(element).css("width", "320px");

Overriding the Whole Style Rule

Write the style directly with element.style.cssText=. Note that this is just like writing inline style directly, so mind that semicolon ;.

e.g. Width = 320px, Height = 640px

element.style.cssText = "width: 320px; height: 640px;"; // Mind the semicolon
// instead of $(element).css({"width": "320px", "height": "640px"});

$.each() → use for statement

jQuery's $.each() is convenient when dealing with both Array and Object types, but why are we so lazy to know the actual data type?

Although $.each() doesn't often create performance issue, we can use native for loop (for array) and for..in iterator (for object).

The only benefit of $.each is that it uses a callback, so if you need an isolated variable scope, then $.each is better.

.data() → use HTML5 dataset

jQuery's .data() implements its own storage, which may cause lots of overhead.

If you're only supporting browsers with native HTML5 DataSet implementation, use element.dataset and its corresponding API to access the bounded data. Also see HTML5 Doctor's Guide on HTML5 data-* Attributes.

Say that we have the following HTML:

<div id="long-cat" data-cat-length="30km">Nyan</div>

Access the cat-length data with dataset:

var element = document.getElementById("long-cat");

// read the existing data:
element.dataset.catLength; // => "30km"

// write the existing data:
element.dataset.catLength = "42km";
element.dataset.catLength; // => "42km"

// same way to create a new data dynamically:
element.dataset.catWeight = "100t";
element.dataset.catWeight; // => "100t"

Note that the name of data will be converted to camelCase, see the spec for more details.

Support for Old Browsers

If you need to support old browsers, take a look at this polyfill, or use createAttribute and setAttributeNode:

// use the same HTML structure above

var element = document.getElementById("long-cat");

// read the existing data:
element.getAttributeNode("data-cat-length").nodeValue; // => "30km";

// write the existing data:
element.getAttributeNode("data-cat-length").nodeValue = "42km";
element.getAttributeNode("data-cat-length").nodeValue// => "42km";

// create a new data dynamically:
var attribute = document.createAttribute("data-cat-weight");
attribute.nodeValue = "100t";

element.setAttributeNode(attribute);
element.getAttributeNode("data-cat-weight").nodeValue; // => "100t"

References

1. Gecko DOM Reference - MDN

• Statements - JavaScript Reference - MDN
• WWDC 2012 Session 601 (I learnt classList and querySelectorAll in the video)