第 10 頁

眼睛符號

watch 與 useWatch 在 react hook form 中的差異

特別記錄下來,這是 React Hook Form 中非常相近的方法:watch 與 useWatch 的差異比較與說明,就連我在第一次理解他們的時候也被搞混了,這裡製作了一些可以互動的實際範例讓你馬上體會到它們之間的差異。

雙箭頭符號

為什麼你需要箭頭函式?

JavaScript 箭頭函式是 ES6 版本中新增的語法,能夠簡潔明瞭地定義函式,並且已經被廣泛的使用當中。於本篇文章中我們將會學習如何使用箭頭函式來簡化程式碼,並且了解這個語法的特性以及要注意的地方,以及它可以被使用在那些場合當中。

箭頭符號

從實例了解 useRef 的使用情境

React useRef 與一般定義變數差在哪?我決定把他們詳細的比較寫在這篇文章中。簡單來說 useRef 是一個 React Hook 可以讓你參考一個值並不會受到 React 的重新渲染影響,透過實際代碼操作範例來理解它與類似的 useState 還有一般變數的差異。

魔力大法師符號

助教統整 n 個方法幫助你寫出更好的代碼

我相信撰寫程式並沒有絕對的準則,但絕對有些常見可以權衡留意的地方。這篇文章記錄著作為助教在檢閱不同人寫的代碼的時候,留意到的一些潛在的問題……本篇文章主要是經驗的濃縮,如果要詳細的撰寫建議可以參考看看無瑕的程式碼,會有更全面的說明與案例。

方框上有代碼的符號

不要再使用 == 了,改使用 === 吧!

絕大多數時候你不會想要使用「鬆散比對」,嘗試使用「嚴謹的比對」將程式撰寫得嚴謹精確一些。在絕大多數的情況下,你不會想要使用鬆散比對,但是在某些情況下,可能會使用它會更為便利,本篇文章將介紹相關取捨,以及你可以在什麼時候使用不同的比較方式。

人被圓圈守護符號

使用 Guard Clauses 迴避嵌套的流程判斷來增進閱讀性

如果你需要大於 3 層的嵌套,代表你已經搞砸了,應當考慮重構程式碼,應當透過反轉與封裝程式來重構邏輯。這篇文章將詳細的介紹現有問題以及使用 Guard Clauses 技巧撰寫更好閱讀的代碼,也就是透過反轉邏輯的技巧來撰寫更少嵌套邏輯的程式。

文字片段與放大鏡符號

JavaScript 五個步驟製作搜尋功能

搜尋列是普遍存儲資料於 HTML 中最常用的方式之一,讓我們學會如何使用它。本篇文章將會練習從無到有包含介面製作一個搜尋框,可以輸入結果並比對現有資料顯示關聯的內容,是一個非常適合 JavaScript 新手的一道實用練習題目。

+1符號

JavaScript 五個步驟製作計數器

計數器是入門各大框架基本會見到的習題,可以說是任何 App 最低限度的功能展示。這次使用原生的 JavaScript 來重現該題目,並且一步一步的思考並改善結果,本篇文章將會練習製作一個具備加、減、重製功能的 JavaScript 計數器。

一條線和一顆球的符號

從動圖輕鬆學會撰寫非同步 JavaScript(第二章)

上一章節從動圖理解了非同步的概念,這一章節將會介紹如何撰寫非同步程式。從簡單的回呼函式到 Promise 再到使用 Async/Await 語法。目前知道非同步的程式實際上是透過執行環境(瀏覽器、Node.js) 所提供的 API 來達成同時間處理多件事情的。

縮小的方框符號

從動圖輕鬆解題:防抖與節流

防抖與節流是前端效能主題中必定會出現的模式,對用戶的輸入進行適當的防抖與節流處理,除了有助於提升使用者體驗之外,對開發者來說也節省掉許多潛在的資源浪費,透過實際案例還有動畫圖片一起來了解防抖與節流如何幫助我們提升程式效率。

一條線和一顆球的符號

從動圖輕鬆入門非同步 JavaScript(第一章)

了解單線程的 JavaScript 背後如何運作、併發處理事件背後的奧妙、拆解晦澀難懂的專有名詞。瀏覽器執行環境中的 JavaScript 是單線程的,也就是一次只能執行一件事,如此一來其他事情就都會被擱置在後,讓使用者等待。這是非常大的問題,但解決方法也非常的簡單:「不要呆呆站在那裏等!」。

打勾圓框符號

JavaScript 五個步驟製作代辦事項

代辦事項是非常常見的習題,其中需求含括了增、刪、讀、改資料,充分的模擬到未來在操縱資料時會碰上的各種情境與問題。可以說各式各樣的軟體都是一種客製化的代辦事項,透過製作代辦事項足以熟悉編寫應用的方方面面,跟著步驟寫一次來練習基本的應用撰寫。

碼表符號

非同步 JavaScript 時間操縱之術: setTimeout 與 setInterval

在介紹到同步與非同步代碼時,常常會以 setTimeout 或 setInterval 來模擬程式被非同步執行的狀況,這兩種「方法」都不算是 JavaScript 的一部分,不過大多主流執行環境都有提供 (瀏覽器、Node.js),是很好練習非同步處理 JavaScript 的起點,本文將會詳細講解其背後的故事與原理。

標籤符號

為什麼你應該要使用資料屬性 data-*

HTML 元素可以擁有自己的屬性,用於表達各種類的資訊,像是從外觀樣式到無障礙資訊到各式各樣的預設屬性,而 data 屬性是一個正式存儲資料於 HTML 元素的屬性,將資訊儲存在 HTML 標籤屬性上,使 JavaScript 與 CSS 都能讀取得到元素的資料。