看下面截圖

這是一個(gè)普通的html文件，也并沒有引入vue.js，是不是在代碼中看到有些熟悉的地方？比如："v-model","v-on:click"，還有常用的“雙花括號{{}}”賦值語句。

首先說一下實(shí)現(xiàn)雙向綁定的思路：

一、創(chuàng)建一個(gè)自定義vue js對象，例如上面的wslVue 對象，初始化方法里面需要的參數(shù)有：（1）需要掛載到的dom對象id、（2）自定義vue對象的data屬性（json對象）、（3）后面添加了一個(gè)模擬掛載的方法。（這里有用的就是（1）、（2）參數(shù)，（3）參數(shù)可以當(dāng)認(rèn)為vue對象所有的初始化工作完成后可以進(jìn)行渲染（掛載）了方法回調(diào)）。

二、重寫vue屬性data json對象的set、get方法，同時(shí)可以為vue對象添加data下的所有屬性，重寫vue生成屬性的set、get方法，方法里直接執(zhí)行data的set、get方法（目的是可以直接用vue對象屬性的讀寫進(jìn)行dom操作）。

三、解析html，將html里面的標(biāo)簽node、文本node進(jìn)行特定重組（這里說的特定重組指的就是將vue指令，{{}} 賦值符號轉(zhuǎn)換為正常的html文檔進(jìn)行輸出），在解析過程中對每一個(gè)需要操作的node進(jìn)行緩存、綁定邏輯、添加監(jiān)聽事件（比如：input標(biāo)簽輸入）。

再說一下實(shí)現(xiàn)這些功能的js主要的方法有哪些：

一、js對象屬性的set、get方法。

二、document.createDocumentFragment html片段解析。

三、相關(guān)的正則判斷進(jìn)行html代碼片段重組。

最后需要?jiǎng)?chuàng)建哪些工具類？

一、vue對象。

二、觀察者類Watcher，保存需要操作的node節(jié)點(diǎn)和屬性變更需要做的回調(diào)方法。

三、管理所有觀察者Watcher的管理類Dep，控制數(shù)據(jù)變更相關(guān)Watcher進(jìn)行回調(diào)渲染。

實(shí)現(xiàn)vue雙向綁定

初始化vue對象方法

注釋：

1：為vue對象添加data里全部的屬性，并重寫set、get方法。

2：為vue對象添加方法管理methods對象，當(dāng)解析html獲取到v-on:click方法的時(shí)候?yàn)闃?biāo)簽添加click事件方法體。

3：這里進(jìn)行解析html，解析時(shí)遇到需要處理的node時(shí)創(chuàng)建Watcher對象，將相關(guān)node及指令保存在Watcher對象里，并把Watcher對象添加到觀察者管理類Dep集合里面。

4：初始化完成后進(jìn)行掛載，渲染完整的html到指定的dom元素上。

Compile類解析需要掛載對應(yīng)的dom

獲取全部的node節(jié)點(diǎn)

解析特定指令

標(biāo)簽元素與文本內(nèi)容判斷

這里如果是標(biāo)簽node需要解析里面的v-on和v-model指令

v-model

v-on:click

紅線處即為vue對象里methods匹配出來的方法，為當(dāng)前的node添加點(diǎn)擊事件。

這里如果是文本內(nèi)容node需要解析里面的{{}}指令。

總結(jié)：這里會創(chuàng)建很多Watcher對象，對象保存了當(dāng)前vue對象、node、數(shù)據(jù)變更回調(diào)，并保存在Dep管理類里，以待數(shù)據(jù)變更時(shí)直接執(zhí)行方法回調(diào)進(jìn)行渲染。

特定指令判斷

Watcher及Dep對象

最后放一張思維導(dǎo)圖

結(jié)尾：到這里基本的思路就講完了，沒有太復(fù)雜的邏輯，表達(dá)能力有限。希望對大家能有幫助，同時(shí)也接受大神們的批評指正，共同進(jìn)步。

以上就是純JS如何實(shí)現(xiàn)vue.js下的雙向綁定功能的詳細(xì)內(nèi)容，更多關(guān)于JS實(shí)現(xiàn)vue的雙向綁定的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論