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

這是一個(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é):這里會(huì)創(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)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. PHP使用Swagger生成好看的API文檔2. ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條3. Python3 json模塊之編碼解碼方法講解4. Python 制作查詢商品歷史價(jià)格的小工具5. Python 如何調(diào)試程序崩潰錯(cuò)誤6. Python 利用Entrez庫篩選下載PubMed文獻(xiàn)摘要的示例7. ASP基礎(chǔ)知識(shí)VBScript基本元素講解8. python使用jenkins發(fā)送企業(yè)微信通知的實(shí)現(xiàn)9. Python sublime安裝及配置過程詳解10. Python 合并拼接字符串的方法

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