jQuery 都過時了，那我還學它幹嘛？

方應杭在飢人谷發表於2018-10-15
jQuery

今天飢人谷的新生問我：請問現在我還需要學習 jQuery 嗎？聽你在知乎說 jQuery 已經過時了，是不是就不用學了？

短答案：

jQuery 還是可以學一學的，學了之後對寫程式碼和封裝庫很有幫助。

現在的「新人」依然可以學習 jQuery 的思想，因為以「新人」的水平，直接理解 Vue / React 的思想難度較大，jQuery 是一個很不錯的中間過渡，因為 jQuery 也蘊含了非常多的程式設計套路。

但是如果你不想學，就不學吧。直接去學 Vue / React 會難一點，但也能學會。

長答案：

jQuery 當然過時了

距離我上次在專案中使用 jQuery，可能已經快兩年時間了（除去上課時演示功能時用 jQuery）。回想我學習 jQuery 的過程，還挺神奇的。

當年我在大學的技術小組裡做 C# 網站開發，需要用到 jQuery 特效，組裡的一名小夥伴會用一點 jQuery，很快就用 .animate 做出了讓我嘖嘖稱奇的特效。我覺得 jQuery 好神奇啊，雖然我當時連 JS 都不會。

於是我立馬買了一本《鋒利的 jQuery》，硬看。

什麼叫「硬看」呢？因為我不會 JS，而且我並沒有照著書上敲程式碼，僅僅使用眼睛「看 jQuery 程式碼」。神奇的是——我居然很快看懂了幾乎整本書。以至於那位會用 jQuery 的小夥伴遇到 bug 問我時我能直接給出解答，看起來他並沒有看《鋒利的 jQuery》這本書（笑）。

到了 2018 年，幾乎已經沒有新專案會使用 jQuery 來開發了；即使有，也是一件不值得拿出來炫耀的事情。那為什麼我還是建議學習 jQuery 呢？

原因如下。

jQuery 教你如何設計 API

上文說到我一個不會 JS 的人居然能看懂 jQuery 的書，其實這不是因為我厲害，而是因為 jQuery 的 API 設計得太人性化了！

舉幾個例子給大家看看：

第一個是 jQuery 對事件監聽的簡化

// 那時，如果不用 jQuery，監聽事件（相容 IE 6）你要這麼寫
if (button.addEventListener)  
  button.addEventListener('click',fn);
else if (button.attachEvent) { 
  button.attachEvent('onclick', fn);
}else {
  button.onclick = fn;
}

// 但是如果你用 jQuery，你只需要這麼寫
$(button).on('click', fn)
複製程式碼

第二個是 jQuery 對元素選擇的簡化

// 如果你想獲取 .nav > .navItem 對應的所有元素，用 jQuery 是這樣寫的
$('.nav > .navItem')

// 在 IE 6 上，你得這麼寫
var navItems = document.getElementsByClassName('navItem')
var result = []
for(var i = 0; i < navItems.length; i++){
  if(navItems[i].parentNode.className.match(/\bnav\b/){
    result.push(navItems[i])
  }
}
複製程式碼

有沒有發現 jQuery 的程式碼一讀就讀懂了？可讀性非常強！

當時我作為一個新人，每每看到 jQuery 那優雅的 API，都禁不住去思考 jQuery 到底是怎麼實現的，我自己能不能實現出來（但我並不推薦看 jQuery 原始碼）。本著這樣的想法，我學會了很多程式設計技巧。

為什麼有些人程式碼水平老是提不高了，就是因為不會造輪子，不會設計優雅的 API，更不會實現優雅的 API，只會呼叫其他庫或框架提供的功能（中槍的舉手）。

而 jQuery 則提供了一個簡單而又經典的範例供大家學習。

不信的話我們就來看看 jQuery 用到了哪些所謂的設計模式（其實就是程式設計套路）吧。

一、釋出訂閱模式

var eventHub = $({})
eventHub.on('xxx', function(){ console.log('收到') })
eventHub.trigger('xxx')
複製程式碼

二、用原型繼承實現外掛系統

$.fn.modal = function(){ ... }
$('#div1').modal()
Vue 2 的外掛也是類似的思路哦
複製程式碼

三、事件委託

$('div').on('click', 'span', function(){...})
複製程式碼

說實話，你在 2018 年找前端讓他寫一個事件委託，我保證 90% 寫出來的程式碼都是有「明顯」bug 的。

四、鏈式呼叫

$('div').text('hi').addClass('red').animate({left: 100})
複製程式碼

五、函式過載（偽）

$(fn)
$('div')
$(div)
$($(div))
$('span', '#scope1')
複製程式碼

你會發現 $ 這個函式的引數可以是函式、字串、元素和 jQuery 物件，甚至還能接受多個引數，這種過載是怎麼做到的？

六、名稱空間

// 你的外掛在一個 button 上繫結了很多事件
$button.on('click.plugin', function(){...})
$button.on('mouseenter.plugin', function(){...})
// 然後你想在某個時刻移除以上所有事件
$button.off('.plugin')
複製程式碼

如果你不用 jQuery 就很麻煩了。

七、高階函式

var fn2 = $.proxy(fn1, asThis, param1)
複製程式碼

$.proxy 接受一個函式，返回一個新的函式。

其他就不一一列舉了。

jQuery 的 API 風格依然在流行

我們把 jQuery 和 Axios 做一下對比：

$.ajax({url:'/api', method:'get'})
$.get('/api').then(fn1,fn2)

axios({ url: '/api', method: 'get'})
axios.get('/api').then(fn1, fn2)
複製程式碼

為什麼 2018 年流行的 axios 跟 jQuery.ajax 這麼相像呢？

因為 jQuery 的 API 實在太好用了！搞得新庫根本沒法超越它，沒有辦法設計出更簡潔的 API 了。畢竟 jQuery 也是在前端界流行近十年。

所以你學了 jQuery 很容易過渡其他類似的新庫。

jQuery 也能做 MVC

很多人以為前端框架是從 Vue、React 和 Angular 才開始的，其實 jQuery 時代早就有基於 jQuery 的 MV* 庫了，比如著名的 Backbone.js 和 Marionette.js。

看看下面的 Backbone 應用程式碼

var TodoView = Backbone.View.extend({
	tagName:  'div',
	template: _.template($('#item-template').html()),
	events: {
		'click .toggle': 'xxx',
	},
	initialize: function () {
		this.listenTo(this.model, 'change', this.render);
	},
	render: function () {
		if (this.model.changed.id !== undefined) {return; }
		this.$el.html(this.template(this.model.toJSON()));
		return this;
	}
});
複製程式碼

AngularJS、Vue 1.x、Vue 2.x 其實都是順著 Backbone MVC 的思路慢慢優化、改造得來的，如果你提前瞭解 Backbone 作為知識鋪墊，那麼理解 Vue 是非常容易的。如果面試官問你 MVC 和 MVVM 的區別，你也是很容易就可以答出來的。

最後就引用我之前的一個回答作為結尾來說明學習 jQuery 意義：

完全理解jQuery原始碼，在前端行業算什麼水平？

說明你

1 精通正規表示式
2 瞭解閉包
3 瞭解原型鏈
4 精通 DOM API
5 瞭解各種設計模式（事件、Promise、偽過載、裝飾器模式等）
6 精通 DOM 事件
7 瞭解舊瀏覽器的各種特性（bug）
8 瞭解模組化
9 瞭解瀏覽器渲染原理
10 精通 AJAX
11 瞭解 HTTP 請求

可以秒殺中國 80% 的前端。
複製程式碼

相關文章