Javascript新時代學習建議


前言

本文提供了一些現在剛入門要學習Javascipt的學習者的建議。這些是我個人目前的理解,以及心得感想。

應用領域

首先,你要先了解Javascript這個程式語言的應用領域,每個程式語言都有它比較合適的應用領域,這也會涉及它的語言的內容與特性。也與它經常會被應用的地方有關,但這並非一個完全絕對的,只是"相對合適",與它一開始被設計或創造出來的針對應用範圍有關。

Javascript語言基本上是用在網頁上的,它的執行環境是在瀏覽器上。一開始的設計是與HTML相配合,HTML也就是我們經常所認知的網頁製作語法,可以進行一些與網頁使用者互動的應用程式開發。當然一開始的Javascript程式語言的內容,與現在的有部份的差異,舊時代的網頁不僅語法單純,電腦與瀏覽器的能力也和現在不能相比。Javascript語言本身是一個很有歷史的程式語言,在1995年就已經實作發佈,迄今已有20年左右。

瀏覽器也有不同品牌之分,每家品牌的實作的Javascript執行核心不同,每個品牌也因推行時間的不同,會有不同的版本。關於這一項,是涉及到所謂"功能或語法相容性"的問題,不同的瀏覽器品牌對於Javascript的語法功能,有可能有不同的支援程度,甚至會有在某些瀏覽器上並無某些功能的情況。在這個應用的角度,有許多工程師製作了許多容易使用的函式庫,透過使用這些函式庫,我們可以得到諸多的好處:

  • 妥善的讓功能可以支援,現行的各種不同瀏覽器品牌與版本
  • 簡化語法的結構和使用方法,提升程式開發的效率
  • 擴充原本的語法或結構,加入類似其他程式語言的對應函式或語法結構
  • 模組化功能,能重覆利用其他已經寫好的功能

現在有很多的這類函式庫,例如jQuery、Underscore等等,更進階的則會發展一個完整的程式框架,例如Backbone.js、Angular.js、Ember.js等等。但不論這些函式庫或程式框架的語法結構如何,它們的基礎都是Javascript程式語言。

還有一種是直接從Javascript程式語言,原本語法與功能進行改善的,通常稱之為"超集(superset)"語言,用改良過的程式語言寫法來開發,不過這些語法最終還是需要編譯為Javascript,以Javascript程式語言作為最後的執行的程式碼語言。其中最為知名的是Typescript與CoffeeScript。

關於伺服器端的Javascript應用,最先是由Node.js所發展出來的,在伺服器環境端執行Javascript的程式,Node.js採用Google的V8引擎來執行代碼,與傳統的伺服器端程式的執行方式有很大的不同。

語言的一些特性

Javascript雖然在設計初期有參考其他程式語言的特性,但它在程式語言的特性上,有很獨特的地方,不能說你有學過其他的程式語言,例如Java、C、C++語言,就能完全馬上掌握所有的特性。尤其再加上它的名稱有個Java,容易被誤解為它與Java程式語言的語法或特性類似,它可以說是長期以來被誤解最深的程式語言。在語言特性這一節,有以下的幾個重點:

Javascript與Java相差甚遠

Javascript可以說是長期以來被誤解最深的程式語言,尤其是在這一點上。除了名字有個Java之外,它的物件導向結構與Java相差十萬八十里,應用的領域也不太一樣。

Javascript是直譯式的腳本程式語言

Javascript程式語言是腳本程式語言,直接透過瀏覽器的直譯器執行,它並沒有經過編譯為機器碼的過程,它的執行環境會被限制,並沒有辦法像一般在作業系統中的應用程式,能存取到這麼多的資源與功能。而程式的原始碼,在瀏覽器的開發控制台就可以被看得見。加快執行速度以及作簡單的保護措施,常見的作法是最小化(minify)或醜化(uglify)原始碼。

Javascript並不是如表面上那麼簡單

在我個人學習Javascript語言的過程中,它有很多隱藏在其後的結構,真的與很多我所認知的程式語言不同,不但模糊而且零碎。這並不代表它是一個有很差結構的程式語言,而是它有自己的特色的程式語言。

學習建議

學習npm、nodejs的用法,善用開發的協助工具

雖然一開始我們只是在學習Javascript程式語言的基礎,但是目前的Javascript的開發生態與方式。與過去已有很大的不同。在自己的電腦中建立一個合適的開發工具,學習使用npm、nodejs作為函式庫的依賴管理工具,使用webpack、webpack-dev-server之類的打包、最小化、開發用伺服器工具。以及使用Google Chrome作為除錯器,這些都是開發Javascript程式語言,必備的各種工具。

另外,利用eslint、jshint、jslint等等程式碼檢查工具,提升程式碼的撰寫品質,慢慢校正開發習慣,也是必備的。你可以選擇一套合適的開發工具,例如Sublime Text3、Atom或WebStorm,都是不錯的選擇。

先學習基本的語言特性 + 基本的程式撰寫風格指引

在網路上有很多的Javascript入門教學與文章,但有很多中文的教學,內容已經很過時了,這要特別注意。我最推薦的是以下:

  • Mozilla MDN (中文) 教學與範例中的權威,內容針對新式的標準語法都有說明到。
  • w3schools JavaScript Tutorial (英文) 雖然是英文,但用字都很淺顯易懂,程式範例多。

程式碼撰寫的風格指引,以下幾個是最常被提及的,大部份都有中文翻譯:

一開始就學新的語法標準

ES6(或ES2015),甚至是ES7的新式語法,是最近才制定好的Javascript語言特性,其中加入不少新式的函式或結構。我的建議是一開始學習時,就可以開始學習。雖然有很多特性在目前的瀏覽器中支援並沒有全面,目前還是需要例如babel的轉置工具,在學習上會多學一些東西,可以先轉換到目前大部份瀏覽器都支援的ES5語法。對於未來的使用會有很大的幫忙,這一點時間的投資會是值得的。

此外,新式的語法在目前比較新的專案中,例如React、Angular等等的程式碼中,都已經被大量的採用。學習這些語法對於理解這些程式碼的範例會有很大的幫助。

直接學習使用jQuery

jQuery是現在最流行的函式庫,網路上的資源很多。熟練的使用jQuery已經變成是一個前端工程師必備的技能,而不是選項之一。jQuery可以簡化很多Javascript的語法,提供更多的功能,所以建議你一開始就可以直接學習它的用法,當然你在學習時也需要先對Javascript的基本語法和特性有一定的理解。

學習一套CSS框架與UI樣式 (bootstrap)

Javascript只是一套程式語言,在網頁呈現時,我們還需要搭配CSS框架與UI(使用者介面)樣式的函式庫,才能作出方便使用的網頁效果與UI。目前最流行的這類框架是Bootstrap,它提供了豐富與完整的網頁框架,以及可應用於各種場合的UI,如果你是初次學習這類的框架,我建議你可以從Bootstrap開始。當然還有其他的框架或函式庫,它們的用法或結構,會與Bootstrap類似,但裡面的美術設計和語法,或是額外的特性,各自有不同的方式。

學習一套伺服器端(後端)程式語言與資料庫

Javascript畢竟它的應用領域主要是在瀏覽器端,也就是客戶端。網頁的應用程式仍然需要與伺服器端的資料庫作搭配,用於記錄資料或作互動應用。例如使用者登入、資料驗証、資料記錄、複雜的資料運算等等,都需要依靠伺服器的程式語言與資料庫搭配。

要作為一個稱職的前端工程師,學習一套伺服器端的程式語言與資料庫是不可或缺的。尤其在大型的專案中,雖然前端工程師的主要工作是在客戶端的應用程式上,如果多一分對伺服器端的應用程式與資料庫的認識,你會對整個專案的結構更佳了解。當然,在很多小型的專案,前端工程師或許也常常要兼顧伺服器端的一部份工作。

伺服器端(後端)的程式語言有很多種選擇,你可以選擇像PHP、Python發展成熟而且資源多,而且常被使用的,Ruby在台灣的使用就沒那麼普及。或是像Node.js,它也是同樣使用Javascript程式語言,語法、函式庫與瀏覽器端有不少差異性,它是最近幾年才剛發展起來的,目前可以找到的主機空間比較少,通常需要自行架設,各種資源雖然多,但穩定性仍不及其他的。

資料庫的部份你可以選擇像MySQL(或MariaDB),同樣也是資源多而且常見的,PostgreSQL在國外很流行,但在台灣比較少被使用,反而SQL Server有可能還比較普遍被使用。至於比較新式的資料庫,在NoSQL中比較有名的例如MongoDB、Redis等等,在國外目前很流行,在台灣有看到過,但並沒那麼多被使用。其他還有最近很熱門的一種雲端服務稱為BaaS(backend as a service),其中就有包含即時的雲端資料庫,例如Firebase等等。這也是可以學習的一個領域。

深入學習Javascript特性,例如prototype、callback與closure

Javascript有許多語言特性,與其他語言不太相同。我舉的這三種大概是比較會難以理解的,如prototype、callback與closure等等。當然還有其他的語法或特性,不過這三個如果是你想要掌握這個程式語言,一定是要花時間學會的。

學習AJAX、Promise的用法

Javascript的AJAX用法,也是一個必需學會的知識。透過AJAX與伺服器端溝通,是目前很多Javascript應用程式基本的運作方式。當然這其中少不少對JSON格式的處理運算。

另外Promise是一項新的語言特性,它已經是ES6的標準之一。Promise用於程式的流程控制,它與Javascript的其中重要的語言特性,異步的運算是必不可分的。這也是一個必需要學會的知識與用法。

學習一套程式框架,React(Flux)、Backbone.js或Angular.js或其他

僅僅學習jQuery之類的函式庫是不足的,你應該要選擇一套程式框架,或是比較新式的SPA(單頁式應用程式)的程式架構。以及相關的週邊擴充,或是應用。這一段路的學習曲線會比較陡峭,除了會考驗你對Javascript程式語言的基礎能力外,目前熱門的這些框架,除了內部的結構需要學習外,大部份都會使用新式的ES6,甚至是ES7的語法。不過這段學習是值得的,現在市場上對前端工程師的需求,都會至少要求熟悉其中一套程式框架。

不一定要學習額外的"超集"語言

所謂的"超集(super set)"語言是指以Javascript語言為基礎,擴大擴充語言本身的特性與功能,最終還是要編譯為Javascript才能執行。其中比較有名的是Typescript與CoffeeScript,這些超集(super set)各自的語法與原本的Javascript語法,都有大幅度的差異,等於你是在使用另一套程式語言。

這些"超集"語言有很多原本改善的語法與結構,實際上與部份ES6或ES7的語法是相同的,我的建議是直接用ES6或ES7的語法就行了,"超集"語言有它的優點,但也有麻煩的地方,而且它還需要花一些時間學習,才能應用的很拿手。我的建議是這要視情況而定,學習它們並不是必要的,而且除非你真的對Javascript語言,已經有一定的熟悉程度,要不然你一開始就學習額外的"超集"語言,有可能會誤導你對Javascript的語言特性。像我有學習過Typescript一段時間,但用到的情況並不多,現在是直接使用ES6/ES7語法的情況比較多。