城市碼農

All Articles

SourceCode2022-01-20

理解 Redux 原始碼 (三):來實作 combineReducers 吧

前兩篇 Redux 原始碼的文章,實作了 createStore 以及 applyMiddleware 等項目,在這篇文章中,將實作負責整合多個 reducers 的 combineReducers,藉此了解 Redux 是如何實踐這件事。

SourceCode2021-12-30

理解 Redux 原始碼 (二):來實作 middlewares、applyMiddleware 以及 createStore enhancer 吧

接續上篇 Redux 系列文章,已實作完 createStore 中的 getState、dispatch、subscribe 後,這篇將進階到實作 Redux middleware 相關的功能,如 applyMiddleware 以及 createStore 傳入的 enhancer 等。帶著好奇心,更深入探討 Redux 吧。

SourceCode2021-12-01

理解 Redux 原始碼 (一):來實作 createStore 的 getState、dispatch、subscribe 吧

很好奇 Redux 是如何在程式中實踐狀態統一控管以及單向資料流的概念,於是決定閱讀 Redux 的原始碼,並解實作基礎的 createStore function,會聚焦在 getState、dispatch、subscribe API。

JavaScript2021-07-25

透過程式範例,熟悉 JS 執行流程的關鍵:Event Loop

在學習 JavaScript 執行流程時,一定會需要深入理解 Event Loop,其中包含 Call Stack、Callback Queue、Macrotasks、Microtasks 等概念,將在本文中整理說明,期待閱讀完後,就能更完整地回答 promise 與 setTimeout 混在一起時,誰先執行的相關問題。

JavaScript2021-06-01

JS 中的淺拷貝 (Shallow copy) 與深拷貝 (Deep copy) 原理與實作

在 JS 中 Object 資料型別的複製變數時,是複製地址(address)而非原始值(value),所以操作複製出的新變數時,容易更動到原始變數,反之亦然,因此容易造成非預期的 Bug 發生。為了解決這類問題,就必須了解 Object 資料型別的兩種拷貝方式:淺拷貝(Shallow copy)與深拷貝(Deep copy)。

JavaScript2021-05-20

JS 變數傳遞探討:pass by value 、 pass by reference 還是 pass by sharing?

在 JS 中,時常會聽到基本型別 (Primitive type) 的變數是 pass by value,物件型別 (Object) 的變數是 pass by reference 的說法,然而當深入查找後,又會發現 pass by sharing,更甚至看到 JS 都是 pass by value,究竟是怎麼回事呢?本文將由記憶體儲存變數的方式、複製變數的方式談起,一步步理解 JS 中的 pass by value、pass by reference 以及 pass by sharing。

React2021-05-01

深入理解 React.createElement 與 JSX

在寫 React 時,總是非常順手地使用 JSX 語法,然而用久了總會思考到:究竟 JSX 被編譯後結果為何?背後的 Raw API 為何?JSX 有什麼特色?這些疑問都會在文中探討!

JavaScript2020-11-29

parseInt / parseFloat / Number,將字串轉型為數字的方法比較

最近在工作時遇到 string 要用 parseInt 還是 Number 轉型的選擇,因此閱讀 ES6 規格與 MDN 的定義,來大致理解 parseInt / parseFloat / Number 三者差異。文中有解釋:為什麼 parseInt(010, 10) 的結果會是 8 的原因。

JavaScript2020-10-25

JS 宣告變數, var 與 let / const 差異

2019 開始學 JS 時,已經倡導使用 let / const,然而網路上資料常有 var,它們差異在哪?

Style2019-11-05

利用 clearfix 解決 float 浮動問題的三種方式

這篇文章會說明 float 遇到的問題,以及三種利用「 clear:both 」處理的解決方式。