我們還需要學(xué)jQuery嗎?「目前來看有必要學(xué)」

2022-12-13    分類: 網(wǎng)站建設(shè)

光陰似箭,歲月如梭...時間回到了2005年8月! 一個帥氣的小伙子John Resig(不用說了,比煙哥帥多了,這是我男神),如下圖所示

他在自己博客上發(fā)了一個文章,對Prototype的“Behavior”部分的一些語法改進意見。然后呢沒過多久,他就開發(fā)出了jQuery,并迅速的風(fēng)靡全球!

ps:Prototype也是一個JavaScript基礎(chǔ)類庫。

OK,好,我們先來看看jQuery當(dāng)時能迅速的風(fēng)靡全球的原因有哪些! 我想了想,無外乎下面三條

(1)出色的DOM操作封裝

例如原來你要修改樣式,原生JavaScript是這么寫的

vardom=document.getElementById('test'); dom.style.color='blue';

用上jQuery后,一行搞定

$('#test').css('color','blue');

(2)便捷的Ajax操作

原生的JavaScript在ajax請求上的代碼,嗯,我就不貼代碼了!具體多復(fù)雜,懂前端的人都明白。 用上了jQuery后,簡潔了不少!如下所示

$.ajax({url:"/guduyan", success:function(result){ //dosomething }});

(3)出色的動畫效果

例如,我們需要把 一個<div>元素移動到左邊,直到left屬性等于250像素為止。 使用jQuery,我們可以這么寫

$("div").animate({left:'250px'});

總而言之,jQuery作為一個JavaScript庫。這個庫里有很多函數(shù),可以簡化你的DOM 操作,提供一些功能...等等!它的目的就是讓一些你不會寫,不想寫,沒時間寫的代碼,那么庫幫你準(zhǔn)備好一些函數(shù)接口,讓你調(diào)用直接完成功能。

MVVM的框架

而Vue、React之類,它們是JavaScript框架,引入了組件化、模塊化的概念,采用虛擬DOM取代原來的DOM操作!在Vue這類MVVM框架中,數(shù)據(jù)和視圖完全分離開來了。對數(shù)據(jù)進行操作不再需要引用相應(yīng)的DOM對象,達到了解耦的目的!

針對原來的jQuery的幾個優(yōu)點

(1)針對jQuery里便捷的Dom操作

在Vue和React這類MVVM框架中,采用一種綁定元素渲染的概念,基本不用怎么操作Dom,某些特殊操作除外。

ps:Dom操作不可能完全消失,否則Vue沒必要再提供$refs屬性。某些文章中說可以完全替代,我不敢茍同。

(2)針對jQuery里出色的動畫效果

這個有CSS 3可以取代。另外,還有專門的動畫庫Velocity.js可以負責(zé)這些動畫效果!

(3)針對jQuery便捷的Ajax操作

這個被Axios等庫完全替代,而且API都差不多,功能也一樣。

除了上面幾點以外。像Vue這類的MVVM框架為了性能,不讓開發(fā)者直接操作DOM樹,引入虛擬DOM的概念。 可能有的讀者不太理解這個虛擬DOM,滿扯一下這個虛擬DOM。 傳統(tǒng)DOM操作有一個問題,假設(shè)你一個js方法里涉及到對十個節(jié)點的更新操作,如下所示

node1.style.marginTop=50+'px'; node2.style.width=50+'px'; node3.style.height=50+'px'; .......10次

那么,每次DOM改變的時候,都需要在瀏覽器中進行渲染。每一次DOM改變的時候,瀏覽器都需要重新計算CSS,進行布局處理,然后重新渲染頁面。這都需要時間。

虛擬DOM就是為了解決這個瀏覽器性能問題而被設(shè)計出來的。例如前面的例子,假如一次操作中有10次更新DOM的動作,虛擬DOM不會立即操作DOM,而是將這10次更新的內(nèi)容保存到本地的一個js對象中,最終將這個js對象一次性attach到DOM樹上,通知瀏覽器去執(zhí)行繪制工作,這樣可以避免大量的重復(fù)工作。畢竟js對象是內(nèi)存對象,直接操作js對象,比操作真實DOM,快很多。

可能還是比較抽象,我拿vue來說明。 如下圖所示(圖片出自浪里行舟)

如上圖所示,在Vue的底層實現(xiàn)上,Vue將模板編譯成虛擬DOM渲染函數(shù)。結(jié)合Vue自帶的響應(yīng)系統(tǒng),在狀態(tài)改變時,Vue能夠智能地計算出重新渲染組件的最小代價并應(yīng)到DOM操作上。 那么,實例圖如下

OK,上面兩張圖看完,應(yīng)該能明白Vue這類MVVM框架使用虛擬DOM的好處了。我就不繼續(xù)拓展了。因為 再細節(jié)下去,我還可以扯一些怎么寫這種虛擬DOM,如何映射到真實的DOM??紤]到寫了也沒人看,我還是不寫了。

那個那個那個,插播一下?。。。?講到這里,思考一下

面試官:"可以說說你們項目為什么用Vue這種MVVM框架么?"

現(xiàn)在,會答了么?

接下來我們來談一談,既然MVVM框架這么好,那為什么還要學(xué)jQuery呢?

學(xué)jQuery的必要性

(1)目前大量網(wǎng)站在用jQuery

雖然目前大量文章鼓吹什么jQuery不行啦,要退出潮流啦! 然而,各位隨便去個網(wǎng)站,按f12輸入一個$,大部分還是會返回一個 "function(a,b){return new r.fn.init(a,b,h)}" 煙哥在寫這段話的時候,特意跑去京東試了一下,返回值如下

至于其他的博客園啊,巴拉巴拉的,自己去試試,看看返回值是啥! 這種時候你應(yīng)該要問

我勒個去,說好的要退出歷史舞臺呢?怎么這么多網(wǎng)站還在用jQuery!

很簡單,因為jQuery已經(jīng)占領(lǐng)了市場。一個產(chǎn)品如果已經(jīng)趨于穩(wěn)定,再讓他換另一套架構(gòu)又是一筆成本。 正是因為目前市面上還是大量網(wǎng)站再用jQuery,所以學(xué)好jQuery還是很有必要的!

(2)jQuery能支持IE8以下版本

由于Vue之類的框架,只能支持IE8以上的版本。所以老實說,我也不懂現(xiàn)在鼓吹什么,市面上都是什么IE8瀏覽器啊。 實際情況是,現(xiàn)在很多那種事業(yè)單位里頭的古董電腦,很多都還是IE7,像這種情況下,用vue之類的MVVM框架顯然不適合。

ps:你給政府坐項目用Vue試試看,被找茬!掙錢才是重點!技術(shù)是為金錢服務(wù)的!

(3)jQuery適合快速入門

曾記得我有一個同事,會點jQuery,就在那吹噓自己全棧。對于這類人,我們應(yīng)該是:"啊,你真棒,可以教教我們嘛!"沒錯,就是要讓他膨脹,然后讓他無心學(xué)習(xí)!

當(dāng)然,這反應(yīng)出一點,其實jQuery很好上手。當(dāng)然,如果職業(yè)是前端,那當(dāng)然要懂mvvm,但更多公司甚至不請前端,后端處理,那后端處理其實都是jQuery。

總結(jié)

任何鼓吹jQuery要退出舞臺的文章,都不能信,是忽悠大家。jQuery目前還是很有必要學(xué)習(xí)的。

網(wǎng)站題目:我們還需要學(xué)jQuery嗎?「目前來看有必要學(xué)」
網(wǎng)站鏈接:http://www.muchs.cn/news12/222312.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供云服務(wù)器、建站公司服務(wù)器托管、App開發(fā)、全網(wǎng)營銷推廣網(wǎng)站營銷

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

小程序開發(fā)