原创 JavaScript：實現call、apply和bind方法
實現call方法 call() 方法使用一個指定的 this 值和單獨給出的一個或多個參數來調用一個函數。 語法：function.call(thisArg, arg1, arg2, ...) call()的原理比較簡單，首先要明確函
2020-07-07 12:13:05
1
原创 JavaScript：模擬實現new
模擬實現new 首先我們要知道new做了什麼 創建一個新對象，並繼承其構造函數的prototype，這一步是爲了繼承構造函數原型上的屬性和方法 執行構造函數，方法內的this被指定爲該新實例，這一步是爲了執行構造函數內的賦值操作 返回新實
2020-07-03 15:44:16
1
原创 async、await、promise使用小例子
function doubleAfter2seconds(num) { return new Promise((resolve, reject) => { setTimeout(() => {
2020-06-19 17:18:23
原创 React：詳解生命週期函數-v16.3生命週期函數
最近項目在使用React，所以準備寫一些關於react的博文，方便學習和鞏固。 本文將會詳細講述 v16.3 的生命週期函數，react在v16.3版本後對生命週期函數進行了較大的更新，但大部分團隊不見得會跟進升到v16.3版本，所以v1
2020-06-19 17:18:23
原创 Vue自定義混入mixin的使用
Vue提供了一種非常靈活的開發方式：混入 (mixin) ，它用來分發 Vue 組件中的可複用功能，一個混入對象可以包含任意組件選項，例如：created、methods、data、directives等等。當組件使用混入對象時，所有混入
2020-06-19 17:18:23
原创 將一段HTML轉爲虛擬DOM再渲染到瀏覽器上-模擬Vue中的template模板標籤
在我的上一篇文章中，很清晰的講述瞭如何實現虛擬DOM，實現完了以後我就想到了在Vue當中，有template這個模板標籤，我們在真實開發中，不可能是像寫虛擬DOM那樣去描述一個頁面的UI結構，我們還是希望寫的是正常的HTML代碼，這樣纔能
2020-06-19 17:18:23
原创 詳述Vue自定義指令
在 Vue 中我們除了可以使用核心功能默認內置的指令 (v-model 和 v-show)之外，Vue 同樣也允許我們註冊自定義指令。注意，在 Vue2.0 中，代碼複用和抽象的主要形式是組件。然而，有的情況下，我們仍然需要對普通 DOM
2020-06-19 11:18:16
原创 簡述從URL輸入到頁面展現發生了什麼
簡述 簡單來說，發生了三件事情 瀏覽器將請求發送到服務器 服務器根據請求返回對應的內容 瀏覽器將返回的內容解析成我們所見的頁面 面試的時候有些面試官會問這個問題，可按如下流程作答： 1、首先，在瀏覽器地址欄中輸入url 2、瀏覽器先查看瀏
2020-06-19 11:18:16
原创 如何實現Virtual DOM
前言 前端開發者都知道，在網頁中瀏覽器資源開銷最大的便是DOM節點渲染了，DOM很慢並且非常龐大，網頁性能問題大多數都是由JavaScript修改DOM所引起的，網頁的重排、重繪都非常的消耗瀏覽器性能。重排、重繪的次數越多，我們的應用程序
2020-06-19 10:05:01
原创 瀏覽器事件機制-事件委託
瀏覽器事件機制講的也是 JavaScript 事件流，JS事件執行的整個過程分爲三個階段： 事件捕獲階段 事件目標處理函數 事件冒泡 1.捕獲（Capture）階段是事件對象 event object 從 window 派發到目標對象
2020-06-19 09:05:06
1
原创 JavaScript：事件循環機制-宏任務微任務
前面的話 本文將詳細介紹javascript中的事件循環event-loop，目標是讓你徹底弄懂JavaScript的執行機制。 不論是在你面試求職，或是日常開發工作中，我們經常會遇到這樣的情況：給定的幾行代碼，我們需要知道其輸出內容和順
2020-06-19 09:05:06
原创 Vue源碼：計算屬性的實現原理
在Vue中有一個計算屬性，只要在它的函數裏引用了 data 中的某個屬性，當這個屬性發生變化時，函數就可以嗅探到這個變化，並自動重新執行。 Vue 怎麼知道計算屬性在函數中引用了哪個 data 屬性？這個函數又是怎麼知道 data 屬性
2020-06-19 09:05:06
原创 React：詳解生命週期函數-v16.0前的生命週期函數
最近項目在使用React，所以準備寫一些關於react的博文，方便學習和鞏固。 本文將會詳細講述react的生命週期函數，react在v16版本後對生命週期函數進行了較大的更新，但大部分團隊不見得會跟進升到16版本，所以16前的生命週期還
2020-06-19 09:05:06
原创 最常使用的Vue標籤 教你 v-slot 插槽的作用與使用
在Vue的官方文檔中，關於v-slot插槽的使用，介紹的不是非常清晰明確，插槽這個東西其實很好理解，當我們定義了一個Vue組件後，我們是不能在調用組件時在裏面再定義其它的dom結構的： <submit-button> <div>Sa
2020-06-19 09:05:06
原创 詳解EventTarget.addEventListener事件註冊方法
EventTarget.addEventListener() 方法將指定的監聽器註冊到 EventTarget 上，當該對象觸發指定的事件時，指定的回調函數就會被執行。 事件目標可以是一個文檔上的元素 Element,Document和W
2020-06-19 09:04:56