Days are not jQuery
Before coming to the article, invite your aunts and grandmother to enjoy the masterpiece
As everyone knows, jQuery is a very popular javascript library, so popular that some of my friends used to write jQuery without knowing javascript.
It can be said that jQuery is like a psychological and perverted girl who needs to be there, go from A to Z too.
However, everything has two sides of it, the ones that we have not yet said at the end of the lesson. This article also does not aim to advise you to break up with the jQuery girl, but try a day away from her, how do you realize that celibacy is so wonderful.
Some no-jQuery examples
1. Listen to the event
Many developers have a habit of including all js by $ (document) .ready ():
1 2 3 | $ (document) .ready (function () { console.log ("ready!"); }); |
And pure JavaScript can be as follows:
1 2 3 | document.addEventListener ('DOMContentLoaded', function () { console.log ("ready!"); }); |
What about a click event? JQuery users will code as follows:
1 2 3 | $ (someElement) .on ('click', function () { // TODO event handler logic }); |
And when not using jQuery:
1 2 3 | someElement.addEventListener ('click', function () { // TODO event handler logic }); |
Not so bad.
2. Select the elements
To select elements, jQuery allows very short code:
1 2 3 4 5 6 7 8 9 10 | // By ID $ ('# myElement'); // By Class name $ ('. myElement'); // By tag name $ ('div'); // Children $ ('# myParent'). children (); // Complex selection $ ('article # first p.summary'); |
With JavaScript it will be as long as a bit:
1 2 3 4 5 6 7 8 9 10 | // By ID document.querySelector ('# myElement'); // By Class name document.querySelectorAll ('. myElement'); // By tag name document.querySelectorAll ('div'); // Children document.querySelector ('# myElement'). children; // Complex selection document.querySelectorAll ('article # first p.summary'); |
3. Use AJAX
Using jQuery is too quick:
1 2 3 4 | $ .get ("ajax / test.html", function (data) { $ (".result") .html (data); alert ("Load was performed."); }); |
And when not using jQuery:
1 2 3 4 5 6 7 8 9 10 11 12 | var request = new XMLHttpRequest (); request.open ('GET', 'ajax / test.html', true); request.onload = function (e) { if (request.readyState === 4) { // Check if the get was successful. if (request.status === 200) { console.log (request.responseText); } else { console.error (request.statusText); } } }; |
4. Add class less
jQuery provides two methods to add class (addClass), less class (removeClass) and because it is very spoiled, the bonus adds an island (toogleClass):
1 2 3 4 | // Adding a class $ ('# foo'). addClass ('bold'); // Removing a class $ ('# foo'). removeClass ('bold'); |
We have to do quite a lot with pure JavaScript:
1 2 3 4 | // Adding a class document.getElementById ('foo'). className + = 'bold'; // Removing a class document.getElementById ('foo'). className = document.getElementById ('foo'). className.replace (/ ^ bold $ /, ''); |
5. fadeIn effect
This is one of the secrets that users have just met has exploded the disk, especially the brothers of silk, like new and sparkling:
1 | $ (el) .fadeIn (); |
Only a short line of code is enough to satisfy the "legitimate needs" of the zai.
If you take a selfie at home with JavaScript, this is it:
1 2 3 4 5 6 7 8 9 10 11 12 13 | function fadeIn (el) { el.style.opacity = 0; var last = + new Date (); var tick = function () { el.style.opacity = + el.style.opacity + (new Date () - last) / 400; last = + new Date (); if (+ el.style.opacity <1) { (window.requestAnimationFrame && requestAnimationFrame (tick)) || setTimeout (tick, 16); } }; tick (); } fadeIn (el); |
Also happy as losing time even more.
6. Hide current element
With jQuery:
1 2 3 4 | // Hiding element $ (el) .hide (); // Showing element $ (el) .show (); |
No jQuery:
1 2 3 4 | // Hiding element el.style.display = 'none'; // Showing element el.style.display = 'block'; |
7. Control DOM
Try with inserting the card
into the #container element:
1 | $ ("# container"). append ("<p> more content </p>"); |
JavaScript is not too cool:
1 | document.getElementById ("container"). innerHTML + = "<p> more content </p>"; |
Delicious but it's "easy", is there a problem?
There is …
1. Influence the perception
As I mentioned at the beginning of the article, I know quite a lot of people who use jQuery but don't know JavaScript. What happen?
A correct sequence will be: JavaScript> Web API> jQuery.
But many people immediately contact jQuery and do not understand the nature of the problems behind it. This is not good for professional development.
Please note this issue.
2. Must import the library
You can't just get a jQuery part for what you need. You must import the entire library with a minimum size of approximately 300KB or use a minified library that is about 30KB in size.
Do you think this is a big problem? Imagine, in a beautiful day your website received 1 million requests, the amount of jQuery downloads would be equivalent to 30GB
That's not to mention you can use dozens of additional plugins.
You can replace it with using CDN, but that only reduces the server load, not faster page loading speed.
Having a card is not a big problem. Please continue with the following issues.
3. Processing speed
In essence, jQuery writes functions that handle shells outside JavaScript to be more user-friendly, which of course will make processing speed slower. Try some tests to see how slow it is:
1 2 3 4 5 6 7 8 9 10 11 12 13 | // jQuery 2.0 var c = $ ("# comments .comment"); // 4,649 ms // jQuery 2.0 var c = $ (". comment"); // 3,437 ms // native querySelectorAll var c = document.querySelectorAll ("# comments .comment"); // 1.362 ms // native querySelectorAll var c = document.querySelectorAll (". comment"); // 1,168 ms // native getElementById / getElementsByClassName var n = document.getElementById ("comments"); var c = n.getElementsByClassName ("comment"); // 107 ms // native getElementsByClassName var c = document.getElementsByClassName ("comment"); // 75 ms |
=> It's nearly 50 times slower, it's worth thinking about.
In addition, there is a website to help you find alternative jQuery codes. If needed you can access: youmightnotneedjquery.com .
I reaffirm that this article is not intended to advise you to abandon jQuery, nor to deny the excellence of jQuery. Simply add a little more information to make your choice more accurate.
Happy coding!