手写diff算法

最新推荐文章于 2024-04-05 08:23:26 发布
最新推荐文章于 2024-04-05 08:23:26 发布
阅读量447 收藏 1
点赞数
分类专栏： 笔记 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/belle_mei/article/details/120302882
版权

环境搭建

  • 创建一个文件夹，来到文件夹目录下，使用npm init -y 生成package.json文件。
    下载webpack、webpack-cli、webpack-dev-server，这里需要特别注意的是webpack的各个版本。
    下载对应的版本
cnpm i webpack@5 webpack-cli@3 webpack-dev-server@3 -S
  • 创建webpack.config.js文件
module.exports = {
    entry: {
        index: './src/index.js'
    },
    output: {
        path: __dirname + '/public',
        filename: './js/[name].js'
    },
    devServer: {
        contentBase: './public',
        inline: true
    }
}
  • 根据webpack.config.js文件的内容创建相应的文件
    创建完成之后的文件目录
    在这里插入图片描述
  • 在index.html文件中引入js文件
    在这里插入图片描述
  • 运行程序
    需要在package.json文件中加入运行命令
{
  "name": "diff",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^5.52.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  }
}
  • 运行程序
    npm run dev

创建h函数

  • 在src下新建文件夹dom，新建文件h.js
import vnode from './vnode'
export default function(sel, data, params) {
    // console.log(sel, data, params)
    // 没有子元素的情况
    if(typeof params === 'string') {
        return vnode(sel, data, undefined, params, undefined)
    } else if(Array.isArray(params)) { // 有子元素的情况
        let children = []
        for(let item of params) {
            children.push(item)
        }
        return vnode(sel, data, children, undefined, undefined)
    }
}
  • 在dom文件夹下新建vnode.js，该函数的作用是将真实dom转化为虚拟dom
export default function(sel, data, children, text, elm) {
    /**
     * sel: 虚拟dom
     * data: key
     * children： 子元素
     * text: 文本内容
     * elm: 真实dom
     */

    return {
        sel,
       data,
       children,
       text,
       elm
    }
}
  • 在index.js向创建虚拟dom
import h from './dom/h'

let vnode1 = h("div", {}, "你好呀");
console.log(vnode1)

let vnode2 = h("ul", {}, [
    h("li", {}, "a"),
    h("li", {}, "b"),
    h("li", {}, "c"),
    h("li", {}, "d"),
    h("li", {}, "e"),
]);

console.log(vnode2)
  • 运行结果
    在这里插入图片描述

将真实的dom转为虚拟dom，然后进行新旧虚拟节点比较

  • 如果新老节点不是同一个节点名称，那么久暴力删除旧的节点，插入新的节点。
    1、在index.html下新写一个div
 <div id="container">这是container</div>

2、在index.js下获取获取到index.html下的div这个真实dom节点

// 获取真实的dom节点
const container = document.getElementById('container')

3、创建虚拟节点，将虚拟节点patch到真实dom上

// 虚拟节点
let vnode1 = h("h1", {}, "你好呀");
// console.log(vnode1)

let vnode2 = h("ul", {}, [
    h("li", {}, "a"),
    h("li", {}, "b"),
    h("li", {}, "c"),
    h("li", {}, "d"),
    h("li", {}, "e"),
]);
patch(container, vnode1)

4、新建patch.js函数，作用是将真实的dom转化为虚拟dom，然后再进行新旧虚拟dom的比较

import vnode from './vnode'
import createElement from './createElement'
/**
 * @param {*} oldVnode 旧虚拟节点
 * @param {*} newVnode 新虚拟节点
 */
export default function (oldVnode, newVnode) {
    // 如果oldVnode没有sel，则是非虚拟节点
    if (oldVnode.sel === undefined) {
        // console.log(oldVnode.tagName.toLowerCase())
        oldVnode = vnode(
            oldVnode.tagName.toLowerCase(), //虚拟节点名称
            {},
            [],
            undefined,
            oldVnode // 真实的dom元素
        )
    }
    // console.log(oldVnode)
    // 开始判断新旧虚拟节点
    if (oldVnode.sel !== newVnode.sel) { // 如果新老节点不是同一个节点名称，那么久暴力删除旧的节点，插入新的节点。
        // 把新的虚拟节点创建为真实dom节点
        let newVnodeElm = createElement(newVnode) // 在这里最好将创建真实dom写成一个函数，方便递归调用
        // console.log(newVnodeElm)
        let oldVnodeElm = oldVnode.elm
        if(newVnodeElm) {
            oldVnodeElm.parentNode.insertBefore(newVnodeElm, oldVnodeElm)
        }
        oldVnodeElm.parentNode.removeChild(oldVnodeElm)
    } else { // 是同一个节点，逻辑变复杂

    }
}

5、新建createElement.js文件，作用是将虚拟节点转化为真实节点，并挂载在真实dom上

export default function createElement (vnode) {
    let domNode = document.createElement(vnode.sel)
    // 判断有没有子节点
    if(vnode.children === undefined) {
        domNode.innerText = vnode.text
    }else if(Array.isArray(vnode.children)) {
        for(let child of vnode.children) {
            let childDom = createElement(child)
            domNode.appendChild(childDom)
        }
    }
    vnode.elm = domNode
    return domNode
}
  • 如果是相同节点，分为以下几种情况
    • （1）新节点没有children，直接替换
    • （2）新节点有children，旧的节点也有children，diff算法核心
    • （3）新节点有children，旧的没有，直接创建元素添加

新建patchVnode.js文件，判断新旧虚拟节点相同的情况

import createElement from './createElement'
export default function(oldVnode, newVnode) {
    // 判断新节点有没有子元素
    if(newVnode.children === undefined) { // 没有子元素
        if(newVnode.text !== oldVnode.text) {
            oldVnode.elm.innerText = newVnode.text
        }
    } else { // 有子元素
        // 判断旧节点有没有子元素
        if(oldVnode.children && oldVnode.children.length > 0) { // 旧节点有子元素，情况较为复杂

        } else { // 旧节点没有子元素
            oldVnode.elm.innerHTML = '' // 删掉旧节点的内容
            for(let child of newVnode.children) {
                let childDom = createElement(child)
                oldVnode.elm.appendChild(childDom)
            }
            console.log(oldVnode.elm)
        }
    }
}

patch.js文件

import vnode from './vnode'
import createElement from './createElement'
import patchVnode from './patchVnode'
/**
 * @param {*} oldVnode 旧虚拟节点
 * @param {*} newVnode 新虚拟节点
 */
export default function (oldVnode, newVnode) {
    // 如果oldVnode没有sel，则是非虚拟节点
    if (oldVnode.sel === undefined) {
        // console.log(oldVnode.tagName.toLowerCase())
        oldVnode = vnode(
            oldVnode.tagName.toLowerCase(), //虚拟节点名称
            {},
            [],
            undefined,
            oldVnode // 真实的dom元素
        )
    }
    // console.log(oldVnode)
    // 开始判断新旧虚拟节点
    if (oldVnode.sel !== newVnode.sel) { // 如果新老节点不是同一个节点名称，那么久暴力删除旧的节点，插入新的节点。
        // 把新的虚拟节点创建为真实dom节点
        let newVnodeElm = createElement(newVnode) // 在这里最好将创建真实dom写成一个函数，方便递归调用
        // console.log(newVnodeElm)
        let oldVnodeElm = oldVnode.elm
        if(newVnodeElm) {
            oldVnodeElm.parentNode.insertBefore(newVnodeElm, oldVnodeElm)
        }
        oldVnodeElm.parentNode.removeChild(oldVnodeElm)
    } else { // 是同一个节点，逻辑变复杂
        patchVnode(oldVnode, newVnode)
    }
}

index.js文件

import h from './dom/h'
import patch from './dom/patch'

// 虚拟节点
// let vnode1 = h("div", {}, "你好呀");
let vnode1 = h("div", {}, [
    h("span", {}, "a"),
    h("span", {}, "b"),
    h("span", {}, "c"),
    h("span", {}, "d"),
    h("span", {}, "e"),
]);

// 获取真实的dom节点
const container = document.getElementById('container')

patch(container, vnode1)

diff算法核心

  • 1、旧前和新前
    匹配：旧前指针++、新前指针++
  • 2、旧后和新后
    匹配：旧后指针–、新后指针–
  • 3、旧前和新后
    匹配：旧前指针++、新后指针–
  • 4、旧后和新前
    匹配：旧后指针–、新前指针++
  • 5、以上都不满足条件 ===》查找
    查找到：新的指针++，将新的指针指向的元素渲染到页面，并且将在旧的节点中找到相应的元素将其赋值为undefined
  • 6、创建或者删除
    新建updateChildren.js,作用是处理diff算法中的5种情况
import patchVnode from './patchVnode'
import createElement from './createElement'
// 判断两个虚拟节点是否为同一个节点
function sameVnode(vnode1, vnode2) {
    return vnode1.key === vnode2.key
}

/**
 * 
 * @param {*} parentElm 旧的父节点
 * @param {*} oldCh 旧的子节点
 * @param {*} newCh 新的子节点
 */
export default function(parentElm, oldCh, newCh) {
    // console.log(parentElm, oldCh, newCh)
    let oldStartIdx = 0 // 旧前指针
    let oldEndIdx = oldCh.length - 1 // 旧后指针
    let newStartIdx = 0 // 新前指针
    let newEndIdx = newCh.length - 1 // 新后指针

    let oldStartVnode = oldCh[0] // 旧前虚拟节点
    let oldEndVnode = oldCh[oldEndIdx] // 旧后虚拟节点
    let newStartVnode = newCh[0] // 新前虚拟节点
    let newEndVnode = newCh[newEndIdx] // 新后虚拟节点

    while(oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
        if(oldStartVnode === undefined) {
            oldStartVnode = oldCh[++oldStartIdx]
        }
        if(oldEndVnode === undefined) {
            oldEndVnode = oldCh[--oldEndIdx]
        }else if(sameVnode(oldStartVnode, newStartVnode)) {
            // 旧前和新前
            console.log(1)
            patchVnode(oldStartVnode, newStartVnode)
            if(newStartVnode) {
                newStartVnode.elm = oldStartVnode?.elm
            }
            oldStartVnode = oldCh[++oldStartIdx]
            newStartVnode = newCh[++newStartIdx]
        }else if(sameVnode(oldEndVnode, newEndVnode)) {
            // 旧后和新后
            console.log(2)
            patchVnode(oldEndVnode, newEndVnode)
            if(oldEndVnode) {
                newEndVnode.elm = oldEndVnode?.elm
            }
            oldEndVnode = oldCh[--oldEndIdx]
            newEndVnode = newCh[--newEndIdx]
        }else if(sameVnode(oldStartVnode, newEndVnode)) {
            // 旧前和新后
            console.log(3)
            patchVnode(oldStartVnode, newEndVnode)
            if(oldStartVnode) {
                newEndVnode.elm = oldStartVnode?.elm
            }
            // 把旧前指定的节点移动到旧后指向的节点的后面
            parentElm.insertBefore( oldStartVnode.elm, oldEndVnode.elm.nextSibling )
            oldStartVnode = oldCh[++oldStartIdx]
            newEndVnode = newCh[--newEndIdx]
        } else if(sameVnode(oldEndVnode, newStartVnode)) {
            // 旧后和新前
            console.log(4)
            patchVnode(oldEndVnode, newStartVnode)
            if(oldEndVnode) {
                newStartVnode.elm = oldEndVnode?.elm
            }
            // 把旧后指定的节点移动到旧前指向的节点的前面
            parentElm.insertBefore( oldEndVnode.elm, oldStartVnode.elm )
            oldEndVnode = oldCh[--oldEndIdx]
            newStartVnode = newCh[++newStartIdx]
        } else {
            // 以上都不满足条件 ===》查找
            console.log(5)
            // 创建一个对象存虚拟节点
            let keyMap = {}
            for(let i = oldStartIdx;i <= oldEndIdx;i++) {
                const key = oldCh[i]?.key
                if(key) {
                    keyMap[key] = i
                }
            }
            // console.log(keyMap)
            // 在旧节点中寻找前节点指向的节点
            let indxInOld = keyMap[newStartVnode.key]
            if(indxInOld) { // 能找到
                const elmMove = oldCh[indxInOld]
                patchVnode(elmMove, newStartVnode)
                // 处理过的节点，在旧虚拟节点的数组中，设置为undefined
                oldCh[indxInOld] = undefined
                parentElm.insertBefore(elmMove.elm,  oldStartVnode.elm)
            }else { // 不能找到
                // 说明是新节点，需要重新创建
                parentElm.insertBefore(createElement(newStartVnode), oldStartVnode.elm)
            }
            // 新节点指针+1
            newStartVnode = newCh[++newStartIdx]
        }
    }
}

在patchVnode.js中引用updateChildren方法

import createElement from './createElement'
import updateChildren from './updateChildren'
export default function patchVnode (oldVnode, newVnode) {
    // console.log(oldVnode) 
    // 判断新节点有没有子元素
    if (newVnode.children === undefined) { // 没有子元素
        if (newVnode.text !== oldVnode.text) {
            oldVnode.elm.innerText = newVnode.text
        }
    } else { // 有子元素
        // 判断旧节点有没有子元素
        if (oldVnode.children && oldVnode.children.length > 0) { // 旧节点有子元素，情况较为复杂
            updateChildren(oldVnode.elm, oldVnode.children, newVnode.children)
            // console.log(oldVnode.elm, oldVnode.children, newVnode.children)
        } else { // 旧节点没有子元素
            oldVnode.elm.innerHTML = '' // 删掉旧节点的内容
            for (let child of newVnode.children) {
                let childDom = createElement(child)
                oldVnode.elm.appendChild(childDom)
            }
            // console.log(oldVnode.elm)
        }
    }
}
  • 创建或者删除节点
    在updateChild.js中添加以下代码
// 结束while 只有两种情况 （新增和删除）
    // 1、oldStartIdx > oldEndIdx
    // 2、newStartIdx > newEndIdx
    if(oldStartIdx > oldEndIdx) {
        const before = newCh[newEndIdx + 1] ? newCh[newEndIdx + 1].elm : null
        for(let i = newStartIdx;i <= newEndIdx;i++) {
            parentElm.insertBefore((createElement(newCh[i])), before)
        }
    } else { // 进入删除操作
        for(let i = oldStartIdx;i <= oldEndIdx;i++) {
            // console.log(oldCh[i])
            parentElm.removeChild(oldCh[i].elm)
        }
    }

参考文献

https://www.bilibili.com/video/BV1K64y1s7ot?p=9&spm_id_from=pageDriver

全部代码

gitee地址
https://gitee.com/jjm1/diff
魅美
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
十分详细的diff算法原理解析
m0_64023259的博客
06-27 2万+
diff算法可以看作是一种对比算法，对比的对象是新旧虚拟Dom。顾名思义，diff算法可以找到新旧虚拟Dom之间的差异，但diff算法中其实并不是只有对比虚拟Dom，还有根据对比后的结果更新真实Dom。
vue3手写diff算法（图解+例子+详细注释）
weixin_46098276的博客
09-18 4073
什么时候用到diff算法？diff算法的用途是什么？使用v-for不利用key标识和利用key标识的区别是什么？本文有图解和例子说明，带你一步步手写实现diff算法的核心原理！！！
从DOM到虚拟DOM——前端DOM发展史、性能与产能双赢背后的思考
2401_84097658的博客
04-05 663
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车免费领取！，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于。
diff算法详解
Tqlsecret的博客
07-30 709
diff算法是一种通过同层的树节点进行比较的高效算法，它的目的就是找出新旧不同虚拟DOM之间的差异，使得能够最小化地更新视图，所以diff算法本质上就是比较两个js对象的差异。
vue相关面试题:diff算法
xiaolu567的博客
08-13 2785
●当数据发生改变时，订阅者watcher就会调用patch给真实的DOM打补丁●通过isSameVnode进行判断，相同则调用patchVnode方法找到对应的真实dom，称为el如果都有都有文本节点且不相等，将el文本节点设置为Vnode的文本节点如果oldVnode有子节点而VNode没有，则删除el子节点如果oldVnode没有子节点而VNode有，则将VNode的子节点真实化后添加到el如果两者都有子节点，则执行updateChildren函数比较子节点。...
DIFF算法原理
weixin_49865737的博客
08-09 4169
diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。简单来说Diff算法就是在虚拟DOM树从上至下进行同层比对，如果上层已经不同了，那么下面的DOM全部重新渲染。这样的好处是算法简单，减少比对次数，加快算法完成速度。...
JS实现手写 forEach算法示例
10-15
主要介绍了JS实现手写 forEach算法,结合实例形式分析了JS实现手写 forEach算法实现原理与相关操作技巧,需要的朋友可以参考下
手写KNN算法 代码实现
03-29
手写KNN算法 代码实现
手写识别算法
04-17
手写识别识别问题是一个熟悉的问题，并在实际中有重大的应用，本文给出了基于人工神经网络的手写识别算法。
手写数字识别算法
12-01
机器学习，手写识别算法，包含训练集和测试集，适用于CUDA编程环境。
前端常见手写题、算法题
最新发布
04-25
css、js常见手写题、js继承相关、js数组相关、排序算法、设计模式、树场景题、异步相关、正则相关、组件设计
json-diff简单使用
qq_44604364的博客
03-17 2460
今天推荐的是一款java中，对比两个json-diff对象是否一致的工具包json-diff他可以对比任何结构的两个json数据，并且将其中的不一致信息反馈给用户。工具还内置了很多配置可以来控制对比过程中的行为。目前已经补充大量单测，稳定性还是比较好的。json-diff是一款功能强大的json差异发现工具，支持任何结构的json对比，并且可以将对比结果返给用户。目前该工具更新到了版本。最新版可以查看版本列表。建议使用最新版，旧版可能存在缺陷。轻量级：工具只依赖 fastjson2。
手写vue2 - 实现$mount()和简单diff算法
qq_36782473的博客
10-22 465
手写vue2 - 实现$mount和简单diff算法前言一、明确思路1. Vue2的设计思路2. 改造思路二、手写Vue21. 定义数据响应式和通知依赖更新2. JVue类和更新渲染3. Watcher类收集依赖4. Dep类依赖管理和通知更新5. 测试案例三、总结1. Vue的挂载渲染流程2. Watcher3. reader()和\_\_patch\_\_() 前言 在我们之前的《手写vue - 实现数据响应式、数据双向绑定和事件监听》中，有些许不足： 直接模板 => dom，跳过了虚拟dom的
vue3源码分析——手写diff算法
twinkle的博客
06-30 741
本期来实现，上一期中还差了children与children的对比😉😉😉 vue3更新流程中的children与children的对比，也就是diff算法，所有的源码请查看既然采用的是双端对比，那么肯定是需要3个指针的，请看下图： 总共有3个指针既然有了指针，那是否需要锁定范围呢！指针做对应的移动。移动的方式如下：根据上面的需求，我相信都能得出一个条件并且写出以下代码 分情况讨论 总共有7中情况，分别是：会发现，i不动， e1和 e2两个指针往左边移动 最终 ,所以可以得出一个条件是...
剑指offer18 -链表问题
蜀沐的博客
10-09 170
题目： https://leetcode-cn.com/problems/shan-chu-lian-biao-de-jie-dian-lcof/ 思路一：函数参数是头之指针和值，遍历链表，如果满足头指针指向节点的下一个节点的值和需要删掉的值相等，那么就需要头指针指向的节点的next域设置为要删掉的下一个节点的值。同时返回头结点的下一个结点的地址。注意：这种情况不包括头节点为空和头节点的值就是要删掉的值 if (!head) return head; if (head->val == val) ret
diff算法
qq_45768871的博客
02-04 1928
diff算法是发生在虚拟DOM上 snabbdom H函数是用来产生虚拟节点的 虚拟节点有哪些属性 虚拟节点上树 简单的p函数使用 import { init } from 'snabbdom/init' import { classModule } from 'snabbdom/modules/class' import { propsModule } from 'snabbdom/modules/props' import { styleModule } from 'snabbdom/modul
[python]My Unique JsonDiff算法——如何计算2个json串之间的差距并Diff出来（一）：编辑距离（Levenshtein）算法
GISLU的专栏
01-14 4607
啊啊，年底忙着签证什么的，好久没写日志啦。。。。新年到来，整点干货出来给大家~~顺便为自己考试和申请学校攒点人品~~     之前实习的时候，因为实习公司的业务需求，需要一个比对json字符串差异的算法，然而我在网上查了很久的资料，发现竟然没有现成的jsondiff算法。。。残念了很久之后，只能自己动手研究一种算法用来比对json字符串差异啦。。。我会在接下来的文章中，慢慢将整个jsondiff算
实现一个简单的DOM diff算法
weixin_34268610的博客
06-05 488
上一篇文章，我说到了如何实现一个简单的虚拟DOM，这一篇文章是接着上一篇文章的知识点的。 我们都知道虚拟DOM其实就是JS对象，我们用JS来操作对象比操作DOM性能要好得多。 我们为什么还需要diff算法？ 因为如果我们有一个很庞大的DOM Tree，我们要对它进行更新操作，如果我们只是更新了它很小的一部分，我们就需要更新整个DOM Tree。这也是很浪费性能和资源的。因为有好多无用的更新。所以...
手写多层感知机（简单BP网络）
weixin_41621953的博客
11-08 444
研一时候没有选学校的模式识别课程，心里总感觉缺了点什么哈哈。 最近实验室师弟上这门课，老师布置了一个手写神经网络的作业，想想自己之前的实验都用的人家的框架，干脆这次自己也花点时间拿着个作业练练手。 我实现的就是一个非常简单的网络结构，网络层数可以随意加。 网络层类型：全连接 激活函数：Sigmoid 训练损失函数：欧氏距离 主要实现功能：1.前向传播（Test）；2.训练过程（Training） ...
java 手写哈希算法
10-08
好的，下面是一个简单的手写哈希算法的 Java 代码示例： ```java public class MyHashAlgorithm { public static int myHashCode(String str) { int hashCode = 0; for (int i = 0; i (); i++) { hashCode = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值