純JS如何實(shí)現(xiàn)vue.js下的雙向綁定功能
看下面截圖

這是一個(gè)普通的html文件,也并沒有引入vue.js,是不是在代碼中看到有些熟悉的地方?比如:'v-model','v-on:click',還有常用的“雙花括號(hào){{}}”賦值語句。
首先說一下實(shí)現(xiàn)雙向綁定的思路:一、創(chuàng)建一個(gè)自定義vue js對(duì)象,例如上面的wslVue 對(duì)象,初始化方法里面需要的參數(shù)有:(1)需要掛載到的dom對(duì)象id、(2)自定義vue對(duì)象的data屬性(json對(duì)象)、(3)后面添加了一個(gè)模擬掛載的方法。(這里有用的就是(1)、(2)參數(shù),(3)參數(shù)可以當(dāng)認(rèn)為vue對(duì)象所有的初始化工作完成后可以進(jìn)行渲染(掛載)了方法回調(diào))。
二、重寫vue屬性data json對(duì)象的set、get方法,同時(shí)可以為vue對(duì)象添加data下的所有屬性,重寫vue生成屬性的set、get方法,方法里直接執(zhí)行data的set、get方法(目的是可以直接用vue對(duì)象屬性的讀寫進(jìn)行dom操作)。
三、解析html,將html里面的標(biāo)簽node、文本node進(jìn)行特定重組(這里說的特定重組指的就是將vue指令,{{}} 賦值符號(hào)轉(zhuǎn)換為正常的html文檔進(jìn)行輸出),在解析過程中對(duì)每一個(gè)需要操作的node進(jìn)行緩存、綁定邏輯、添加監(jiān)聽事件(比如:input標(biāo)簽輸入)。
再說一下實(shí)現(xiàn)這些功能的js主要的方法有哪些:一、js對(duì)象屬性的set、get方法。
二、document.createDocumentFragment html片段解析。
三、相關(guān)的正則判斷進(jìn)行html代碼片段重組。
最后需要?jiǎng)?chuàng)建哪些工具類?一、vue對(duì)象。
二、觀察者類Watcher,保存需要操作的node節(jié)點(diǎn)和屬性變更需要做的回調(diào)方法。
三、管理所有觀察者Watcher的管理類Dep,控制數(shù)據(jù)變更相關(guān)Watcher進(jìn)行回調(diào)渲染。
實(shí)現(xiàn)vue雙向綁定初始化vue對(duì)象方法

注釋:
1:為vue對(duì)象添加data里全部的屬性,并重寫set、get方法。
2:為vue對(duì)象添加方法管理methods對(duì)象,當(dāng)解析html獲取到v-on:click方法的時(shí)候?yàn)闃?biāo)簽添加click事件方法體。
3:這里進(jìn)行解析html,解析時(shí)遇到需要處理的node時(shí)創(chuàng)建Watcher對(duì)象,將相關(guān)node及指令保存在Watcher對(duì)象里,并把Watcher對(duì)象添加到觀察者管理類Dep集合里面。
4:初始化完成后進(jìn)行掛載,渲染完整的html到指定的dom元素上。
Compile類解析需要掛載對(duì)應(yīng)的dom
獲取全部的node節(jié)點(diǎn)

解析特定指令

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

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

v-on:click

紅線處即為vue對(duì)象里methods匹配出來的方法,為當(dāng)前的node添加點(diǎn)擊事件。
這里如果是文本內(nèi)容node需要解析里面的{{}}指令。

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

Watcher及Dep對(duì)象


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

結(jié)尾:到這里基本的思路就講完了,沒有太復(fù)雜的邏輯,表達(dá)能力有限。希望對(duì)大家能有幫助,同時(shí)也接受大神們的批評(píng)指正,共同進(jìn)步。
以上就是純JS如何實(shí)現(xiàn)vue.js下的雙向綁定功能的詳細(xì)內(nèi)容,更多關(guān)于JS實(shí)現(xiàn)vue的雙向綁定的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. Docker 部署 Prometheus的安裝詳細(xì)教程2. IntelliJ IDEA安裝插件的方法步驟3. idea給項(xiàng)目打war包的方法步驟4. IntelliJ IDEA設(shè)置背景圖片的方法步驟5. idea 打包的jar運(yùn)行報(bào) "XXX中沒有主清單屬性"6. idea重置默認(rèn)配置的方法步驟7. IntelliJ IDEA設(shè)置自動(dòng)提示功能快捷鍵的方法8. idea設(shè)置代碼格式化的方法步驟9. idea打開多個(gè)窗口的操作方法10. IntelliJ IDEA調(diào)整字體大小的方法

網(wǎng)公網(wǎng)安備