曾經(jīng),在那個(gè) IE6 還是主流瀏覽器的時(shí)代,為了實(shí)現(xiàn)稍微復(fù)雜一點(diǎn)的功能,也需要很多代碼。如果要做到兼容主流瀏覽器,更需大費(fèi)周章。當(dāng) jQuery 出現(xiàn)后,使用 jQuery 實(shí)現(xiàn)同樣的功能,我們只需寫(xiě)很少的代碼,并且兼容主流瀏覽器。于是,大部分網(wǎng)站都會(huì)使用 jQuery。

時(shí)過(guò)境遷,我們到底需不需要 jQuery 呢?

認(rèn)為不需要 jQuery 的理由如下:

  • IE7 及更低版本的瀏覽器的市場(chǎng)份額已經(jīng)低到忽略的地步。而用 IE8 及更高版本的瀏覽器的原生 API 來(lái)實(shí)現(xiàn) jQuery 提供的功能并不是很麻煩。比如:
/* 選取元素 */
// IE8+
document.querySelectorAll(選擇器);

// jQuery
$(選擇器);

/* Ajax */
// IE8+
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

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

request.send();
request = null;

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

  },
  error: function() {

  }
});

/* 綁定事件 */
// IE8+
function addEventListener(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler);
  } else {
    el.attachEvent('on' + eventName, function(){
      handler.call(el);
    });
  }
}

addEventListener(el, eventName, handler);

// jQuery
$(el).on(eventName, eventHandler);
  • 用 jQuery 做頁(yè)面的交互的做法是,當(dāng)數(shù)據(jù)改變時(shí),選擇數(shù)據(jù)對(duì)應(yīng)的 DOM,然后修改 DOM。如果 HTML 發(fā)生改變,如某元素的 id 改了, 而 jQuery 是通過(guò) id 來(lái)找那元素的,那 jQuery 的代碼也需要修改。而且,如果頁(yè)面的數(shù)據(jù)與 DOM 的交互很復(fù)雜,用 jQuery 還滿麻煩的。在這些情況下,用 MVVM 的框架是個(gè)不錯(cuò)的選擇: MVVM 做頁(yè)面的交互的做法是,在 HTML 中,設(shè)置好了 DOM 與數(shù)據(jù)的關(guān)系。當(dāng)數(shù)據(jù)改變時(shí),框架會(huì)更新 DOM。

認(rèn)為需要 jQuery 的理由如下

  • jQuery 的有豐富的插件庫(kù)。
  • 不少現(xiàn)代的框架依賴(lài) jQuery,如 Bootstrap 的 JS 插件,Ember,Meteor JS。如果要用那些框架,就不得不用 jQuery。
  • 用 jQuery 比用原生的 API 好學(xué),好用,強(qiáng)大,簡(jiǎn)潔, 還不需要考慮瀏覽器兼容性問(wèn)題。
  • jQuery 的開(kāi)發(fā)仍在繼續(xù)中。并且與時(shí)俱進(jìn)的增加了一些新特性。比如,jQuery 3 增加允許用for... of來(lái)遍歷 jQuery 集合的 DOM 元素。如
var $inputs = $('input');
var i = 0;

for(var input of $inputs) {
   input.id = 'input-' + i++;
}

那么,我們到底需不需要 jQuery 呢? 其實(shí)還是要根據(jù)具體項(xiàng)目來(lái)定。對(duì)我來(lái)說(shuō),對(duì)于一般的項(xiàng)目,我都會(huì)用 jQuery,畢竟 jQuery 大小不大,比如,jquery-3.0.0-beta1.min.js在沒(méi) gzip 壓縮前也就 86 KB。

參考鏈接

  哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站,并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底,使您的網(wǎng)站無(wú)需額外費(fèi)用,即可穩(wěn)步提升排名至首頁(yè)。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)