原创 瀏覽器的迴流與重繪 (Reflow & Repaint)
寫在前面 在討論迴流與重繪之前，我們要知道： 瀏覽器使用流式佈局模型 (Flow Based Layout)。 瀏覽器會把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合併就產生了Render Tree。 有了Rend
2020-07-02 19:32:10
原创 【React深入】從Mixin到HOC再到Hook（原創）
導讀 前端發展速度非常之快，頁面和組件變得越來越複雜，如何更好的實現 狀態邏輯複用一直都是應用程序中重要的一部分，這直接關係着應用程序的質量以及維護的難易程度。 本文介紹了 React採用的三種實現 狀態邏輯複用的技術，並分析了他們的實現
2020-07-02 19:32:10
3
原创 編寫一個簡單的JavaScript模板引擎
隨着Nodejs的流行，JavaScript在前端和後端都開始流行起來。有許多成熟的JavaScript模板引擎，例如Swig，既可以用在後端，又可以用在前端。 不過很多時候，前端模板僅僅需要簡單地創建一個HTML片段，用Swig這種全功
2020-07-02 19:32:10
原创 耽誤你的十分鐘，讓MVVM原理還給你
時間在嘀嗒嘀嗒的走着 既然來了就繼續看看吧 這篇文章其實沒有什麼鳥用，只不過對於現在的前端面試而言，已經是一個被問煩了的考點了 既然是考點，那麼我就想簡簡單單的來給大家劃一下重點 衆所周知當下是MVVM盛行的時代，從早期的Angular到
2020-07-02 19:32:10
原创 JSBridge 介紹及實現原理
JSBridge 介紹 JSBridge是一座用JavaScript搭建起來的橋，一端是web，一端是native。我們搭建這座橋的目的也很簡單，讓native可以調用web的js代碼，讓web可以 “調用” 原生的代碼。 實現原理 An
2020-07-02 19:32:10
原创 深度精讀:瀏覽器渲染原理 - [8000字圖文並茂]
在我們面試過程中，面試官經常會問到這麼一個問題，那就是從在瀏覽器地址欄中輸入URL到頁面顯示，瀏覽器到底發生了什麼？這個問題看起來是老生常談，但是這個問題回答的好壞，確實可以很好的反映出面試者知識的廣度和深度。 本文從瀏覽器角度來告訴你，
2020-07-02 19:32:10
原创 redux原理解析，看這篇就夠了
Redux是JavaScript狀態容器，提供可預測化的狀態管理。 在實際開發中，常搭配React + React-redux使用。這代表了目前前端開發的一個基本理念，數據和視圖的分離。redux應運而生，當然還有其他的一些狀態管理庫，如
2020-07-02 19:32:10
2
原创 React 源碼剖析系列 － 生命週期的管理藝術
前言 React 的主要思想是通過構建可複用組件來構建用戶界面。所謂組件其實就是 有限狀態機，通過狀態渲染對應的界面，且每個組件都有自己的生命週期，它規定了組件的狀態和方法需要在哪個階段進行改變和執行。 有限狀態機（FSM），表示有限個狀
2020-07-02 19:32:10
原创 【React深入】深入分析虛擬DOM的渲染過程和特性
導讀 React的虛擬 DOM和 Diff算法是 React的非常重要的核心特性，這部分源碼也非常複雜，理解這部分知識的原理對更深入的掌握 React是非常必要的。 本來想將虛擬 DOM和 Diff算法放到一篇文章，寫完虛擬 DOM發現文
2020-07-02 19:32:10
1
原创 overflow:hidden屬性導致樣式錯位
問題如題。原因： 當改變overflow屬性的時候會生成一個新的box，而默認的vertical-align是baseline，所以會導致錯位。 解決方法:只要加任意vertical-align屬性，無論top, bottom, 還是m
2020-06-30 05:07:28
原创 前端工程師都得掌握的 webpack Loader
0. 前言 本文將 webpack 的 Loader 相關的知識點整理了一下，部分文字是從官方文檔中直接摘錄過來的，並附上自己的理解。如果覺得看起來和官方文檔差不多，直接看官方文檔最好啦~ webpack Loaders Loader a
2020-06-23 07:07:39
原创 Object.assign 原理及其實現
引言 上篇文章介紹了賦值、淺拷貝和深拷貝，其中介紹了很多賦值和淺拷貝的相關知識以及兩者區別，限於篇幅只介紹了一種常用深拷貝方案。 本篇文章會先介紹淺拷貝 Object.assign 的實現原理，然後帶你手動實現一個淺拷貝，並在文末留下一道
2020-06-23 07:07:39
原创 深度解析bind原理、使用場景及模擬實現
bind() bind() 方法會創建一個新函數，當這個新函數被調用時，它的 this 值是傳遞給 bind() 的第一個參數，傳入bind方法的第二個以及以後的參數加上綁定函數運行時本身的參數按照順序作爲原函數的參數來調用原函數。bi
2020-06-23 07:07:38
原创 詳細解析賦值、淺拷貝和深拷貝的區別
一、賦值（Copy） 賦值是將某一數值或對象賦給某個變量的過程，分爲下面 2 部分 基本數據類型：賦值，賦值之後兩個變量互不影響 引用數據類型：賦址，兩個變量具有相同的引用，指向同一個對象，相互之間有影響 對基本類型進行賦值操作，兩個變量
2020-06-23 07:07:38
原创 深度解析 call 和 apply 原理、使用場景及實現
call() 和 apply() call() 方法調用一個函數, 其具有一個指定的 this 值和分別地提供的參數(參數的列表)。 call() 和 apply()的區別在於，call()方法接受的是若干個參數的列表，而apply(
2020-06-23 07:07:38