iT邦幫忙

2024 iThome 鐵人賽

DAY 30
4
JavaScript

30天的 JavaScript 設計模式之旅系列 第 30

[Day 30] 系列文總結與完賽心得

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20241014/20168201mVPsJAQ8Qz.png

這是我第一次參與鐵人賽,很感動終於完成啦🥳!

系列文總結

文章回顧

先來回顧一下此次系列文包含的主題:

Design Patterns in JavaScript

React Design Patterns

Performance Patterns

Rendering Patterns

總結

這次的系列文主要聚焦在 JavaScript 設計模式,但還是不可避免地討論到效能優化與渲染相關的設計模式。關於效能與渲染的主題,如果要深入探討可以撰寫更多篇,甚至發展成另一個系列文。但既然這次的定位是設計模式之旅,這裡就先簡要介紹,另一方面也是覺得時間精力有限,沒辦法深入研究太多,但仍希望藉由這系列帶大家初步認識這些設計模式。

那些沒寫到的遺珠

這次的主題是圍繞《JavaScript 設計模式學習手冊 第二版》來撰寫文章,但在 30 天內要分享書中所有內容仍有些困難,因此還是推薦對設計模式有興趣的讀者去讀原書~
因為時間有限,有些我覺得值得討論的主題這次沒寫出來,例如:

List Virtualization

虛擬化列表在書中有提到,本來也計劃深入探討這部分,但後來覺得這段時間沒辦法抽出太多心力去深入研究,加上文章數限制(雖然可以寫超過 30 篇但真的好累...),所以此系列就沒涵蓋了,不過 List Virtualization 對效能優化仍十分重要,有機會我還是會好好研究其原理與實作,未來再撰寫一篇介紹文章!

更多實作範例

介紹設計模式時,我發現一個很糾結的地方:設計模式本質上是一種概念與方向,不受限於特定程式語言,也不包含過多實作細節。但如果沒有實作,很難具體體現模式的應用。這讓我在決定要專注介紹模式的核心理念,還是深入介紹 JavaScript 的語法細節和應用範例時,常常猶豫不決。具體實作是我們日常開發中最常遇到的,但如果過多強調實作細節,可能會模糊設計模式的焦點。因此這系列文的實作範例相對簡單,可能因此也難以看出模式能解決的複雜問題,有點可惜。不過,分享實作一部分也是我自己學習的過程,剛好把學到的語法一起應用到文章中 XD。

這種猶豫也反映在我拿捏 JavaScript Promise 或 Proxy 語法介紹的深度和應用上。渲染模式的篇章也是,本來還想手動實作一次 SSR 來理解渲染過程,或者介紹更多 Next.js 的內容,但後來光是介紹渲染模式的特色就佔據了太多篇幅,加上時間限制,實作部分只好作罷,這也有點遺憾。

開源專案案例介紹

有些設計模式我沒有找到現有專案的應用案例,或是去爬開源專案的程式碼來解析其中的架構與設計模式。如果能多和實際專案連結,應該能讓大家更理解這些模式的實際用途與應用方式。

除了上述列的,書中和 patterns.dev 提及的許多設計模式也因篇幅原因沒來得及介紹,不過還是很開心能順利完成這次挑戰!

學了設計模式,然後呢?

不知道有沒有人和我有類似的困惑,就是讀了這些設計模式以後,然後呢?可以做什麼?在日常開發功能時,我就可以直接說「這裡我要用XX模式」嗎?或是面試時我就可以自信的說「我很懂XX模式」嗎?又或者看到別人的程式碼,就能馬上辨認出:「他這裡用了XX模式」嗎?

我覺得都不是。正如 Kuro 和 Caesar 大大在「JavaScript 設計模式讀書會」中所分享的:「重點不是設計模式,是你要解決什麼需求才是最終的方向。」設計模式本身並不是最終目標,而是解決問題的工具和思維框架。強調解決問題、分析需求和情境,比單純記住模式的名稱更實際且有效。記住模式的名稱並不是重點,重要的是當你面對問題時,能根據當下的情境、限制與取捨來思考解決方案,然後找出適合的模式作為參考或使用。

假如開發時只專注於基本的 CRUD 操作,那設計模式可能對你沒什麼幫助;但當你開始規劃底層架構或處理更複雜的邏輯時,這些模式才會派上用場,幫助你進行架構設計與重構。學習設計模式的重要性在於它能幫助你形成一種解決問題的思維模式,讓你在遇到複雜架構或邏輯時有更多的解法選擇,而不是讓模式的使用成為目標本身。

因此,學完 30 天的設計模式後,然後就忘記它們吧!重要的是你學會了如何分析問題、思考解決方案的優缺點,而不是單純記住某個模式的名稱。不要讓自己被特定的模式框住,反而應該靈活應對實際需求,找出最合適的解法。

「太極拳只重其意,不重其招,你忘記所有招式,就練成太極拳了。」 -- 《倚天屠龍記》

完賽心得

糾結與心態調整

在開始撰寫鐵人賽文章前,內心其實有很多猶豫,心中時常有聲音告訴自己不要參賽了,猶豫的點例如:

🤯主題太常見

設計模式這個主題已經流傳許久,網路上到處都是相關的文章,而且許多前輩寫得既深入又完整。相較之下,自己是否真的有必要再寫一樣的內容?就算寫了,是否能做到比他們更好、寫出更具深度的內容?

🤯擔心敘述脈絡不佳、文筆不足

之前有在 Medium 上寫過一些 React 思維進化的筆記文章,但那些文章架構主要是依循書本的內容。這次鐵人賽雖然依循《JavaScript 設計模式學習手冊 第二版》這本書作為框架,但仍有許多需要自行規劃的脈絡。看到其他人邏輯清晰、架構完備的系列文章,擔心自己無法做到相同的程度。

🤯開賽前根本還沒讀完書、擔心深度不夠

參賽後當然會想堅持寫完 30 篇,但實際上我根本還沒讀完《JavaScript 設計模式學習手冊 第二版》,我對書中很多內容都還沒完全消化吸收,擔心寫的東西會不夠深入,甚至覺得自己可能只是在複製書中的內容,這樣大家為何不直接去看書呢?


但最後我還是參賽了!而且完全不後悔,分享幾點我鼓勵自己參賽的心態與雞湯:

🚀先寫就對了

就像寫研究所論文一樣,文筆好不好不是最重要的,重點是「先產出」,醜醜的產出總比零產出好。而且寫了以後都可以再修改,邏輯和脈絡也會在撰寫過程中逐漸清晰。現在還有 AI 工具能幫助潤飾文字,不需要求自己一步到位。

🚀回到參賽目標

思考當初想參賽是為了什麼目標,我想參賽是因為想寫出獨樹一格的主題嗎?是因為想和厲害大大們一樣,寫出架構清晰又有深度的文章嗎?是因為想要很多人看、很多人喜歡嗎?以上都不是,最初參賽的目標很簡單,就是「我要讀完《JavaScript 設計模式學習手冊 第二版》這本書」,所以我只要讀完書、寫完這系列文就達到我的目標了,其餘都不重要。而完賽的今天我大概讀完 90% 內容了,剩下模組的歷史和 React 應用程式結構還沒讀,過幾天再慢慢補上,也恭喜自己達到最初的目標!

🚀沒有人一開始就很厲害,但要開始才有辦法很厲害

參賽前幾天去爬了大神們以前寫的文章,發現他們早期的文章也有一些不那麼完美的地方,讓我發覺,啊,原來大神們也不是一開始就很會寫文章,那我剛開始寫,就算沒有很厲害也沒關係吧?也讓我想到之前六角學院洧杰老師分享的:「你不用一開始就很厲害,但要開始才有辦法很厲害。」

🚀為自己而學

看了 CodeFarmer 的 為自己而分享:聊聊分享內容的心魔 這篇文章,其中很喜歡龍哥「為你自己學」的心態,寫文章分享學習筆記和任何人都無關,重點是要為自己而學,學到的是屬於自己的成長。

學習不需要為公司、為長官,而是為你自己。只有你自己真心覺得學習它對自己有幫助,或是覺得有趣,這條路才會走的長遠。 -- 高見龍 [為你自己學 Rust] 前言

🚀其他勵志雞湯們

分享幾句學習很痛苦時,拿來鼓勵自己的勵志雞湯們:

「實力並不會像爬坡一樣平穩向上,而是像在爬階梯一樣,一階一階的往上。」 -- 韓劇《二十五,二十一》

「It always fit. Eventually.」 -- 《蜘蛛人:新宇宙》(來自 CodeFarmer 的分享)

「事實上,我可以簡單定重新定義成功,來保證我一定能成功,如果我定義成功是能學到一些有趣的東西。這樣,我總是成功的,也會學到很多」 -- Gmail 創作者 Paul Buchheit(來自 ExplainThis 的分享)

希望未來挫折時回頭來看這些心態與雞湯,也能繼續給自己鼓勵~

完賽收穫與感謝

為了寫系列文,我學到很多書中沒深入提及的知識,例如 JavaScript Promise 和 Proxy 的語法和使用方式、Observer 模式和 Redux Store 原理有關,CSR、SSR、SSG 等渲染模式的完整運作流程與優缺點,這些都是為了寫文章而深入研究的,很開心能藉此機會又學到更多。

也非常感謝網路上許多大大的分享,PJ、Kyle Mo、Huli、Summer 和 CodeFarmer 等的文章都對我幫助很大!後期為了寫效能和渲染模式的文章,大概看了老莫的文章好幾十次XDD

另外補充,寫文章過程中發現自己很喜歡畫示意圖哈哈哈,即使網路已經有類似的圖可直接用,還是忍不住想自己畫一遍(強迫症發作...),原本還希望每篇文章至少要有一張圖,雖然後來沒達到這目標,但畫圖過程很開心,發現自己蠻喜歡把概念用圖像化的方式呈現出來,也希望大家喜歡~


最後的最後,給自己還有參賽的大家大大的掌聲吧!堅持 30 天真的不容易(我還為此訂了行事曆提醒自己每天發文)
如果你喜歡我的系列文,可以多多分享,文章中有任何敘述不清或錯誤的地方,都歡迎指教與討論!
若有興趣,也可以追蹤我的 Medium,預計之後會把這系列文章放到 Medium 上,也會不定期更新我的學習筆記~

希望這次 JavaScript 設計模式之旅還算充實,謝謝大家,我們下次見(?


上一篇
[Day 29] Incremental Static Generation/Regeneration(ISR) 與渲染模式總結
系列文
30天的 JavaScript 設計模式之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
Rafael
iT邦新手 2 級 ‧ 2024-10-14 22:59:38

恭喜妳順利完賽,後面文章有越寫越順,很多內容都很讚💯,設計模式真的不簡單,但就像一本武功祕笈一樣,說不定哪天就用到囉~~

Monica iT邦新手 5 級 ‧ 2024-10-14 23:33:09 檢舉

謝謝 Rafael❤️ 你的文章也都很豐富!也恭喜你完賽~

1
Evans Wu
iT邦新手 5 級 ‧ 2024-10-15 00:02:23

恭喜完賽,很多文章都很有系統很充實💯

Monica iT邦新手 5 級 ‧ 2024-10-15 20:00:58 檢舉

感謝肯定!🙏也恭喜你完賽!同為設計模式主題,從生活案例角度切入感覺更平易近人👍

1
codefarmer
iT邦新手 5 級 ‧ 2024-10-15 00:24:38

恭喜 Monica 順利完賽,自己畫圖也太強了...我之前寫筆記時都偷懶直接參考 patterns.dev 的 /images/emoticon/emoticon37.gif

也感謝你特別 quote 出來,之前的文章有幫助到你真是太好了~

Monica iT邦新手 5 級 ‧ 2024-10-15 20:10:51 檢舉

是 CodeFarmer 大大🙏!patterns.dev 的圖跟動畫其實都很精美🤣
很謝謝大大的分享!不管是自我反思或技術分享都學到很多💪

1
Alex Liu
iT邦新手 4 級 ‧ 2024-10-15 02:22:36

恭喜完賽!

其實我最一開始也打算拿 JavaScript 設計模式當作這次的主題,用 JavaScript 談設計模式的資源我覺得還是相對少的,而且原本的想像也是要拿各種開源專案來當案例。

不過最終我很擔心我沒能料理好這個主題以及各種原因最後換了一個方向。所以當我看到這個主題出現時我真的蠻期待的。結果證明這超棒的,還搭配了用心自製的圖片,我真心佩服。

Monica iT邦新手 5 級 ‧ 2024-10-15 22:12:11 檢舉

看到 Alex 大的回覆真的太感動😭🙏感謝大大肯定也恭喜大大完賽!其實覺得開發經驗多少也會影響自己看待設計模式的角度,我只是看多少寫多少也不能說很完整全面~
Alex 大分享的元件設計才是真的厲害...準備五個月太佩服🥹每篇都非常紮實還正在拜讀中!

我要留言

立即登入留言