原创 JavaScript進階（三十六）：如何拆解一個表達式（一）
這篇博客，我們繼續。 首先，別的我們不管，在這個組件第一次剛剛創建出來的時候，我們要不要做一個初始的渲染？肯定是要的。 所以，我們需要一開始的時候，就來調用一次 render，代表初始渲染： 然後接下來，我們的問題就變成了，這個 ren
2020-07-08 03:40:59
3
原创 JavaScript進階（三十八）：如何拆解一個表達式（三）
上篇博客，我們得到表達式的內容了，那麼接下來我們想幹什麼？是不是想把挑出來的這段表達式，給它解析了呀？ 我們在之前的博客中也有做過，用的是 eval。 首先肯定一點，其實也沒什麼特別高明的辦法，要麼 eval，要麼就 function，就
2020-07-08 03:40:59
3
原创 JavaScript進階（三十七）：如何拆解一個表達式（二）
上篇博客，我們已經知道如何來拆解一個表達式，那麼接下來，我們就來正式的開始。 首先，我們需要先幹什麼？ 我需要先找到兩個左方括號 [[ 出現的地方，從這開始，正式往下做。 所以這時候，我們需要做一個事： indexOf 有兩個參數： 第
2020-07-08 03:40:59
2
原创 JavaScript進階（三十二）：如何把真實的 DOM 抽象成虛擬 DOM 樹（二）
上篇博客中，我們的 VText 還沒開始，這裏我們繼續。 那麼實際上來說，對於一個 VText，你覺得我關心的是啥？我關心的是字。 所以在這個時候，我身上的屬性就一個東西 _text，那麼它的值就是對應文本節點的 data： 那麼這時候
2020-07-04 12:08:53
2
原创 JavaScript進階（三十三）：如何把真實的 DOM 抽象成虛擬 DOM 樹（三）
這篇博客，我們來完善下獲取指令的方法 createDirectives。 然後，從我們獲取的 attributes ，全都一視同仁嗎？不是的，有些東西就是特殊。 所以我們的第一步，得先判斷下，它是不是一個指令。 這個很簡單，因爲是有標準的
2020-07-04 12:08:53
1
原创 JavaScript進階（三十五）：編譯的準備工作
上篇博客，我們已經完成了最基本的抽象虛擬 DOM 樹。所以接下來，我們剩下要做的事，就變的非常的簡單了。 我們先把一些其他的東西來考慮考慮。 首先，現在我的這些節點，全是死的，這肯定不行呀。我需要做什麼呀？我需要它們能夠編譯。 所以說白了
2020-07-04 12:08:53
1
原创 JavaScript進階（三十四）：如何把真實的 DOM 抽象成虛擬 DOM 樹（四）
接下來，我們再來把 listeners 給做完。 首先，這個 listeners，我們是從原始的那個 attributes 裏面去挑，還是從 directives 裏面去挑？ 肯定是從 directives 上面挑，因爲它已經替我們挑過一
2020-07-04 12:08:53
1
原创 JavaScript進階（三十一）：如何把真實的 DOM 抽象成虛擬 DOM 樹（一）
上篇博客，我們做了一些準備工作，接下來，我現在就想要一個東西： 我希望這個 VNode，可以用它來描述我現在的這個 div#root 那麼在這時候，我們就要考慮一個事：我的 VNode，需不需要某種參數？需要。 因爲所有的虛擬節點，你不
2020-07-04 12:08:53
1
原创 JavaScript進階（三十）：理解虛擬 DOM
這裏我們就來說一說虛擬 DOM 這個東西，首先我們必須得先把它的概念弄明白了，那麼先說下我是怎麼理解虛擬 DOM 的。 虛擬 DOM 它跟我們別的東西不太一樣，比方說，我們在 js 裏面寫一個類，不用想，就是 class，只要你用的是 E
2020-06-29 23:21:43
1
原创 JavaScript進階（十九）：proxy 的應用（二）
這篇博客，我們就把這個 proxy 給真正的用起來。 我們先看下原來的 HotList： 我們一直來回折騰這個東西，倒不是因爲別的，而是因爲這個東西足夠簡單，足夠支撐我們很多東西。 那麼現在這時候，我們就稍微的把它改一改，我們直接在 d
2020-06-16 05:38:34
1
原创 React基礎（五）：事件，狀態
首先，我們要說的就是組件的事件。 事件我們都懂，就是點擊一下，鼠標移入，鍵盤按一下，這些都算事件。那麼在 React 裏面，組件的事件要怎麼用？ 首先，我們先準備一個組件： 然後我們希望在點擊按鈕的時候，a 能夠自加一，那麼應該怎麼給它
2020-06-16 05:38:34
原创 JavaScript進階（二十六）：DOM 的編譯（一）
經過前面的幾篇博客，相信到現在爲止，一些 DOM 的基本操作是沒問題的，那麼接下來就要做點事了，我們來嘗試着去編譯真實的 DOM 節點。 什麼叫編譯？很簡單。 第一，我要把這個真實存在的元素，變成一個我自己的虛擬 DOM 元素。 第二，我
2020-06-16 05:38:34
1
原创 JavaScript進階（二十九）：DOM 的編譯（四）
如果只是到這爲止，相信大家並不會滿足，因爲這裏面還有很多的問題，那麼我們就再進一步。 現在我希望有個按鈕，可以自定義事件： vue 裏面用的是 @，當然，我們也一定非得用 @ 嗎？ 隨便，什麼都行，只不過我們現在暫時先用這個，畢竟看着習
2020-06-16 05:38:34
1
原创 JavaScript進階（二十一）：父子節點，節點類型，document
這裏我們開始說一些有關於 DOM 節點相關的一些事。 節點這個東西很簡單，我們也叫它標籤，平常我們用的 div，span 這些東西，都是節點。 當然，在這過程當中，節點它其實有很多很多的關係，遠的我們不說，就說一近的。 比如，現在有一個
2020-06-16 05:38:34
1
原创 React基礎（四）：組件輸出，爲什麼要用 key
上一篇博客中，我們講過花括號 { }，其實花括號 { } 不僅能輸出數據，也能直接輸出組件。 比如，我們一般寫組件都是這樣用的： 我們也可以把 Cmp1 這個組件，直接的放到一個變量裏面： 並且，花括號 { } 不僅可以輸出組件，還可
2020-06-16 05:38:34