現代 JavaScript 程式設計教學:JavaScript 的進展

【分享本文】
Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email

    JavaScript 可說是電腦界的大驚奇,從前端跑龍套的小角色一躍成為跨越網頁前端、網頁後端、桌面程式、行動裝置程式、IoT (物聯網) 等領域的熱門語言,成為實質的 (de fecto) 跨平台技術。筆者先前也探討過這個議題,有興趣的讀者可到這裡觀看這篇文章。

    JavaScript 生態圈相當活躍,每隔一陣子,就會有一些新專案出現。從好的方面來想,代表 JavaScript 的市場需求仍然持續不斷;但是,這也代表 JavaScript 開發者之間對於 JavaScript 實務的歧見。許多開發者試圖解決 JavaScript 的問題,但對於何謂最佳解沒有真正的共識。結果,開發者們重覆地解決相同的議題,徒然造成新進學習者更高的門檻。某種程度上來說,JavaScript 也算是電腦界共同的技術債 (technical debt)。

    經過考量,筆者決定直接撰寫 ECMAScript 6 (或以上) 的 JavaScript,而不撰寫 ECMAScript 5 (即目前主流瀏覽器所流通的 JavaScript 版本);即使目前瀏覽器供應商尚未完全追上 ECMAScript 6 (或以上) 的特性,有許多用戶的瀏覽器可能也還沒更新到最新版,但筆者認為我們現在就可以學 ECMAScript 6 了,本文會說明相關考量。

    JavaScript 的技術債來自兩方面,一個是當初匆匆設計所留下的語法缺陷,一個是為了相容性不敢更動舊有的設計。若以繼續留在 JavaScript 生態圈的前提下,我們要如何提升 JavaScript 的體質呢?有些聰明的開發者就想到用新的語言來改善現有語言的缺陷,將一些 JavaScript 的奇淫技巧留給 JavaScript 轉譯器 (transcompiler),開發者只要專注用較好的程式語言實做程式即可。

    目前來說,JavaScript 轉譯器最流行的就是 TypeScriptBabel,兩邊各有支持者,前者較受歡迎一些。TypeScript 較受歡迎的原因是在於在 JavaScript 中額外加入型別的資訊,而且 TypeScript 引入的物件系統和其他語法特性較完整。雖然 Babel 的語法特性沒那麼多,但 Babel 直接拿 ECMAScript 6 以後的語法,不用再學新的語言。未來瀏覽器支援度更好時,有可能拿掉 Babel 這個中介工具,在專案中直上 ECMAScript 6。

    註:雖然 TypeScript 官網宣稱 TypeScript 是 JavaScript 的嚴格超集,但偶爾在轉換過程中會出現語義歧異,仍然需要使用者手動處理。

    如果從 Google Trend 或其他指標 (metric) 來看,Babel 表面上看起來沒 TypeScript 受歡迎,但筆者以為 Babel 實際的流行度應該再高一些。因為大部分教材不會把 Babel 當成書籍的標題,開發者也較少直接把 Babel 當成關鍵字去搜尋內容。由於 Babel 採用的語法就是 ECMAScript 6 以後的語法,通常 Babel 是在介紹 ES6+ 時附帶介紹的工具,而非整個教材的主軸。

    筆者以為 Babel 和 TypeScript 比其他的 JavaScript 轉譯器更好用,因為大部分的 JavaScript 轉譯器所用的語法和 JavaScript 本身不相容,可用在新專案上,但無法直接套在現有專案上。而這兩種 JavaScript 轉譯器皆可以套在現有的 JavaScript 的 code base,再將該 code base 慢慢地重構到新的語法上。這兩者的選擇是個人偏好而沒有絕對的優劣,TypeScript 提供較豐富的語法特性而 Babel 更貼近原生的 JavaScript 的語法 (參考這裡)。

    本系列文章會專注在 ECMAScript 語言本身,至於網頁程式的部分,則會留在日後其他教程。除了語法之外,建置 Node 開發環境的過程也略為繁雜,我們會撰文說明。

    由於 JavaScript 在倉促間完成,留下許多設計上的議題。如同其他語言的眉眉角角,即使有些 JavaScript 程式碼是合法的,不代表我們就該這樣寫,但是這些程式碼出現時,我們要看得懂,必要時要修改它。筆者會稍微提及一些 JavaScript 具有壞味道的特性,但不會深入介紹,以免「學壞」;這些特性,必要時再去查語法規格書即可,不需要在心理上造成過多的負擔。

    【分享本文】
    Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email
    【追蹤新文章】
    Facebook Twitter Plurk