建站
咨詢
售后
建站咨詢
新聞中心
請(qǐng)問(wèn)現(xiàn)在我還需要學(xué)習(xí) jQuery 嗎?聽(tīng)你在知乎說(shuō) jQuery 已經(jīng)過(guò)時(shí)了，是不是就不用學(xué)了?
成都創(chuàng)新互聯(lián)專注于青縣網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供青縣營(yíng)銷型網(wǎng)站建設(shè)，青縣網(wǎng)站制作、青縣網(wǎng)頁(yè)設(shè)計(jì)、青縣網(wǎng)站官網(wǎng)定制、重慶小程序開(kāi)發(fā)服務(wù)，打造青縣網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供青縣網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。
短答案：
jQuery 還是可以學(xué)一學(xué)的，學(xué)了之后對(duì)寫(xiě)代碼和封裝庫(kù)很有幫助。
現(xiàn)在的「新人」依然可以學(xué)習(xí) jQuery 的思想，因?yàn)橐浴感氯恕沟乃剑苯永斫?Vue / React 的思想難度較大，jQuery 是一個(gè)很不錯(cuò)的中間過(guò)渡，因?yàn)?jQuery 也蘊(yùn)含了非常多的編程套路。
但是如果你不想學(xué)，就不學(xué)吧。直接去學(xué) Vue / React 會(huì)難一點(diǎn)，但也能學(xué)會(huì)。
長(zhǎng)答案：
jQuery 當(dāng)然過(guò)時(shí)了
當(dāng)年我在大學(xué)的技術(shù)小組里做 C# 網(wǎng)站開(kāi)發(fā)，需要用到 jQuery 特效，組里的一名小伙伴會(huì)用一點(diǎn) jQuery，很快就用 .animate 做出了讓我嘖嘖稱奇的特效。我覺(jué)得 jQuery 好神奇啊，雖然我當(dāng)時(shí)連 JS 都不會(huì)。
于是我立馬買了一本《鋒利的 jQuery》，硬看。
什么叫「硬看」呢?因?yàn)槲也粫?huì) JS，而且我并沒(méi)有照著書(shū)上敲代碼，僅僅使用眼睛「看 jQuery 代碼」。神奇的是——我居然很快看懂了幾乎整本書(shū)。以至于那位會(huì)用 jQuery 的小伙伴遇到 bug 問(wèn)我時(shí)我能直接給出解答，看起來(lái)他并沒(méi)有看《鋒利的 jQuery》這本書(shū)(笑)。
到了 2018 年，幾乎已經(jīng)沒(méi)有新項(xiàng)目會(huì)使用 jQuery 來(lái)開(kāi)發(fā)了；即使有，也是一件不值得拿出來(lái)炫耀的事情。那為什么我還是建議學(xué)習(xí) jQuery 呢?
原因如下。
jQuery 教你如何設(shè)計(jì) API
上文說(shuō)到我一個(gè)不會(huì) JS 的人居然能看懂 jQuery 的書(shū)，其實(shí)這不是因?yàn)槲覅柡Γ且驗(yàn)?jQuery 的 API 設(shè)計(jì)得太人性化了!
舉幾個(gè)例子給大家看看：
***個(gè)是 jQuery 對(duì)事件監(jiān)聽(tīng)的簡(jiǎn)化
- // 那時(shí)，如果不用 jQuery，監(jiān)聽(tīng)事件（兼容 IE 6）你要這么寫(xiě)
- if (button.addEventListener)
- button.addEventListener('click',fn);
- else if (button.attachEvent) {
- button.attachEvent('onclick', fn);
- }else {
- button.onclick = fn;
- }
- // 但是如果你用 jQuery，你只需要這么寫(xiě)
- $(button).on('click', fn)
第二個(gè)是 jQuery 對(duì)元素選擇的簡(jiǎn)化
- // 如果你想獲取 .nav > .navItem 對(duì)應(yīng)的所有元素，用 jQuery 是這樣寫(xiě)的
- $('.nav > .navItem')
- // 在 IE 6 上，你得這么寫(xiě)
- var navItems = document.getElementsByClassName('navItem')
- var result = []
- for(var i = 0; i < navItems.length; i++){
- if(navItems[i].parentNode.className.match(/nav/){
- result.push(navItems[i])
- }
- }
有沒(méi)有發(fā)現(xiàn) jQuery 的代碼一讀就讀懂了?可讀性非常強(qiáng)!
當(dāng)時(shí)我作為一個(gè)新人，每每看到 jQuery 那優(yōu)雅的 API，都禁不住去思考 jQuery 到底是怎么實(shí)現(xiàn)的，我自己能不能實(shí)現(xiàn)出來(lái)(但我并不推薦看 jQuery 源碼)。本著這樣的想法，我學(xué)會(huì)了很多編程技巧。
為什么有些人代碼水平老是提不高了，就是因?yàn)椴粫?huì)造輪子，不會(huì)設(shè)計(jì)優(yōu)雅的 API，更不會(huì)實(shí)現(xiàn)優(yōu)雅的 API，只會(huì)調(diào)用其他庫(kù)或框架提供的功能(中槍的舉手)。
而 jQuery 則提供了一個(gè)簡(jiǎn)單而又經(jīng)典的范例供大家學(xué)習(xí)。
不信的話我們就來(lái)看看 jQuery 用到了哪些所謂的設(shè)計(jì)模式(其實(shí)就是編程套路)吧。
一、發(fā)布訂閱模式
- var eventHub = $({})
- eventHub.on('xxx', function(){ console.log('收到') })
- eventHub.trigger('xxx')
二、用原型繼承實(shí)現(xiàn)插件系統(tǒng)
- $.fn.modal = function(){ ... }
- $('#div1').modal()
Vue 2 的插件也是類似的思路哦
三、事件委托
- $('div').on('click', 'span', function(){...})
說(shuō)實(shí)話，你在 2018 年找前端讓他寫(xiě)一個(gè)事件委托，我保證 90% 寫(xiě)出來(lái)的代碼都是有「明顯」bug 的。
四、鏈?zhǔn)秸{(diào)用
- $('div').text('hi').addClass('red').animate({left: 100})
五、函數(shù)重載(偽)
- $(fn)
- $('div')
- $(div)
- $($(div))
- $('span', '#scope1')
你會(huì)發(fā)現(xiàn) $ 這個(gè)函數(shù)的參數(shù)可以是函數(shù)、字符串、元素和 jQuery 對(duì)象，甚至還能接受多個(gè)參數(shù)，這種重載是怎么做到的?
六、命名空間
- // 你的插件在一個(gè) button 上綁定了很多事件
- $button.on('click.plugin', function(){...})
- $button.on('mouseenter.plugin', function(){...})
- // 然后你想在某個(gè)時(shí)刻移除以上所有事件
- $button.off('.plugin')
如果你不用 jQuery 就很麻煩了。
七、高階函數(shù)
- var fn2 = $.proxy(fn1, asThis, param1)
$.proxy 接受一個(gè)函數(shù)，返回一個(gè)新的函數(shù)。
其他就不一一列舉了。
jQuery 的 API 風(fēng)格依然在流行
我們把 jQuery 和 Axios 做一下對(duì)比：
- $.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 這么相像呢?
因?yàn)?jQuery 的 API 實(shí)在太好用了!搞得新庫(kù)根本沒(méi)法超越它，沒(méi)有辦法設(shè)計(jì)出更簡(jiǎn)潔的 API 了。畢竟 jQuery 也是在前端界流行近十年。
所以你學(xué)了 jQuery 很容易過(guò)渡其他類似的新庫(kù)。
jQuery 也能做 MVC
很多人以為前端框架是從 Vue、React 和 Angular 才開(kāi)始的，其實(shí) jQuery 時(shí)代早就有基于 jQuery 的 MV* 庫(kù)了，比如著名的 Backbone.js 和 Marionette.js。
看看下面的 Backbone 應(yīng)用代碼
- 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 其實(shí)都是順著 Backbone MVC 的思路慢慢優(yōu)化、改造得來(lái)的，如果你提前了解 Backbone 作為知識(shí)鋪墊，那么理解 Vue 是非常容易的。如果面試官問(wèn)你 MVC 和 MVVM 的區(qū)別，你也是很容易就可以答出來(lái)的。
網(wǎng)站標(biāo)題：jQuery都過(guò)時(shí)了，那還學(xué)它干嘛
分享地址：http://www.5511xx.com/article/dpjdpdp.html
