你不需要jQuery(五)

什么不用jQuery？因为它让你的网站体积变得臃肿。你的网站并不真的需要jQuery，不需要它带来的额外体积、带宽和加载时间。

用原生JavaScript简单实现jQuery提供的功能和方法

查找、选择页面元素

// jQuery 实现
var els = $('.el');

// 原生JavaScript实现
var els = document.querySelectorAll('.el');

// 简写
var $ = function (el) {
  return document.querySelectorAll(el);
}

var els = $('.el');

　　创建元素

// jQuery 实现
var newEl = $('<div/>');

// 原生JavaScript实现
var newEl = document.createElement('div');

　　事件、监听器操作

// jQuery 实现
$('.el').on('event', function() {

});

// 原生JavaScript实现
[].forEach.call(document.querySelectorAll('.el'), function (el) {
  el.addEventListener('event', function() {

  }, false);
});

　　设置、修改和获取属性值

// jQuery 实现
$('.el').filter(':first').attr('key', 'value');
$('.el').filter(':first').attr('key');

// 原生JavaScript实现
document.querySelector('.el').setAttribute('key', 'value');
document.querySelector('.el').getAttribute('key');

　　增加/修改/删除/反转 类操作

// jQuery 实现
$('.el').addClass('class');
$('.el').removeClass('class');
$('.el').toggleClass('class');

// 原生JavaScript实现
document.querySelector('.el').classList.add('class');
document.querySelector('.el').classList.remove('class');
document.querySelector('.el').classList.toggle('class');

　　追加元素 Append

// jQuery 实现
$('.el').append($('<div/>'));

// 原生JavaScript实现
document.querySelector('.el').appendChild(document.createElement('div'));

　　复制、克隆元素

// jQuery 实现
var clonedEl = $('.el').clone();

// 原生JavaScript实现
var clonedEl = document.querySelector('.el').cloneNode(true);

　　删除元素

// jQuery 实现
$('.el').remove();

// 原生JavaScript实现
remove('.el');

function remove(el) {
  var toRemove = document.querySelector(el);

  toRemove.parentNode.removeChild(toRemove);
}

　　父元素操作

// jQuery 实现
$('.el').parent();

// 原生JavaScript实现
document.querySelector('.el').parentNode;

　　前一个/下一个/临近同辈元素

/ jQuery 实现
$('.el').prev();
$('.el').next();

// 原生JavaScript实现
document.querySelector('.el').previousElementSibling;
document.querySelector('.el').nextElementSibling;

　　

XHR aka AJAX

新版的JavaScript API里提供了一个全新的可以实现ajax的API——fetch，这个api采用了全新的 Promise 架构，使用起来更方便，更灵活，详细用法请参考《你不需要jQuery(三)：新AJAX方法fetch() 》。

下面是传统的实现方式：

// jQuery 实现
$.get('url', function (data) {

});
$.post('url', {data: data}, function (data) {

});

// 原生JavaScript实现

// get
var xhr = new XMLHttpRequest();

xhr.open('GET', url);
xhr.onreadystatechange = function (data) {

}
xhr.send();

// post
var xhr = new XMLHttpRequest()

xhr.open('POST', url);
xhr.onreadystatechange = function (data) {

}
xhr.send({data: data});

　　不可否认，jQuery有时候是开发项目时必不可少的，但不同的项目，不同的场景，项目的技术架构，都需要做不同的考量，经过冷静的思考，我们就会发现，很多时候，我并不需要jQuery，使用原生JavaScript技术反而项目变得更精简、效率更高。