iT邦幫忙

2021 iThome 鐵人賽

DAY 1
6
Modern Web

Javascript 從寫對到寫好系列 第 1

Day 1 - 寫「好」程式是什麼樣的感覺?

前言

開賽啦!各位朋友大家好,我想會點進這系列文章的人,可能是以下兩種:

  • 學習前端、Javascript 2~3 年,想看看 Javascript 可以到什麼更高的地方
  • Javascript 老司機,單純想看看怎麼會有人敢談論什麼叫「好」程式

其實,筆者也沒有什麼顯赫的背景,更拿不出什麼嚇嚇叫的作品,只是一個偶然在大四選修計算機中心的網頁課程,並且努力走了四五年的人,現在在一家新創公司擔任全端工程師。

在學習的過程中,其實常常發現,比起周遭的同儕,自己的表現很平凡,往往是下了很多苦功,才做到旁人的舉手之勞,但也正是因為成長很慢,我才特別看重「成長」這件事,而學習 Javascript 的過程中,讓我非常深刻體會到,成長與蛻變的過程

因為你有發現, Javascript 也在學習與蛻變嗎?

Javascript 的神秘面紗

Javascript 算是公認「易學難精」的語言,因為語言本身寬鬆的特性,要上手並且寫出能夠運作的程式,比起其他語言快很多,再加上網頁就像是一張畫布,我們透過 HTML、CSS、Javascript 調和上色,寫出來的程式都像是一幅幅絢麗的畫,讓人充滿成就感,覺得自己能夠迅速掌握這門語言。

而同時,Javascript 也因為語言寬鬆的特性,往往在型別(type)上表現得模稜兩可,讓我們覺得自己好像很了解它,卻仍不清楚下一秒它會不會炸掉。再加上 Javascript 許多奇怪的特性,往往在我們寫得順風順水時,從背後來一記回馬槍。

「好」的定義是?

回到我們的主題,什麼叫做「好」程式?

  • 好理解(readable)?
  • 好維護(maintainable)?
  • 好重構(refactorable)?
  • 以上皆是?

看到這邊,你不妨也好好想一下,什麼樣的 code 會讓你說很棒?什麼樣的 code 是「好」的?

如果你心裡有個答案,我們先換個角度,來看一下 Javascript 的非同步。

Javascript 非同步是如何邁向「好」的方向

XMLHttpRequest 登場時,我們搭配 callback function 做到許多 AJAX 的操作,在那個時代已經是很厲害的機制,跳脫了死板板的同步,局部更新部分畫面,使用者用起來超開心!

接著隨著時代演進,程式規模成長,callback function 漸漸難以負荷多層(nested)的 AJAX 操作,寫起來不知道右括號該放哪,讀起來看不出程式流程,更別提 error handling 加上去立馬變成義大利麵!

Promise

於是它來了!Promise,這個 ES6 嶄新的物件改變了我們這些凡人對非同步的想像,它給出了承諾,Promise 可以被串接(chainable),讓原本多層的 AJAX 被攤平,大幅提升了維護性與可讀性。

但時代的演進是飛速的,程式規模指數型成長,Promise 寫起來仍然就是一個非同步的感覺,穿插在同步程式碼之間,閱讀起來其實也沒那麼輕鬆,對於不熟悉非同步的新手們來說,更是難以判斷程式流向。

async await

於是它來了!async await,這一對摧毀非同步高牆的利器誕生,雖然其實也是基於 Promise 來的,但很好地簡化了許多細節,將非同步的 function 同步化,穿插在同步程式碼中一點也不突兀,程式碼再度提升了可讀性。

看到這裡,你是否感受到非同步程式是如何朝向「好」的方向,隨著時代前進,非同步也持續地在蛻變,你覺得會不會有下一個新技術來取代 async await 呢?

筆者沒有特別研究,不知道是不是真的有,但可以肯定的是,Javascript 一定會繼續進化

寫「對」v.s. 寫「好」

我心中的「好」程式就是像這樣,是因應時代不斷進化、蛻變的

我當然可以用 XMLHttpRequest 來寫所有非同步程式,而且寫出來的功能跟 async await 一模一樣,使用者感受不出差異,但那就停留在把程式寫「對」,而不算是寫「好」。

寫「對」程式是客觀成果,我的功能正常、我的 PM 沒貼我 ticket,我的 user 沒打電話給我。

寫「好」程式則是一種主觀精神,我會盡我所能去嘗試,磨練出讓自己愈來愈滿意,甚至團隊成員愈來愈輕鬆的 coding 技能(more readable/maintainable/refactorable)。

因此,寫 code 十年但每天做一樣事的人,不一定能把程式寫「好」,而剛開始學 Javascript 但天天都有所成長的人,才更能夠將程式寫「好」。

關於系列文

這系列的文章「不會」有:

  • 基礎 Javascript 語法或使用
  • 程式刷題教學(但我的隊友 Jen 有,歡迎跳坑)
  • Javascript 框架相關的語法(但我的隊友 pjchender 有,歡迎跳坑)

這系列的文章「」有:

  • 偏向 Javascript 核心的一些觀念與理解
  • 職場實戰派會用到的實用解法
  • 不一定透過寫 code,菜鳥工程師如何提升自己的「程式感」

結語

沒有最好的程式(best),只有不斷進步的程式(better)


下一篇
Day 2 - Array 陣列組合技 (1)
系列文
Javascript 從寫對到寫好30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

2
TD
iT邦新手 4 級 ‧ 2021-09-17 09:06:40

很特別的主題!期待後面的文章討論~

ycchiuuuu iT邦新手 4 級 ‧ 2021-09-17 09:24:19 檢舉

我也還不知道接下來會寫出什麼,所以我也很期待呢!!
如果有疑問或我的筆誤都歡迎隨時提出囉~

TD iT邦新手 4 級 ‧ 2021-09-17 09:25:45 檢舉

okay!

我要留言

立即登入留言