你可能不需要 jQuery！使用原生 JavaScript 進(jìn)行開(kāi)發(fā)

很多的 JavaScript 開(kāi)發(fā)人員，包括我在內(nèi)，都很喜歡 jQuery。因?yàn)樗暮?jiǎn)單，因?yàn)樗泻芏嘭S富的插件可供使用。然而，另一方面，作為前端開(kāi)發(fā)的基礎(chǔ)框架，jQuery 包含大量的兼容性代碼和擴(kuò)展功能，其中有很多在你的整個(gè)項(xiàng)目中可能都不會(huì)用到。

　　很多的 JavaScript 開(kāi)發(fā)人員，包括我在內(nèi)，都很喜歡 jQuery。因?yàn)樗暮?jiǎn)單，因?yàn)樗泻芏嘭S富的插件可供使用，和其它優(yōu)秀的工具一樣，jQuery 讓我們開(kāi)發(fā)人員能夠更輕松的開(kāi)發(fā)網(wǎng)站和 Web 應(yīng)用。

　　然而，另一方面，作為前端開(kāi)發(fā)的基礎(chǔ)框架，jQuery 包含大量的兼容性代碼和擴(kuò)展功能，其中有很多在你的整個(gè)項(xiàng)目中可能都不會(huì)用到。其實(shí)如果你只是針對(duì)現(xiàn)代瀏覽器，很多功能使用原生的 JavaScript 就可以實(shí)現(xiàn)，即使是拖后腿的低版本 IE 瀏覽器，兼容性也是很容易處理的。

您可能感興趣的相關(guān)文章

　　下面就帶大家一起看看在 IE 瀏覽器環(huán)境中如果使用原生 JavaScript 代碼實(shí)現(xiàn) jQuery 中的功能。如果你打算自己開(kāi)發(fā)一個(gè)小的基礎(chǔ)框架，可以好好參考一下這些代碼的實(shí)現(xiàn)。

Ajax Post

jQuery：

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

IE8+：

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.send(data);

Ajax Get

jQuery：

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

  },
  error: function() {

  }
});

IE8+：

request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onreadystatechange = function() {
  if (this.readyState === 4){
    if (this.status >= 200 && this.status < 400){
      // Success!
      resp = this.responseText;
    } else {
      // Error :(
    }
  }
}

request.send();
request = null;

加載 JSON

jQuery：

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

});

IE8+：

request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onreadystatechange = function() {
  if (this.readyState === 4){
    if (this.status >= 200 && this.status < 400){
      // Success!
      data = JSON.parse(this.responseText);
    } else {
      // Error :(
    }
  }
}

request.send();
request = null;

淡入效果

jQuery：

$(el).fadeIn();

IE8+：

function fadeIn(el) {
  var opacity = 0;

  el.style.opacity = 0;
  el.style.filter = '';

  var last = +new Date();
  var tick = function() {
    opacity += (new Date() - last) / 400;
    el.style.opacity = opacity;
    el.style.filter = 'alpha(opacity=' + (100 * opacity)|0 + ')';

    last = +new Date();

    if (opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
}

fadeIn(el);

顯示和隱藏

jQuery：

$(el).show();
$(el).hide();

IE8+：

el.style.display = '';
el.style.display = 'none';

添加 Class

jQuery：

$(el).addClass(className);

IE8+：

if (el.classList)
  el.classList.add(className);
else
  el.className += ' ' + className;

插入 HTML

jQuery：

$(el).before(htmlString);
$(parent).append(el);
$(el).after(htmlString);

IE8+：

el.insertAdjacentHTML('beforebegin', htmlString);
parent.appendChild(el);
el.insertAdjacentHTML('afterend', htmlString);

獲取子節(jié)點(diǎn)

jQuery：

$(el).children();

IE8+：

var children = [];
for (var i=el.children.length; i--;){
  // Skip comment nodes on IE8
  if (el.children[i].nodeType != 8)
    children.unshift(el.children[i]);
}

循環(huán)節(jié)點(diǎn)

jQuery：

$(selector).each(function(i, el){

});

IE8+：

function forEachElement(selector, fn) {
  var elements = document.querySelectorAll(selector);
  for (var i = 0; i < elements.length; i++)
    fn(elements[i], i);
}

forEachElement(selector, function(el, i){

});

清空節(jié)點(diǎn)

jQuery：

$(el).empty();

IE8+：

while(el.firstChild)
  el.removeChild(el.firstChild)

過(guò)濾節(jié)點(diǎn)

jQuery：

$(selector).filter(filterFn);

IE8+：

function filter(selector, filterFn) {
  var elements = document.querySelectorAll(selector);
  var out = [];
  for (var i = elements.length; i--;) {
    if (filterFn(elements[i]))
      out.unshift(elements[i]);
  }
  return out;
}

filter(selector, filterFn);

查找元素

jQuery：

$(el).find(selector);
$('.my #awesome selector');

IE8+：

el.querySelectorAll(selector);
document.querySelectorAll('.my #awesome selector');

獲取屬性、HTML或者文本

jQuery：

$(el).attr('tabindex');
$(el).html();
$('<div>').append($(el).clone()).html();
$(el).text();

IE8+：

el.getAttribute('tabindex');
el.innerHTML
el.outerHTML
el.textContent || el.innerText

判斷是否包含某個(gè) css class

jQuery：

$(el).hasClass(className);

IE8+：

if (el.classList)
  el.classList.contains(className);
else
  new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);

選擇器匹配

jQuery：

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

IE8+：

var matches = function(el, selector) {
  var _matches = (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector);

  if (_matches) {
    return _matches.call(el, selector);
  } else {
    var nodes = el.parentNode.querySelectorAll(selector);
    for (var i = nodes.length; i--;)
      if (nodes[i] === el) {
        return true;
    }
    return false;
}

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

前一個(gè)節(jié)點(diǎn)

jQuery：

$(el).prev();

IE8+：

// prevSibling can include text nodes
function previousElementSibling(el) {
  do { el = el.previousSibling; } while ( el && el.nodeType !== 1 );
  return el;
}

el.previousElementSibling || previousElementSibling(el);

后一個(gè)節(jié)點(diǎn)

jQuery：

$(el).next();

IE8+：

// nextSibling can include text nodes
function nextElementSibling(el) {
  do { el = el.nextSibling; } while ( el && el.nodeType !== 1 );
  return el;
}

el.nextElementSibling || nextElementSibling(el);

外部高度

jQuery：

$(el).outerHeight()

IE8+：

function outerHeight(el, includeMargin){
  var height = el.offsetHeight;

  if(includeMargin){
    var style = el.currentStyle || getComputedStyle(el);
    height += parseInt(style.marginTop) + parseInt(style.marginBottom);
  } 
  return height;
}

outerHeight(el, true);

外部寬度

jQuery：

$(el).outerWidth()

IE8+：

function outerWidth(el, includeMargin){
  var height = el.offsetWidth;

  if(includeMargin){
    var style = el.currentStyle || getComputedStyle(el);
    height += parseInt(style.marginLeft) + parseInt(style.marginRight);
  } 
  return height;
}

outerWidth(el, true);

判斷是否數(shù)組

jQuery：

$.isArray(arr);

IE8+：

isArray = Array.isArray || function(arr) {
  return Object.prototype.toString.call(arr) == '[object Array]';
}

isArray(arr);

數(shù)組轉(zhuǎn)換

jQuery：

$.map(array, function(value, index){

})

IE8+：

function map(arr, fn) {
  var results = []
  for (var i = 0; i < arr.length; i++)
    results.push(fn(arr[i], i))
  return results
}

map(array, function(value, index){

})

　　類似的還有很多很多，可以參考這里：http://youmightnotneedjquery.com/。

您可能感興趣的相關(guān)文章

本文鏈接：你可能不需要 jQuery！編寫(xiě)原生的JavaScript代碼

編譯來(lái)源：夢(mèng)想天空 ◆ 關(guān)注前端開(kāi)發(fā)技術(shù) ◆ 分享網(wǎng)頁(yè)設(shè)計(jì)資源

posted @ 2014-02-21 15:21 夢(mèng)想天空（山邊小溪）閱讀(19548) 評(píng)論(29) 收藏舉報(bào)

刷新頁(yè)面返回頂部

夢(mèng)想天空

關(guān)注前端開(kāi)發(fā)技術(shù) ◆ 推動(dòng) HTML5 & CSS3 技術(shù)發(fā)展 ◆ 本博客全新站點(diǎn)：yyyweb.com 歡迎圍觀：）

你可能不需要 jQuery！使用原生 JavaScript 進(jìn)行開(kāi)發(fā)

Ajax Post

Ajax Get

加載 JSON

淡入效果

顯示和隱藏

添加 Class

插入 HTML

獲取子節(jié)點(diǎn)

循環(huán)節(jié)點(diǎn)

清空節(jié)點(diǎn)

過(guò)濾節(jié)點(diǎn)

查找元素

獲取屬性、HTML或者文本

判斷是否包含某個(gè) css class

選擇器匹配

前一個(gè)節(jié)點(diǎn)

后一個(gè)節(jié)點(diǎn)

外部高度

外部寬度

判斷是否數(shù)組

數(shù)組轉(zhuǎn)換

推薦博文

公告

最受歡迎的文章