基于snabbdom的diff算法的学习笔记-02patch函数和一些基本概念

最新推荐文章于 2024-09-14 21:53:48 发布

weixin_45789779

最新推荐文章于 2024-09-14 21:53:48 发布

阅读量179

点赞数 10

文章标签：学习笔记 javascript vue.js

本文链接：https://blog.csdn.net/weixin_45789779/article/details/140787591

版权

patch函数和一些基本概念

一、基本概念

概述

常见的patch函数的调用: 调用结果是初始化在视图上，vnode生成的DOM树替换container；用户点击按钮，vnode1生成的DOM替换vnode生成的DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 定位符 -->
    <div id="container"></div>
    <!-- 操作btn -->
    <button id='btn'>update</button>
</body>
<script src="/bundle.js"></script>
</html>

import h from './mysnabbdom/h'
import patch from './mysnabbdom/patch'

const container = document.getElementById('container')
const vnode = h('ul', {}, [
   h('li', { key: 'A'}, '我是A'),
   h('li', { key: 'B'}, '我是B'),
   h('li', { key: 'C'}, '我是C'),
])
patch(container, vnode)

// 初始化end
const vnode1 = h('h1', {}, '我是一个标题')
const btn = document.getElementById('btn')
btn.onclick = () => {
    patch(vnode, vnode1)
}

初始化页面视图

同一节点

简化版本判断是否是同一节点：当虚拟节点标签相同且key值相同时我们就认为这两个节点为同一节点

function checkSameVnode(a, b) {
    return a.sel === b.sel && a.key === b.key
}

二、patch函数基本流程

流程图

在这里插入图片描述

代码展示

// patch.js
import vnode from "./vnode";
import createElement from "./createElement";
// 更新节点函数，下一篇文档介绍
import patchVnode from "./patchVnode";
export default function(oldVnode, newVnode) {
    // 判断传入节点是DOM节点还是虚拟节点
    if (oldVnode.sel === '' || oldVnode.sel === undefined) {
        // DOM节点-->包装为虚拟节点
        oldVnode = vnode(oldVnode.tagName.toLowerCase(), {}, [], '', oldVnode)
    }
    // 判断oldVnode和newVnode是否是同一节点
    if (checkSameVnode(oldVnode, newVnode)) {
        // 是同一个节点
        patchVnode(oldVnode, newVnode)
    } else {
        // 不是同一个节点 -> 暴力插入新节点，删除旧节点
        console.log('不是同一个节点')
        let newVnodeElm = createElement(newVnode)
        if (oldVnode.elm.parentElement && newVnodeElm) {
            oldVnode.elm.parentElement.insertBefore(newVnodeElm, oldVnode.elm)
            oldVnode.elm.parentElement.removeChild(oldVnode.elm)
        }
        
    }
}