Andy的前後端技術筆記、生活紀錄
什麼時候該git commit, commit message該如何寫?
發佈於: 2024-04-25 更新於: 2024-04-25 分類於: frontend

何時該git commit?

我一直在想到底幾時該commit,有時後在commit都會覺得怎麼這麼多程式碼,這樣會不會太雜?
是否要等到整個feature都完成後才commit?

我稍微找一下資料,可以參考以下文章G...

閱讀更多
如何不依靠Vue CLI搭建Vue專案
發佈於: 2024-04-22 更新於: 2024-04-25 分類於: frontend

Vue CLI做什麼?

在Vite還沒出來前,要建立一個 Vue 專案可以透過Vue CLI,只要下簡單的指令都幫你把專案搭建好,例如安裝Vue,跟一些相依套件, 設定好webpack config…等等

閱讀更多

VueJS設計實戰中的Imperative(命令式) vs Declarative(聲明式)以及Virtual DOM
發佈於: 2024-04-21 更新於: 2024-04-21 分類於: frontend > VueJS

VueJS設計實戰一書

先前不知道在哪個社群平台刷到有人在分享關於這本書,內容是介紹關於VueJS的設計概念,以喜歡了解更底層原理的我來說,就買來看看,重點是連Vue框架設計者Evan You都寫推薦,作者霍春陽也是Vue開發團隊的一員,這裡會是我讀完理解後的筆記,如果有興趣的人可以去買來看,描述算是輕鬆易懂,但是要有一定的熟悉VueJS、Javascript的基礎知識,不然可能還是不知道他在講什麼。<...

閱讀更多
Javascript事件冒泡Event Bubbling
發佈於: 2024-04-18 更新於: 2024-04-21 分類於: frontend > frontend_interview

事件冒泡Event Bubbling

事件冒泡是DOM中對事件處理的一種機制。
當在DOM中的某個元素(例如,一個按鈕)發生事件(如點擊)時,這個事件不僅在該元素上觸發,還會沿著DOM樹向上冒泡,依次觸發其父元素、父元素的父元素,一直到最頂層的document物件,這一路上的元素都可以收到事件觸發。

例子:假設你希望在一個容器(div)內的所...

閱讀更多
Javascript 的 hoisting關於var,let,const and function
發佈於: 2024-04-17 更新於: 2024-04-21 分類於: frontend > frontend_interview

什麼是Hoisting(提升)

當js在編譯時會把變數宣告以及函式宣告提升到該作用域的最頂端,但實際上不會去改動程式碼,有時候在撰寫程式碼時有沒有發現雖然你的function宣告在後面,卻在前面使用function而不會跳錯,就是這個原因

閱讀更多
Javascript的Event Loop以及Micro task, Macro task是如何運作的?
發佈於: 2024-04-16 更新於: 2024-04-21 分類於: frontend > frontend_interview

Event loop是什麼?

在javascript的設計中,javascript runtime是以single Thread單執行在執行程式碼,也就是說程式會順序的執行程式碼,而Javascript 透過 Event Loop 讓程式可以異步執行,也就是I/O存取、setTimeout、長時間操作(遠端資料請求),讓使用者不用在順序執行的程式流一直在等待,那這些在被執行完...

閱讀更多
Javascript中使用structuredClone做深拷貝
發佈於: 2024-04-16 更新於: 2024-04-21 分類於: frontend > frontend_interview

深拷貝是什麼?

先前有寫過如何處理深拷貝,深拷貝是要幹嘛?
簡單的說就是當有個物件他裡面有巢狀結構,不只有一層,如果直接以變數assign的方式賦值給一個新的變數,這時候在第二層開始的元素會是指向原先的物件,所以當使用者在對新的物件第二層的元素操作時就會修改到舊有的物件的值,這時候就需要深拷貝來處理,詳細請參閱👇

閱讀更多

Javascript建構子函式繼承及ES6的class方式的繼承
發佈於: 2024-04-14 更新於: 2024-04-21 分類於: frontend > frontend_interview

如何以建構函式的方式達到繼承

繼承在OOP物件導向的語言中很常見,而在Javascript中並不是真正的物件導向的語言,所以在Javascript中繼承的方式就不一樣,這裡用建構子函式的方式來實作繼承。

建構子函式的繼承

閱讀更多
Javascript的Map及Set
發佈於: 2024-04-11 更新於: 2024-04-21 分類於: frontend > frontend_interview

Set是什麼?

Set 是一個構造函式可以建構一個如Array的資料集合,有個特別的地方是,如果傳入的值相同,會把多餘的值移除只剩下一個。

1
2
3
4
5
6
const array1 = [5,6,7,8,9,10]
const array2 = [9,10,11,12,13,14]

const set1 = new Set([...array1,...array2])
console.log(set1)
// Set(5,6,7,8,9,10,11,12,13,14)
閱讀更多
建構子函式constructor_function
發佈於: 2024-04-08 更新於: 2024-04-21 分類於: frontend > frontend_interview

什麼是 constructor function建構子函式

建構子函式是一個由普通函式與new關鍵字組合而成的函式,而該函式就像是一個藍圖一樣,要透過new關鍵字才能建立一個真正的instance(object)。
其主要用途是用於建立物件,而非一般的函式。

而建構子函示

閱讀更多