或许你并不需要jQuery

此文为翻译文章，原文链接：you might not need jquery 

　　jQuery 和它的相关插件都是很强大的，使用它们让我们的应用开发变得简单。如果你正在开发另一个库，请花点时间思考以下，你是否真的需要依赖jQuery。如果你的应用仅针对更现代的浏览器，你可能不需要做过多的浏览器适配。

　　至少，你要知道 jQuery 为你做了些什么，和没有为你做些什么。一些开发者认为 jQuery 让我们从浏览器兼容中得以解脱，事实上，IE8之后，浏览器自身已经做的很好了。

 

一、AJAX

//jQuery - JSON
$.getJSON('/my/url', function(data) {

});

//原生 - JSON (IE9+)
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // 成功!
    var data = JSON.parse(request.responseText);
  } else {
    // 请求成功，但返回一个错误

  }
};
request.onerror = function() {
  // 请求失败
};
request.send();

 

//jQuery - POST
$.ajax({
  type: 'POST',
  url: '/my/url',
  data: data
});

//原生 - POST (IE8+)
var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

 

//jQuery - REQUEST
$.ajax({
  type: 'GET',
  url: '/my/url',
  success: function(resp) {

  },
  error: function() {

  }
});

//原生 - REQUEST (IE9+)
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // 成功!
    var resp = request.responseText;
  } else {
    // 请求成功，但返回一个错误

  }
};
request.onerror = function() {
  // 请求失败
};
request.send();

 

二、效果

//jQuery - fadeIn
$(el).fadeIn();

//原生 - fadeIn (IE9+)
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);

 

//jQuery - hide
$(el).hide();

//原生 - hide (IE8+)
el.style.display = 'none';

 

//jQuery - show
$(el).show();

//原生 - show (IE8+)
el.style.display = '';

 

三、元素

//jQuery - addClass
$(el).addClass(className);

//原生 - addClass (IE8+)
if (el.classList)
  el.classList.add(className);
else
  el.className += ' ' + className;

 

//jQuery - after
$(el).after(htmlString);

//原生 - after (IE8+)
el.insertAdjacentHTML('afterend', htmlString);

 

//jQuery - append
$(parent).append(el);

//原生 - append (IE8+)
parent.appendChild(el);

 

//jQuery - before
$(el).before(htmlString);

//原生 - before (IE8+)
el.insertAdjacentHTML('beforebegin', htmlString);

 

//jQuery - children
$(el).children();

//原生 - children (IE9+)
el.children

 

//jQuery - clone
$(el).clone();

//原生 - clone (IE8+)
el.cloneNode(true);

 

//jQuery - contains
$.contains(el, child);

//原生 - contains (IE8+)
el !== child && el.contains(child);

 

//jQuery - contains selector
$(el).find(selector).length;

//原生 - contains selector (IE8+)
el.querySelector(selector) !== null

 

//jQuery - each
$(selector).each(function(i, el){

});

//原生 - each (IE9+)
var elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function(el, i){

});

 

//jQuery - empty
$(el).empty();

//原生 - empty (IE9+)
el.innerHTML = '';

 

//jQuery - filter
$(selector).filter(filterFn);

//原生 - filter (IE9+)
Array.prototype.filter.call(document.querySelectorAll(selector), filterFn);

 

//jQuery - find
$(el).find(selector);

//原生 - find (IE8+)
el.querySelectorAll(selector);

 

//jQuery - 获取元素
$('.my #awesome selector');

//原生 - 获取元素 (IE8+)
document.querySelectorAll('.my #awesome selector');

 

//jQuery - attr
$(el).attr('tabindex');

//原生 - attr (IE8+)
el.getAttribute('tabindex');

 

//jQuery - html
$(el).html();

//原生 - html (IE8+)
el.innerHTML

 

//jQuery - outer html
$('<div>').append($(el).clone()).html();

//原生 - outer html (IE8+)
el.outerHTML

 

//jQuery - 获取样式
$(el).css(ruleName);

//原生 - 获取样式 (IE9+)
getComputedStyle(el)[ruleName];

 

//jQuery - text
$(el).text();

//原生 - text (IE9+)
el.textContent

 

//jQuery - hasClass
$(el).hasClass(className);

//原生 - hasClass (IE8+)
if (el.classList)
  el.classList.contains(className);
else
  new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);

 

//jQuery - is
$(el).is($(otherEl));

//原生 - is (IE8+)
el === otherEl

 

//jQuery - is
$(el).is('.my-class');

//原生 - is (IE9+)
var matches = function(el, selector) {
  return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);
};

matches(el, '.my-class');

 

//jQuery - next
$(el).next();

//原生 - next (IE9+)
el.nextElementSibling

 

//jQuery - offset
$(el).offset();

//原生 - offset (IE8+)
var rect = el.getBoundingClientRect();

{
  top: rect.top + document.body.scrollTop,
  left: rect.left + document.body.scrollLeft
}

 

//jQuery - offsetParent
$(el).offsetParent();

//原生 - offsetParent (IE8+)
el.offsetParent || el

 

//jQuery - outerHeight
$(el).outerHeight();

//原生 - outerHeight (IE8+)
el.offsetHeight

 

//jQuery - outerHeight
$(el).outerHeight(true);

//原生 - outerHeight (IE9+)
function outerHeight(el) {
  var height = el.offsetHeight;
  var style = getComputedStyle(el);

  height += parseInt(style.marginTop) + parseInt(style.marginBottom);
  return height;
}
outerHeight(el);

 

//jQuery - outerWidth
$(el).outerWidth();

//原生 - outerWidth (IE8+)
el.offsetWidth

 

//jQuery - outerWidth
$(el).outerWidth(true);

//原生 - outerWidth (IE9+)
function outerWidth(el) {
  var width = el.offsetWidth;
  var style = getComputedStyle(el);

  width += parseInt(style.marginLeft) + parseInt(style.marginRight);
  return width;
}
outerWidth(el);

 

//jQuery - parent
$(el).parent();

//原生 - parent (IE8+)
el.parentNode

 

//jQuery - position
$(el).position();

//原生 - position (IE8+)
{left: el.offsetLeft, top: el.offsetTop}

 

//jQuery - 相对于视窗位置
var offset = el.offset();
{
  top: offset.top - document.body.scrollTop,
  left: offset.left - document.body.scrollLeft
}

//原生 - 相对于视窗位置 (IE8+)
el.getBoundingClientRect()

 

//jQuery - prepend
$(parent).prepend(el);

//原生 - prepend (IE8+)
parent.insertBefore(el, parent.firstChild);