How can a website meet simple needs without jQuery at all_jquery

jQuery is the most popular JavaScript tool library today.

According to statistics, it is currently used by 57.3% of websites around the world. In other words, 6 out of 10 websites use jQuery. If you only look at sites that use tool libraries, this percentage rises to a staggering 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 this size, it will take 1 second or more to fully load even on a broadband environment, let alone a mobile device. This means that if you use jQuery, there will be a delay of at least 1 second before the user sees the page effect. Considering that jQuery is essentially a tool for manipulating DOM, we not only have to ask: Is it necessary to use such a large library if it is just for a few web page effects?

In 2006, when jQuery was born, it was mainly used to eliminate the differences between different browsers (mainly IE6) and provide developers with a simple unified interface. Compared to then, the situation today has changed a lot. IE's market share continues to decline, and the JavaScript standard syntax based on ECMAScript is receiving more and more widespread support. Developers can directly use JavScript standard syntax and run it in all major browsers at the same time. They no longer need to obtain compatibility through jQuery.

Let’s explore how to use JavaScript standard syntax to replace some of jQuery’s main functions to make it jQuery-free.

1. Select DOM elements

The core of jQuery is to select DOM elements through various selectors. You can use the querySelectorAll method to simulate this function.

Copy code The code is as follows:

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 a numeric index and length property), but it is not an array, and array-specific methods such as pop and push cannot be used. If necessary, consider converting the Nodelist object to an array.

Copy code The code is as follows:

myList = Array.prototype.slice.call (myNodeList);

2. DOM operations

DOM itself has a rich set of operation methods, which can replace the operation methods provided by jQuery.

Append DOM elements at the end.

Copy code The code is as follows:

// jQuery writing
$(parent) . append ($(child));
// DOM writing
parent.appendChild (child)

Insert DOM element into the head.

Copy code The code is as follows:

// jQuery writing
$(parent) . prepend ($(child));
// DOM writing
parent.insertBefore (child, parent.childNodes[0])

Delete DOM elements.

Copy code The code is as follows:

// jQuery writing
$(child) . remove ()
// DOM writing
child.parentNode.removeChild (child)

3. Event monitoring

jQuery’s on method can be simulated using addEventListener.

Copy code The code is as follows:

Element.prototype.on = Element.prototype.addEventListener;

For ease of use, this method can also be deployed on the NodeList object.

Copy code The code is as follows:

NodeList.prototype.on = function (event, fn) {
[]['forEach'].call (this, function (el) {
el.on (event, fn);
});
return this;
};

4. Event triggering

jQuery’s trigger method needs to be deployed separately, which is relatively complicated.

Copy code The code is as follows:

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;
};

Also deploy this method on the NodeList object.

Copy code The code is as follows:

NodeList.prototype.trigger = function (event) {
[]['forEach'].call (this, function (el) {
el['trigger'](event);
});
return this;
};

5. document.ready

The current best practice is to load JavaScript script files at the bottom of the page. In this case, the document.ready method (jQuery abbreviated as $(function)) is no longer necessary, because the DOM object has already been generated by the time it is run.

6. attr method

jQuery uses the attr method to read and write attributes of web page elements.

Copy code The code is as follows:

$("#picture") .attr ("src", " http://url/to/image");

DOM elements allow direct reading of attribute values, and the writing method is much simpler.

Copy code The code is as follows:

$("#picture") .src = "http:// url/to/image";

It should be noted that this.value of the input element returns the value in the input box, and this.href of the link element returns the absolute URL. If you need to use the exact values ​​of the attributes of these two web page elements, you can use this.getAttribute (‘value’) and this.getAttibute (‘href’).

7. addClass method

jQuery’s addClass method is used to add a class to a DOM element.

Copy code The code is as follows:

$('body') .addClass ('hasJS' );

The DOM element itself has a readable and writable className attribute that can be used to manipulate classes.

Copy code The code is as follows:

document.body.className = 'hasJS';
// or
document.body.className = ' hasJS';

HTML 5 also provides a classList object with more powerful functions (not supported by IE 9).

Copy code The code is as follows:

document.body.classList.add ('hasJS') ;
document.body.classList.remove ('hasJS');
document.body.classList.toggle ('hasJS');
document.body.classList.contains ('hasJS');

8. CSS

jQuery’s css method is used to set the style of web page elements.

Copy code The code is as follows:

$(node) .css ("color", "red") ;

DOM elements have a style attribute that can be manipulated directly.

Copy code The code is as follows:

element.style.color = "red";;
// or
element.style.cssText = 'color:red';

9. Data Storage

jQuery objects can store data.

Copy code The code is as follows:

$("body") .data ("foo", 52);

HTML 5 has a dataset object with similar functions (not supported by IE 10), but it can only save strings.

Copy code The code is as follows:

element.dataset.user = JSON.stringify (user) ;
element.dataset.score = score;

10. Ajax

jQuery’s Ajax method for asynchronous operations.

Copy code The code is as follows:

$.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.

Copy code The code is as follows:

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.

Copy code The code is as follows:

var get = request.bind (this, 'GET' );
var post = request.bind (this, 'POST');

11. Animation

jQuery’s animate method is used to generate animation effects.

Copy code The code is as follows:

$foo.animate ('slow', { x: ' =10px ' });

jQuery’s animation effects are largely based on DOM. But currently, CSS 3 animation is far more powerful than DOM, so you can write animation effects into CSS, and then display the animation by manipulating the class of DOM elements.

Copy code The code is as follows:

foo.classList.add ('animate');

If you need to use callback functions for animations, CSS 3 also defines corresponding events.

Copy code The code is as follows:

el.addEventListener ("webkitTransitionEnd", transitionEnded);
el.addEventListener ("transitionend", transitionEnded);

12. Alternatives

Due to the size of jQuery, there are endless alternatives.

Among them, the most famous is zepto.js. Its design goal is to be as compatible with jQuery's API as possible with the smallest size. The original size of zepto.js version 1.0 is 55KB, optimized to 29KB, and gzipped to 10KB.

If you don’t seek maximum compatibility and just 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 module design, so you can only choose to use the modules you need. See its GitHub website for details, or use the dedicated Web interface.

13. Reference links

- Remy Sharp, I know jQuery. Now what?
- Hemanth.HM, Power of Vanilla JS
- Burke Holland, 5 Things You Should Stop Doing With jQuery

(End)