jQuery是现在最风行的JavaScript器械库。
据统计，今朝全天下57.3%的网站利用它。也就是说，10个网站外面，有6个利用jQuery。假如只考核利用器械库的网站修建，这个比例就会上升到惊人的91.7%。
虽然jQuery如斯受迎接，然则它痴肥的体积也让人头痛不已。jQuery 2.0的原始巨细为235KB，优化后为81KB；假如是支持IE6、7、8的jQuery 1.8.3，原始巨细为261KB，优化后为91KB。
如许的体积，即就是宽带情况，完全加载也需要1秒或更长，更不要说挪动装备了。这意味着，假如你利用了jQuery，用户起码耽误1秒，才气看到网页了局。斟酌到本质上，jQuery只是一个操纵DOM的器械，我们不只要问：假如只是为了几个网页殊效，是否是有需要动用这么大的库？
2006年，jQuery降生的时刻，重要用于清除分歧浏览器的差别(重如果IE6)，为开辟者供给一个简洁的一致接口。比拟当时，现在的情况已发生了很大的转变。IE的市场份额赓续降落，以ECMAScript为根本的JavaScript尺度语法，正得到愈来愈遍及的支持。开辟者间接利用JavScript尺度语法，就能同时在各大浏览器运转，不再需要经过jQuery猎取兼容性。
上面就商量若何用JavaScript尺度语法，代替jQuery的一些重要功效，做到jQuery-free。
一、拔取DOM元素
jQuery的核心是经过各种遴选器，选中DOM元素，可以或许用querySelectorAll要领摹拟这个功效。
- var $ = document.querySelectorAll.bind(document);
这里需要留意的是，querySelectorAll要领前往的是NodeList工具，它很像数组(有数字索引和length属性)，但不是数组，不克不及利用pop、push等数组特有要领。假如有需要，高端网页设计，可以或许斟酌将Nodelist工具转为数组。
- myList = Array.prototype.slice.call(myNodeList);
二、DOM操纵
DOM自己就具有很丰硕的操纵要领，可以或许代替jQuery供给的操纵要领。
尾部追加DOM元素。
- // jQuery写法
- $(parent).append($(child));
-
- // DOM写法
- parent.appendChild(child)
头部拔出DOM元素。
- // jQuery写法
- $(parent).prepend($(child));
-
- // DOM写法
- parent.insertBefore(child, parent.childNodes[0])
删除DOM元素。
- // jQuery写法
- $(child).remove()
-
- // DOM写法
- child.parentNode.removeChild(child)
三、变乱的监听
jQuery的on要领，完全可以或许用addEventListener摹拟。
- Element.prototype.on = Element.prototype.addEventListener;
为了利用利便，可以或许在NodeList工具上也摆设这个要领。
- NodeList.prototype.on = function (event, fn) {
- []['forEach'].call(this, function (el) {
- el.on(event, fn);
- });
- return this;
- };
四、变乱的触发
jQuery的trigger要领则需要独自摆设，相对重大一些。
- 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;
- };
在NodeList工具上也摆设这个要领。
- NodeList.prototype.trigger = function (event) {
- []['forEach'].call(this, function (el) {
- el['trigger'](event);
- });
- return this;
- };
五、document.ready
今朝的最好实际，是将JavaScript剧本文件都放在页面底部加载。如许的话，实在document.ready要领(jQuery简写为$(function))已不消要了，因为等到运转的时刻，DOM工具已天生了。
六、attr要领
jQuery利用attr要领，读写网页元素的属性。
- $("#picture").attr("src", "http://url/to/image");
DOM元素答应间接读取属性值，写法要简洁良多。
- $("#picture").src = "http://url/to/image";
需要留意，input元素的this.value前往的是输入框中的值，链接元素的this.href前往的是相对URL。假如需要用到这两个网页元素的属性切确值，可以或许用this.getAttribute('value')和this.getAttibute('href')。
七、addClass要领
jQuery的addClass要领，用于为DOM元素增进一个class。
- $('body').addClass('hasJS');
DOM元素自己有一个可读写的className属性，可以或许用来操纵class。
- document.body.className = 'hasJS';
- // or
- document.body.className += ' hasJS';
HTML 5还供给一个classList工具，功效更壮大(IE 9不支持)。
- document.body.classList.add('hasJS');
- document.body.classList.remove('hasJS');
- document.body.classList.toggle('hasJS');
- document.body.classList.contains('hasJS');
八、CSS
jQuery的css要领，用来设置网页元素的款式。
- $(node).css( "color", "red" );
DOM元素有一个style属性，可以或许间接操纵。
- element.style.color = "red";;
- // or
- element.style.cssText += 'color:red';
九、数据贮存
jQuery工具可以或许贮存数据。
- $("body").data("foo", 52);
HTML 5有一个dataset工具，也有雷同的功效(IE 10不支持)，不外只能留存字符串。
- element.dataset.user = JSON.stringify(user);
- element.dataset.score = score;
十、Ajax
jQuery的Ajax要领，用于异步操纵。
- $.ajax({
- type: "POST",
- url: "some.php",
- data: { name: "John", location: "Boston" }
- }).done(function( msg ) {
- alert( "Data Saved: " + msg );
- });
我们可以或许界说一个request函数，摹拟Ajax要领。
- 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);
- }
然后，基于request函数，摹拟jQuery的get和post要领。
- var get = request.bind(this, 'GET');
- var post = request.bind(this, 'POST');
十一、动画
jQuery的animate要领，用于天活泼画了局。
- $foo.animate('slow', { x: '+=10px' })；
jQuery的动画了局，很大局部基于DOM。然则今朝，CSS 3的动画远比DOM壮大，以是可以或许把动画了局写进CSS，然后经过操纵DOM元素的class，来展现动画。
- foo.classList.add('animate')；
假如需要对动画利用回调函数，CSS 3也界说了相应的变乱。
- el.addEventListener("webkitTransitionEnd", transitionEnded);
-
- el.addEventListener("transitionend", transitionEnded);
十二、调换计划
因为jQuery体积过大，调换计划层见叠出。
个中，最著名的是zepto.js。它的计划目的是以最小的体积，做到最大兼容jQuery的API。zepto.js 1.0版的原始巨细是55KB，优化后是29KB，gzip紧缩后为10KB。
假如不求最大兼容，只希冀摹拟jQuery的根基功效，那末，min.js优化后只需200字节，而dolla优化后是1.7KB。
另外，jQuery自己回收模块计划，可以或许只遴选利用自己需要的模块。详细做法拜见它的github网站，或许利用公用的Web界面。