話說從前 — JavaScript的過去與現在

Sean Yeh
Web Design Zone
Published in
Oct 14, 2020
Photo by Natalia Y on Unsplash

近年來不僅是網頁瀏覽器,程式語言的汰舊換新的速度越來越快,週期越來越短。然而直到目前為止,JavaScript(是一種直譯的語言,通常縮寫為JS)仍然是網站開發的世界中不可或缺的程式語言,它被世界上的絕大多數網站所使用。儘管每種程式語言都會有它大流行與過時的階段,對於長時間存在的JavaScript語言來說卻曾經走過一段漫長的低潮時期。首先,讓我們探究一下JavaScript過去的故事。

Web1.0時期

JavaScript的歷史可以追溯到1990年代,當 World Wide Web(網際網路)一詞廣為人知的時候,JavaScript也伴隨著這個潮流開始展露頭角。

話說第一個版本的網頁瀏覽器Mosaic Netscape 0.9於94年底發布後不久便成為90年代網際網路的主要瀏覽器。為避免商標問題,該瀏覽器於同年更名為Netscape Navigator(也被稱為網景)。網景的創始人馬克·安德森認為HTML需要一種「膠水語言」(glue language)並且該語言的程式碼可以直接編寫在網頁標記中。這個膠水語言最初被命名為Mocha,中間一度被改名為LiveScript,最後又因網景的行銷部想要搭便車沾沾當時流行程式語言「Java」的光,便被重新命名為JavaScript,結果卻造成日後大眾對這個語言的誤解,實際上JavaScript與Java沒有關係。

當時JavaScript主要用於網頁上面的視覺效果,例如透過動態方式將圖像擺放在網頁上指定的任何位置、對瀏覽器的狀態欄發送訊息,或者是使網頁上面的文字出現閃爍的效果。

雖說透過JavaScript來處理視覺效果不是不好,實際上,某些效果至今仍然被使用。

但它曾經一度被認為是某種程式成癮者愛用的語言,總是被用在撰寫一些在網頁上可有可無的特效,例如各式各樣的跑馬燈、隨著游標移動的動畫等等,且已經多到了浮濫的地步,使得網路上充斥著一堆像聖誕樹一般的網站。

再加上當時兩大瀏覽器陣營之間的標準之戰,(Netscape推出JavaScript後,Microsoft也推出自家IE瀏覽器上專用的jScript)導致不同瀏覽器之間JavaScript的不相容,常常會把使用者的瀏覽器搞掛。此外又傳出有安全漏洞等問題,可說讓JavaScript深受其害。世人們逐漸開始減少對它的興趣,JavaScript甚至於被描述為是一種低俗的語言,「在使用瀏覽器時中應該先關閉JavaScript的使用」,成了一種常態。於是JavaScript便從神壇上跌落進入了一段不堪回首的過去。

Web2.0時期

這種低潮的情況一直持續到2005年,當Ajax技術被推出時,終於為JavaScript的前途帶來了一盞曙光。所謂的Ajax(全名為Asynchronous JavaScript and XML)是指「在瀏覽器上建立類似於桌面應用程式的網頁技術」。早期我們在使用網頁時,一定需要透過換頁、重新整理等方式才可以刷新頁面,使用上不甚流暢,而桌面應用軟體則不需要,這就是當時網頁服務與桌面應用軟體間很大的一個差別。然而透過Ajax技術,使用者在瀏覽網頁服務時的體驗,就像是使用安裝於桌上型電腦上面的軟體一樣。例如當年讓人感受最大差別的地方在於使用Google的GMail網頁郵件服務時,體驗上就像是使用Microsoft Outlook的感覺一樣。因此Ajax技術在短時間內迅速普及(後來Google又推出類似Excel的試算表、類似Word的文件等服務),因為透過這個技術開發者可以使用單純的標準網頁技術(HTML、CSS與JavaScript)來創造豐富的內容與服務,帶入了Web2.0的時代。

在此期間發生另外一件事:在國際標準組織ECMA International的指導下通過JavaScript的標準化讓瀏覽器供應商之間在跨瀏覽器相容性上面的問題得以緩解(JavaScript另一個廣為人知的名稱是ECMA Script)。在這段期間,隨著網際網路的發展,大眾對上網的接受度越來越高,也增加了對於網路安全問題的關注並且減少網站安全漏洞的發生。這樣子的發展使得原先不想使用或不能使用JavaScript的理由就此被消解。

Ajax技術的普及使大家重新評估JavaScript語言的價值。在此之前的JavaScript,充其量只是一個附屬於網頁HTML與CSS的功能。但是話說回來,如果一開始沒有JavaScript的話,人們看到的Ajax世界也不會出現吧。

HTML5時期

HTML5的出現,讓原本僅只是標記功能的HTML展開新的局面。HTML5一詞實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。在JavaScript的部分包含了數個JavaScript API,這些API的加入使得HTML5可以作為開發瀏覽器端應用程式(web based applications)的基礎,大幅度的擴大了只要使用JavaScript即可完成的工作。因此拜HTML5之賜,JavaScript語言開始更多的被使用。

HTML5的範疇

在此同時,由於智慧型手機和平板裝置的逐漸普及,也導致了使用RIA技術(為Rich Internet Application的簡稱,以Adobe Flash、Microsoft Silverlight與Oracle JavaFX為代表)的減少以及使用SPA(Single Page Application)的增加,也加速了JavaScript的普及。實際上HTML5的出現,也是希望能夠減少瀏覽器對於需要外掛程式的RIA技術的需求。

以JavaScript做為網站前端開發的核心時,其最大的問題就在於開發JavaScript的效率。JavaScript雖然強大,卻不算是一種易於撰寫的語言。除了該語言本身的問題外(例如JavaScript的型別鬆散),跨瀏覽器使用的環境也是一個問題,例如程式執行的結果因瀏覽器而異。不過由於JavaScript是與主要瀏覽器共同使用的腳本語言,目前正在使用JavaScript開發網站的工程師大有人在。

jQuery的出現

長期以來提高JavaScript產能的方法,就是使用各種JavaScript函式庫(JS Library)。Javascript 函式庫指的是使用JavaScript撰寫,具有特定目的,如簡化JavaScript物件使用、操作 DOM 物件、繪圖功能的一組函數集合。Javascript 函式庫能幫助我們寫更少的程式碼卻能做更多的功能。眾多JavaScript函式庫中,最著名的是jQueryhttps://jquery.com/)。

jQuery是一個出色的函式庫,從基本頁面DOM元素操控、動畫、Ajax等。並且還可以在網路上找到成千上萬的Plugins也是一個很大的優點。使用簡單的程式碼就可以實現簡單的應用程序,一行jQuery程式碼,可以抵過數百行的JavaScript程式碼,而且還可以省下數小時的瀏覽器測試時間,即使在問世後十多年後的今天,仍舊具有一定的魅力。

jQuery的不足

近年來,隨著前端開發變得越來越複雜,jQuery的捉襟見軸的情形也開始變得明顯了。

比如說「從網頁的某個地方驅動(按鈕或者是選單),而使得資料被載入頁面」這個方式在jQuery中非常常見。jQuery中可以從DOM樹中的某節點輸入值,並且將這個值透過Ajax傳遞給後端並且觸發相對應的結果,最後將這個結果嵌入頁面中(例如:嵌入<ul> <li>的元素中)的過程。換言之,要操作輸入與輸出,必須要非常了解HTML頁面的構造。這種傳遞資料的方式實際上是非常麻煩的,而且網頁的Layout HTML與javaScript碼像義大利肉醬麵一樣的混雜的寫在一起,對於維護與開發來說實在是很不方便。對於每天需要重複操作的SPA網站,用jQuery函式庫來實現是不太實際的方式。

JavaScript框架

於是大家開始追尋一種可以將運算邏輯與頁面呈現使用的程式碼分別開來的一種JavaScript框架,該框架可以做為頁面和JavaScript物件之間的中介。

簡單說,就是提供一個機制,使得頁面狀態一旦改變時,JavaScript物件也跟著發生變化;反之,JavaScript物件改變時,也會反映到頁面的呈現狀態。這樣子可以使設計師可以專注於HTML而工程師可以專注於JavaScript邏輯的開發,利於分工並提高開發的效率與日後維護的方便性。

什麼是框架?

在應用程式開發過程中,工程師一旦發現某處有問題,馬上就在該問題的發生處加上一個補充程式來修改問題,在他處又發生問題,就依樣畫葫蘆的在他處加上另一個補充程式。然而這種方式對於程式的開發並不是很好的方法。如果同樣的問題已經出現了很多次,應該要有一個標準的處理方式。這就是框架登場的地方。框架在設計的理念上就是希望可以讓程式碼重複的被多次利用。框架準備了一些在程式開發上常常被使用到的程式碼,讓工程師只要依照框架的使用規則,就可以很方便的取用該程式碼到各別的專案中。使用框架來開發應用程式,除了可以讓工程師不用在每個專案都「重新發明輪子」外,也可以維持一定的開發品質。

有哪些JavaScript框架

近年來,JavaScript提供了各種各樣的框架。目前JavaScript的主流框架有Angular、React與Vue等等。

其中於2010年10月發布的Angular 是一個以 TypeScript為基礎的 JavaScript框架,由 Google 開發和維護。是一個學習曲線比較高的框架。

於2013年3月發布的React ,是由 Facebook 開發並維護。Facebook將 React 用於他們的Facebook、Instagram 和 Whats App 頁面。

Vue 是2016年發展最迅速的JavaScript框架。沒有大公司的支援。相對於其他兩種框架,學習曲線最低,可以漸進式的提升。換句話說,如果您有一個使用jQuery的網站,而目前程式碼變得很複雜想要改用Vue框架來實現,這時候您可以隨時加上Vue的框架。

以下是三個框架在GitHub中被評鑑的星等數。我們大致上可以從這裡看出哪一個框架是目前比較熱門的。

在GitHub被評的星等

從前端到後端Node.js

到目前為止,我們仍然只將JavaScript作為使用者端(前端)程式語言來使用,寫出來的程式在使用者的瀏覽器上執行。然而當Node.js的出現後,JavaScript也可以被用寫伺服器端(後端)的程式。

Node.js含有一系列的內建模組,使得程式可以在Apache HTTP ServerIIS,之外,作為獨立的伺服器執行。(參考:Node.js — 讓您在Server環境下用JavaScript進行操作

結語

我們看到一路上JavaScript的演進,從傳統意義上被作為一種解釋語言,被大家濫用到幾近於被世人拋棄,後來又經過Ajax、jQuery等應用又漸漸的回到工程師們的懷抱。此外,隨著HTML5CSS3語言標準的推行,讓JavaScript也可被用於遊戲、桌面和行動應用程式的開發。並且透過Node.js的使用,讓JavaScript跨出前端,進入伺服器端,使得JavaScript目前的熱門度一直居高不下。未來又會有哪些變化?我們拭目以待。

--

--

Sean Yeh
Web Design Zone

# Taipei, Internet Digital Advertising,透過寫作讓我們回想過去、理解現在並思考未來。並樂於分享,這才是最大贏家。