相信大家都聽過或使用過 jQuery,jQuery是最受歡迎的JavaScript函式庫之一,因為他提供了一系列簡單方便,而且兼容的操作,省去開發人員的部份煩惱。但在前端框架盛行還需要這個 JavaScript 函式庫嗎?本篇帶你看jQuery前世今生,了解jQuery到底是什麼、前端框架是什麼,以及他在網頁技術演進的地位、影響與未來。
延伸閱讀:前端都在用 JavaScript「框架」?前端框架的功能與優點
jQuery的前世今生
如果你想透過本篇文章,直截了當的知道該不該使用jQuery,可能要讓你失望了。在某些情況下使用jQuery仍是最好的選擇。即使是現在的流行的三大前端框架,也是依照情況與需求使用。
瀏覽器發展歷史上出現過幾次大混戰。儘管後來有了W3C(全球資訊網協會/World Wide Web Consortium)進行標準的制定,各個瀏覽器廠商仍開發各自瀏覽器的「特異功能」吸引使用者與開發者。這些特異功能促使了瀏覽器標準的進步,也造成了開發上的困難。
為解決網路應用中不同平台、技術和開發者帶來的不相容問題,保障網路資訊的順利和完整流通,全球資訊網協會制定了一系列標準,並督促網路應用開發者和內容提供者遵循這些標準。[1]
2006年1月,jQuery推出了第一個版本,隨後變成為了最受歡迎的JavaScript函式庫之一[2]。附帶一提,我們現在熟悉的HTML5標準是在2014年正式定稿推出[3],即使是現在,每年瀏覽器的標準也是快速地在變動。在後文我會在說明為何開頭我想提到這兩件事情。
什麼是jQuery? 從常見功能來看
jQuery之所以受歡迎,是因為他提供了一系列簡單方便,而且兼容的操作,省去開發人員的部份煩惱。這裡舉幾個簡單的例子:
選取器
現代瀏覽器標準分成三個部份:
- HTML
- CSS
- ECMAScript / JavaScript
其中第三個就是常聽到的JS/Javascript。目前更正式的名稱是ECMAScript,也是今天主要jQuery主要的基礎。不同於瀏覽器腳本(Script)的標準,CSS2在以前就提供豐富易用的選擇器,讓設計人員撰寫樣式表(stylesheet)
但是起初瀏覽器腳本,僅有提供以下三個可以存取網頁內容節點的API:
- document.getElementById()
- document.getElementsByTagName()
- document.getElementsByClassName()
要取得h1標籤、#my-id元素節點或是.my-class類別節點們並不困難。不過ul li和#my-id li就麻煩了…會需要這樣做:
可以看出以前使用原生API…是多麻煩…但是透過jQuery可以這樣做:
Ajax
Ajax全名Asynchronous JavaScript and XML。從全名可以知道他與JavaScript和XML脫不了關係,是一種非同步通訊技術。這樣的技術讓使用瀏覽器瀏覽網頁時,可以局部的更新內容,而無須重新取得所有頁面訊息,做到更好的瀏覽體驗。
最開始需要XMLHttpRequest去取得需要更新的內容,在透過js更新。從MDN可以看到一個已經算是簡單的例子:
Great…有這樣技術很棒,但寫起來對開發人員真痛…一樣看看jQuery給的範例:
瀏覽器裡Ajax允許三種方法 – HEAD、GET和POST。明確使用可以在加以簡化,以GET為例:
事件綁定
接著說說事件綁定。
正常要綁定事件有三種方式:
- inline event:
<h1 onclick=”console.log(‘click’)” id=”my-id”>Hello</h1>
- addEventListener
- JS設定 inline event
要注意這種方式會覆寫掉直接寫在HTML裡的inline event。
要設定click事件處理,可以透過jQuery這樣寫:
事件觸發
另外要觸發一些已定義事件,使用jQuery也很簡單。先來看看不使用應該怎麼做:
jQuery只需要一行:
$(“#my-id”).click()
屬性操作
jQuery還提供一些常使用的屬性操作的簡化方法。這裡舉className和data-開頭的屬性來舉例:
className屬性操作
變更元素類別(添加或刪除),在Bootstrap算是常見的使用方式。一樣先來看看不使用jQuery要怎麼做:
jQuery一樣只需要一行:
$(“#my-id”).addClass(“red”)
尤其對於複數元素的時候使用,更看的出其方便性。
不巧的是getElementsByTagName等的回傳值,HTMLCollection並沒有forEach操作。要處理稍微有些麻煩:
但是jQuery處理好了:
$(“li”).addClass(“red”)
取得data-屬性
data-開頭的自訂屬性算是標準的一部分,在有些情況經常使用。
<div id=”my-id2″ data-target=”#target”></div>
直接比較看看使用jQuery和不使用的樣子。
不使用jQuery
console.log(document.getElementById(“my-id2”).getAttribute(“data-target”)); // => “#target”
使用jQuery
console.log($(“#my-id2”).data(“target”)); // => “#target”
我想,你應該也會比較喜歡使用jQuery的方式吧?
文件載入事件處理綁定
最後,提一個雖然不太常見的需求,但是有必要知道的事情。
網頁瀏覽器處裡網頁的流程會經過:取得原始碼、解析、掛載軟染頁面過執行JS。這過程中也可能在去載入其他資源,如link的CSS檔案、圖檔、音樂等。要注意的是,JS的執行可能在DOM建立好之前,這時期會無法透過getElementXXX等操作取得DOM上的元素節點,因此可能會需要註冊事件在載入文件之後,才執行JS:
同樣的,比起上面不使用jQuery的方式,下面的看起來更簡潔。
小結
簡而言之,jQuery 是一個簡化瀏覽器API的JS函式庫 ,提供了一系列簡單方便的操作,看完上面例子相信你也會認同。不過jQuery畢竟是一個從2006年就開始的專案,這期間網頁技術變化可不小,除了HTML5的正式推出,JavaScript也經歷重大改版ECMAScript 2015(ES6),此外瀏覽器也在更新,更有新的網頁設計思想提出。所以接著來看看jQuery的挑戰者。
jQuery與三大前端框架
實際上拿前端框架與jQuery比較並沒有什麼意義,因為兩個設計出發點不同。來看看React官網的說明:
“React 和 Web Component 是為了解決不同的問題所建立的。Web Component 為了可重複使用的 component 提供了強大的封裝,而 React 提供了一個宣告式函式庫,使 DOM 與你的資料保持同步。這兩個目標是相輔相成的。作為開發人員,你可以自由地在 Web Component 中使用 React,或在 React 中使用 Web Component,或兩者都是。” [4]
對,雖然我找的是在說Web Component,但可以看到「 React 提供了一個宣告式函式庫,使 DOM 與你的資料保持同步。 」。React以一種維持狀態(state)的方式,保持資料的同步。實際上前端三大框架Angular、React和Vue的設計理念在這塊都有些像。
這種設計方式,讓原本直接操作元素的JS方式退居幕後。在框架把控的範圍,依照框架設計,由框架自動處理。以Vue來說,不在直接決定是否真加類別(className),而透過綁定變數進行單向或雙向溝通。
透過app.isRed=false,修改isRed變數,會自動將className中的red移除,而無須操作DOM。(實際上更像是部份重新渲染)
既然jQuery和前端框架在根本的設計上有所不同,兩者要相比有些困難。不過jQuery還有一個我認為的真正挑戰者 – 新的瀏覽器原生API。
學會Vue.js 與Web Component,為轉職前端工程師做好準備
jQuery與瀏覽器原生API – jQuery的真正挑戰者
相比起前端框架,我認為jQuery真的的挑戰者,是日新月異的瀏覽器API標準。從這些新的API也可以看出jQuery的影響力,未來可能會有更多瀏覽器API可以使用,那麼上面提到的痛點可能就會消失。舉幾個已經有的例子:
querySelector && querySelectorAll
querySelector和querySelectorAll同樣可以透過CSS選擇器方式取得元素:
值得一提的是document.querySelectorAll取回的元素是一個Array,他可以使用Array.prototype.forEach去遍歷元素,上面要添加class的例子,在配合等等會說到的classList變得更為簡單。
className && classList
原本操作className有夠麻煩
但後來有了classList。
document.querySelector(“#my-id”).classList.add(“red”)
此外,classList還有以下這些方法:
- add()
- remove()
- toggle()
- replace()
- contains()
Ajax && fetch
上面看過jQuery.ajax的例子:
這下使用fetch似乎也差不多了。
jQuery的地位與影響
就像瀏覽器大戰促進了瀏覽器的發展,jQuery的熱門程度,也很大程度影響新的瀏覽器API,他在瀏覽器發展歷史上已經留下一個不可忽略的軌跡。時至今日,隨著使用人數的增多與技術的發展,原生標準的瀏覽器API追趕著jQuery。如果你已經擁抱了新的技術,jQuery這份滿漢全席似乎就變得多餘,你可以去尋找其他小的函式庫,吃自助餐。但如果你需要兼容舊的瀏覽器,那jQuery仍然有可能是你的選擇之一。
回到標題 我們還需要JavaScript函式庫 嗎?
我的回答會是:是的,只是jQuery的價值不再那麼高。
前端三大框架亦是 JavaScript函式庫 ,使用了與過往截然不同的設計方式。但儘管如此,框架仍有不足之處,適時地引入plugin或是與框架無關的函式庫,無疑會對開發上有所幫助。
JavaScript 全端開發課程,16 週進度班帶你半年轉職工程師
jQuery的未來
世紀大分手 – Bootstrap 5 不再使用jQuery
另一個流行的套件 – Bootstrap,是一個能夠快速建立頁面布局的系統。他與jQuery一樣影響著瀏覽器的發展(影響了一些CSS3)。在Bootstrap 4以前,都必須先引入jQuery才可以使用。但近日Bootstrap 5將表示會移除這個依賴。
jQuery 4.0
那麼jQuery會就此沒落嗎?在我撰寫本文當下,jQuery的軟體倉庫仍在1個月前有所更新,並有新版本jQuery 4的進度。jQuery 4.0仍在開發。
技術隨需求發展。新的階段會有新的需求,jQuery 3已經證明了他的價值,jQuery 4會不會再改變一次瀏覽器世界?就算不是jQuery,現在或許也有個小專案正在萌芽,會像jQuery一樣影響著未來瀏覽器的發展。
(本文作者是Web Developer lagagain)
參考資料:
—-