【Vue原理】Event - 源碼版之綁定標(biāo)簽DOM事件

phoenixsky 發(fā)布于2019-08-23 18:35 / 599人閱讀

摘要：寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟專(zhuān)注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊下面鏈接或者拉到下面關(guān)注公眾號(hào)也可以吧原理源碼版之綁定標(biāo)簽事件這里的綁定

寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟
專(zhuān)注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧
研究基于 Vue版本 【2.5.17】

如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者拉到下面關(guān)注公眾號(hào)也可以吧

【Vue原理】Event - 源碼版之綁定標(biāo)簽DOM事件

這里的綁定DOM事件，是指綁定原生標(biāo)簽的DOM 事件

因?yàn)榻M件也是可以綁定原生DOM事件的，不過(guò)并不是在原生標(biāo)簽上綁定，而是直接在組件上綁定的，這部分內(nèi)容會(huì)其他文章說(shuō)明

或者你可以看看白話版先了解下Event

【Vue原理】Event - 白話版

怎么解析

由于解析不是本內(nèi)容的重點(diǎn)，所以在這里就不談怎么解析的了，只說(shuō)一個(gè)結(jié)果就好了

現(xiàn)在有這么一個(gè)模板

模板被解析成這樣的渲染函數(shù)

渲染函數(shù)執(zhí)行之后，得到這樣的 VNode

你可以看到，事件被存放到了 vnode.data 上

Vnode 有疑惑的可以看介里

【Vue原理】VNode - 源碼版

怎么綁定

既然模板已經(jīng)被解析完成了，下一步就是開(kāi)始綁定了

好的，繼續(xù)來(lái)走流程

在 template 解析得到 Vnode 之后，下面就會(huì)進(jìn)行DOM生成掛載

而綁定事件，就發(fā)生在開(kāi)始掛載，創(chuàng)建DOM 之后的階段

掛載時(shí)從 Vue.prototype._update 這個(gè)函數(shù)開(kāi)始的

掛載的流程，可以看看這篇文章

從模板到DOM的簡(jiǎn)要流程

1、開(kāi)始掛載

VNode創(chuàng)建完畢，傳入 Vue.prototype._update 這個(gè)方法中，進(jìn)行比對(duì)新舊VNode

然后生成DOM掛載頁(yè)面

其中需要生成DOM，調(diào)用的方法是 createElm

2、創(chuàng)建DOM

創(chuàng)建DOM，在Vue 中調(diào)用的是 createElm 這個(gè)方法

看過(guò)以前的文章的，都知道這個(gè)函數(shù)的作用是

根據(jù) vnode 生成DOM，并且進(jìn)行掛載

而在 createElm 中，會(huì)調(diào)用一個(gè)函數(shù)去處理模板上相關(guān)的數(shù)據(jù)

比如處理屬性，類(lèi)名，style 之類(lèi)的，其中DOM事件也是在這里處理的

這個(gè)函數(shù)就是 invokeCreateHooks，繼續(xù)往下看

function createElm(vnode) {    

    // ....處理組件

    // ....生成標(biāo)簽對(duì)應(yīng)dom

    // ....遞歸遍歷子節(jié)點(diǎn)

    invokeCreateHooks(vnode);    

    // ....插入DOM 節(jié)點(diǎn)

}

3、處理數(shù)據(jù)

上面源碼中出現(xiàn)的 invokeCreateHooks 這個(gè)方法是用來(lái)處理數(shù)據(jù)的

每種數(shù)據(jù)（style，class等），都有一個(gè)專(zhuān)門(mén)的函數(shù)去進(jìn)行處理

而 invokeCreateHooks，就是負(fù)責(zé)執(zhí)行每種數(shù)據(jù)的處理函數(shù)，很簡(jiǎn)單，就是一個(gè)單純遍歷執(zhí)行的過(guò)程

其中就包括處理 DOM 事件的函數(shù)，便是 updateDOMListeners

function invokeCreateHooks(

    vnode

) {    

    /**

     * 執(zhí)行的函數(shù)包括下面這么多
     * cbs = [
     *  create:[
     *      updateAttrs, updateClass,
     *      updateDOMListeners, updateDOMProps,
     *      updateStyle, create, updateDirectives
     *  ]
     * ]

     **/
    for (var b = 0; b < cbs.create.length; ++b) {        

        // 其中會(huì)調(diào)用 updateDOMListeners

        // emptyNode 是空節(jié)點(diǎn)，因?yàn)檫@里是初始化才會(huì)調(diào)用的

              // 所以舊節(jié)點(diǎn)是空節(jié)點(diǎn)

        cbs.create[b](emptyNode, vnode);
    }
    ....

}

下面看下處理DOM 事件的函數(shù)

4、綁定DOM事件

簡(jiǎn)化的源碼，看起來(lái)順眼多了，主要邏輯一清二楚，主要就是綁定事件和解綁事件，你看下嘍，挺簡(jiǎn)單的

function updateDOMListeners(oldVnode, vnode) {  

    var on = vnode.data.on || {};    

    var oldOn = oldVnode.data.on || {};

    var target = vnode.elm;
    

    // 遍歷綁定的事件

    for (name in on) {

        newHandler = on[name];

        oldHandler = oldOn[name];   
     
        // 沒(méi)有舊事件，就直接添加新事件

        if (typeof oldHandler === "undefined") {
          
            // 給事件回調(diào)包裝一層

            target.addEventListener(name, function(){

                on[name]() // 執(zhí)行保存在vnode的事件

            });

        }        
        // 新事件和舊事件不一樣，替換舊事件

        else if (newHandler !== oldHandler) {
            on[name] = newHandler;
        }
    }   

    // 移除舊事件

    for (name in oldOn) {   

        // 舊事件不存在新事件中，直接移除  

        if (typeof on[name] === "undefined") {

            target.removeEventListener(
                name, oldOn[name]
            );

        }
    }

}

看看綁定函數(shù)和移除函數(shù)，就只是簡(jiǎn)單使用 addEventListener 和 removeEventListener，我沒(méi)看之前還以為 Vue 寫(xiě)了很多兼容，沒(méi)想到就是這么簡(jiǎn)單完成這個(gè)功能

有點(diǎn)驚訝，反正簡(jiǎn)單也好吧，哈哈哈，簡(jiǎn)單看著就是蘇胡啊~~

綁定邏輯很簡(jiǎn)單

1、新舊事件相同，替換舊事件

2、新事件不存在舊事件中，綁定新事件

3、舊事件不存在新事件中，解綁舊事件

其中會(huì)給回調(diào)事件函數(shù)包裝一層函數(shù)，然后在內(nèi)部執(zhí)行綁定的回調(diào)，包裝一層的原因是，為了在回調(diào)中做點(diǎn)其他操作（比如宏微任務(wù)的處理等，這里為了簡(jiǎn)單去掉了）

并且舊事件回調(diào)改了的時(shí)候，就更加方便了，不用解綁再綁定，直接把執(zhí)行的事件回調(diào) on[name]替換掉就ok了

好的，原生標(biāo)簽綁定DOM 事件到這里就完成了，希望對(duì)大家有所幫助

云服務(wù)器 GPU云服務(wù)器 js 標(biāo)簽綁定事件 event事件 js DOM事件 dom事件管理

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/105487.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

phoenixsky

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow1.12.0

閱讀 3621·2023-04-25 19:39
#黑色#ITLDC：KVM VPS年付5折 €16.49/年起，100M不限流量，多國(guó)機(jī)房可選

閱讀 3966·2021-11-18 13:12
怎么云主機(jī)里開(kāi)網(wǎng)站-云主機(jī)怎么使用？

閱讀 3750·2021-09-22 15:45
分銷(xiāo)主機(jī)是什么-代理主機(jī)名是什么？

閱讀 2557·2021-09-22 15:32
如何管理你下載的一大堆Python包【??win環(huán)境及l(fā)inux環(huán)境下創(chuàng)建虛擬環(huán)境詳解??】

閱讀 909·2021-09-04 16:40
前端面試資源整理（一）

閱讀 4027·2019-08-30 14:11
javascript新手實(shí)例1-DOM基本操作

閱讀 2008·2019-08-30 13:46
6.18快要來(lái)臨--家具電商大戰(zhàn)一觸即發(fā)

閱讀 1699·2019-08-29 15:43

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

【Vue原理】Event - 源碼版之綁定標(biāo)簽DOM事件

相關(guān)文章

**【Vue原理】Event - 源碼版之綁定組件DOM事件**

**【Vue原理】Event - 白話版**

**【Vue原理】VModel - 源碼版之表單元素綁定流程**

**【Vue原理】Event - 源碼版之綁定組件自定義事件**

**【Vue原理】Compile - 源碼版之 generate 拼接綁定的事件**

發(fā)表評(píng)論

0條評(píng)論

phoenixsky

男|高級(jí)講師

TA的文章

tensorflow1.12.0

#黑色#ITLDC：KVM VPS年付5折 €16.49/年起，100M不限流量，多國(guó)機(jī)房可選

怎么云主機(jī)里開(kāi)網(wǎng)站-云主機(jī)怎么使用？

分銷(xiāo)主機(jī)是什么-代理主機(jī)名是什么？

如何管理你下載的一大堆Python包【??win環(huán)境及l(fā)inux環(huán)境下創(chuàng)建虛擬環(huán)境詳解??】

前端面試資源整理（一）

javascript新手實(shí)例1-DOM基本操作

6.18快要來(lái)臨--家具電商大戰(zhàn)一觸即發(fā)

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

【Vue原理】Event - 源碼版 之 綁定標(biāo)簽DOM事件

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

【Vue原理】Event - 源碼版之綁定標(biāo)簽DOM事件