How to make it jQuery-free?
jQuery is the most popular JavaScript tool library.
According to statistics , currently 57.3% of the world’s websites use it. In other words, 6 out of 10 websites use jQuery. If you only look at sites that use the tool library, this proportion will rise to an astonishing 91.7%.
Although jQuery is so popular, its bloated size is also a headache. The original size of jQuery 2.0 is 235KB, and the optimized size is 81KB; if it is jQuery 1.8.3 that supports IE6, 7, and 8, the original size is 261KB, and the optimized size is 91KB.
With such a volume, even in a broadband environment, it takes 1 second or longer to fully load, let alone a mobile device. This means that if you use jQuery, the user will delay at least 1 second before they can see the web page effect. Considering that in essence, jQuery is just a tool for manipulating the DOM, we not only have to ask: If it is just for a few web page special effects, is it necessary to use such a large library?
When jQuery was born in 2006, it was mainly used to eliminate the differences between different browsers (mainly IE6) and to provide developers with a simple and unified interface. Compared to then, the situation today has changed a lot. IE’s market share is declining, and the JavaScript standard syntax based on ECMAScript is getting more and more widespread support. Developers can directly use the JavScript standard syntax to run in all major browsers at the same time, and no longer need to obtain compatibility through jQuery.
Let’s discuss how to use JavaScript standard syntax to replace some of the main functions of jQuery to achieve jQuery-free.
One, select DOM elements
The core of jQuery is to select DOM elements through various selectors, which can be simulated by the querySelectorAll method.
var $ = document.querySelectorAll.bind(document);
It should be noted here that the querySelectorAll method returns a NodeList object, which is very similar to an array (with numeric index and length attributes), but it is not an array, so you cannot use pop, push and other unique methods of arrays. If necessary, consider turning the Nodelist object into an array.
myList = Array.prototype.slice.call(myNodeList);
Two, DOM operation
The DOM itself has a wealth of operation methods, which can replace the operation methods provided by jQuery.
Append DOM elements to the end.
// jQuery writing
$(parent).append($(child));// DOM writing
parent.appendChild(child)
Insert a DOM element into the head.
// jQuery writing
$(parent).prepend($(child));// DOM writing
parent.insertBefore(child, parent.childNodes[0])
Remove DOM elements.
// jQuery writing
$(child).remove()// DOM writing
child.parentNode.removeChild(child)
Three, event monitoring
jQuery’s on method can be simulated with addEventListener.
Element.prototype.on = Element.prototype.addEventListener;
For ease of use, this method can also be deployed on the NodeList object.
NodeList.prototype.on = function (event, fn) {
[][‘forEach’].call(this, function (el) {
el.on(event, fn);
});
return this;
};
Fourth, the triggering of the event
jQuery’s trigger method needs to be deployed separately, which is relatively complicated.
Element.prototype.trigger = function (type, data) {
var event = document.createEvent(‘HTMLEvents’);
event.initEvent(type, true, true);
event.data = data || {};
event.eventName = type;
event.target = this;
this.dispatchEvent(event);
return this;
};
This method is also deployed on the NodeList object.
NodeList.prototype.trigger = function (event) {
[][‘forEach’].call(this, function (el) {
el[‘trigger’](event);
});
return this;
};
Five, document.ready
The current best practice is to load all JavaScript script files at the bottom of the page. In this case, the document.ready method (jQuery abbreviated as $(function)) is actually unnecessary, because the DOM object has already been generated by the time it runs.
Six, attr method
jQuery uses the attr method to read and write the attributes of web page elements.
$(“#picture”).attr(“src”, “http://url/to/image”);
DOM elements allow direct reading of attribute values, and the writing is much more concise.
$(“#picture”).src = “http://url/to/image”;
It should be noted that the this.value of the input element returns the value in the input box, and the this.href of the link element returns the absolute URL. If you need to use the exact values of the attributes of these two webpage elements, you can use this.getAttribute(‘value’) and this.getAttibute(‘href’).
Seven, addClass method
The addClass method of jQuery is used to add a class to the DOM element.
$(‘body’).addClass(‘hasJS’);
The DOM element itself has a readable and writable className attribute, which can be used to manipulate the class.
document.body.className =’hasJS’;
// or
document.body.className += ‘hasJS’;
HTML 5 also provides a classList object, which is more powerful (not supported by IE 9).
document.body.classList.add(‘hasJS’);
document.body.classList.remove(‘hasJS’);
document.body.classList.toggle(‘hasJS’);
document.body.classList.contains(‘hasJS’);
Eight, CSS
jQuery’s css method is used to set the style of web page elements.
$(node).css( “color”, “red” );
DOM elements have a style attribute, which can be manipulated directly.
element.style.color = “red”;;
// or
element.style.cssText +=’color:red’;
Nine, data storage
jQuery objects can store data.
$(“body”).data(“foo”, 52);
HTML 5 has a dataset object with similar functions (not supported by IE 10), but it can only save strings.
element.dataset.user = JSON.stringify(user);
element.dataset.score = score;
Ten, Ajax
jQuery’s Ajax method is used for asynchronous operations.
$.ajax({
type: “POST”,
url: “some.php”,
data: {name: “John”, location: “Boston”}
}).done(function( msg) {
alert( “Data Saved: “+ msg );
});
We can define a request function to simulate the Ajax method.
function request(type, url, opts, callback) {
var xhr = new XMLHttpRequest();
if (typeof opts ===’function’) {
callback = opts;
opts = null;
}xhr.open(type, url);
var fd = new FormData();
if (type ===’POST’ && opts) {
for (var key in opts) {
fd.append(key, JSON.stringify(opts[key]));
}
}xhr.onload = function () {
callback(JSON.parse(xhr.response));
};xhr.send(opts? fd: null);
}
Then, based on the request function, simulate jQuery’s get and post methods.
var get = request.bind(this,’GET’);
var post = request.bind(this,’POST’);
11. Animation
jQuery’s animate method is used to generate animation effects.
$foo.animate(‘slow’, {x:’+=10px’ });
Most of jQuery’s animation effects are based on the DOM. But at present, the animation of CSS 3 is far more powerful than the DOM, so you can write the animation effect into the CSS, and then display the animation by manipulating the class of the DOM element.
foo.classList.add(‘animate’);
If you need to use a callback function for the animation, CSS 3 also defines the corresponding event.
el.addEventListener(“webkitTransitionEnd”, transitionEnded);
el.addEventListener(“transitionend”, transitionEnded);
12. Alternatives
Due to the size of jQuery, alternatives are endless.
Among them, the most famous is zepto.js . Its design goal is to minimize the size and achieve maximum compatibility with jQuery API. The original size of zepto.js version 1.0 is 55KB, 29KB after optimization, and 10KB after gzip compression.
If you do not seek maximum compatibility, but only want to simulate the basic functions of jQuery, then min.js is only 200 bytes after optimization , while dolla is 1.7KB after optimization.
In addition, jQuery itself adopts a modular design, so you can choose to use only the modules you need. For details, please refer to its github website , or use a dedicated web interface .
13. Reference link
-Remy
Sharp,
I know jQuery. Now what?
-Hemanth.HM,
Power of Vanilla JS
-Burke Holland,
5 Things You Should Stop Doing With jQuery
(over)