Loading...

相信大家都聽過或使用過 jQuery,jQuery是最受歡迎的JavaScript函式庫之一,因為他提供了一系列簡單方便,而且兼容的操作,省去開發人員的部份煩惱。但在前端框架盛行還需要這個 JavaScript 函式庫嗎?本篇帶你看jQuery前世今生,了解jQuery到底是什麼、前端框架是什麼,以及他在網頁技術演進的地位、影響與未來。

延伸閱讀:前端都在用 JavaScript「框架」?前端框架的功能與優點

jQuery的前世今生

如果你想透過本篇文章,直截了當的知道該不該使用jQuery,可能要讓你失望了。在某些情況下使用jQuery仍是最好的選擇。即使是現在的流行的三大前端框架,也是依照情況與需求使用。

瀏覽器發展歷史上出現過幾次大混戰。儘管後來有了W3C(全球資訊網協會/World Wide Web Consortium)進行標準的制定,各個瀏覽器廠商仍開發各自瀏覽器的「特異功能」吸引使用者與開發者。這些特異功能促使了瀏覽器標準的進步,也造成了開發上的困難。

為解決網路應用中不同平台、技術和開發者帶來的不相容問題,保障網路資訊的順利和完整流通,全球資訊網協會制定了一系列標準,並督促網路應用開發者和內容提供者遵循這些標準。[1]

2006年1月,jQuery推出了第一個版本,隨後變成為了最受歡迎的JavaScript函式庫之一[2]。附帶一提,我們現在熟悉的HTML5標準是在2014年正式定稿推出[3],即使是現在,每年瀏覽器的標準也是快速地在變動。在後文我會在說明為何開頭我想提到這兩件事情。

延伸閱讀:JavaScript教學,給新手的入門指南

什麼是jQuery? 從常見功能來看

jQuery之所以受歡迎,是因為他提供了一系列簡單方便,而且兼容的操作,省去開發人員的部份煩惱。這裡舉幾個簡單的例子:

選取器

現代瀏覽器標準分成三個部份:

  1. HTML
  2. CSS
  3. 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為例:

事件綁定

接著說說事件綁定。

正常要綁定事件有三種方式:

  1. inline event:

<h1 onclick="console.log('click')" id="my-id">Hello</h1>

  1. addEventListener


  1. 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

querySelectorquerySelectorAll同樣可以透過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或是與框架無關的函式庫,無疑會對開發上有所幫助。

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

3分鐘小測驗,找到自己學習全端開發的入口

參考資料:

  1. 維基百科 - 全球資訊網協會
  2. 維基百科 - jQuery
  3. 維基百科 - HTML5
  4. React - Web Components說明頁面

成為企業渴求的程式人才!

在家學會 JavaScript 網路開發

全新「全端 Web App 開發」課程,給你看得見的學習成效!
超過 90% 轉職成功,400 位來自亞洲各國的 ALPHA Camp 校友,畢業後達成轉職、創業、出國工作的夢想!

3 分鐘選課指南

給期待創新改變的你

前端x後端x全端 完整工程師技能樹

90% 學生轉職成功,職涯競爭力更上層樓
最專業的「全端 Web App 開發」課程,上班族邊工作也能同時培養第二專長!

3 分鐘選課指南

學期一|程式設計入門

零基礎也學得會的程式入門課!

開始學帶得走的技能,為自己未來的成長鋪路

學期二|掌握網頁開發

系統化學習 JavaScript

實作打好前後端基礎,成為扎實的網頁開發者

學期三|軟體工程師養成

養成業界接軌的實戰能力

前端/全端工程師專修路徑,完成技能與求職準備,成為業界即戰力