{"id":25276052,"url":"https://github.com/afine970/study_diff","last_synced_at":"2025-04-06T10:18:33.133Z","repository":{"id":162797843,"uuid":"376245985","full_name":"AFine970/study_diff","owner":"AFine970","description":"Diff Study Note","archived":false,"fork":false,"pushed_at":"2021-07-07T07:49:02.000Z","size":86,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-12T15:48:39.080Z","etag":null,"topics":["diff"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AFine970.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-12T09:04:45.000Z","updated_at":"2023-05-29T09:24:57.000Z","dependencies_parsed_at":"2023-05-19T03:15:26.512Z","dependency_job_id":null,"html_url":"https://github.com/AFine970/study_diff","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AFine970%2Fstudy_diff","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AFine970%2Fstudy_diff/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AFine970%2Fstudy_diff/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AFine970%2Fstudy_diff/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AFine970","download_url":"https://codeload.github.com/AFine970/study_diff/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247464218,"owners_count":20942970,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["diff"],"created_at":"2025-02-12T15:37:20.240Z","updated_at":"2025-04-06T10:18:33.127Z","avatar_url":"https://github.com/AFine970.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# diff算法 学习笔记\n\n## 快速开始\n\n- 安装依赖\n\n```bash\nnpm install\n```\n\n- 启动\n\n```bash\nnpm run serve\n```\n\n## 虚拟 DOM\n\n- 含义：用 JS 对象描述 DOM 的层次结构。DOM 中的一切属性都在虚拟 DOM 中有对应的属性\n- h 函数用来产生虚拟节点 VNode\n- 虚拟节点包含的属性\n\n```javaScript\n{\n    children: undefined // 包含的子节点\n    data: {} // 属性\n    elm: undefined // DOM树中的位置\n    key: undefined // 节点key值\n    sel: 'div' // 节点标签（select）\n    text: '我是一个大人' // 文本\n}\n```\n\n## snabbdom\n\n简介：一个虚拟 DOM 工具库\n\n## patch 函数执行图\n\n![diff算法图解.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/639af02ee5374a918a7ca6c21bdac02d~tplv-k3u1fbpfcp-watermark.image)\n\n## diff算法\n\n- `key`用于服务最小化更新\n- 只有是同一个虚拟节点才会进行精确化比较，选择器相同而且`key`相同才是同一个虚拟节点\n- 只会进行同层比较，不会进行跨层比较\n\n## 经典 diff 算法优化策略\n\n简称\n\n- 新虚拟列表的前指针 ---- 新前指针\n- 新虚拟列表的后指针 ---- 新后指针\n- 旧虚拟列表的前指针 ---- 旧前指针\n- 旧虚拟列表的后指针 ---- 旧后指针\n\n## 四种命中规则\n\n1. 新前指针 VS 旧前指针\n2. 新后指针 VS 旧后指针\n3. 新后指针 VS 旧前指针 （此种情况命中，涉及移动节点，那么新前指针指向的节点，移动到旧后节点之后）\n4. 旧后指针 VS 新前指针 （此种情况命中，涉及移动节点，那么新前指针指向的节点，移动到旧前节点之前）\n\n如果都没有命中，就需要用循环来寻找相同的虚拟节点进行比较\n\n## 命中规则分解图\n\n![最优美的diff.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f49dd2b75b2a4a40b016e1551bac726d~tplv-k3u1fbpfcp-watermark.image)\n\n## 项目结构\n\n```text\n|-- study_diff\n    |-- .gitignore\n    |-- package.json\n    |-- readme.md\n    |-- webpack.config.js\n    |-- yarn.lock\n    |-- page\n    |   |-- index.html\n    |-- src\n        |-- createElement.js // 根据传进来的虚拟节点创建真实的DOM节点\n        |-- h.js // 构造虚拟节点\n        |-- index.js // 主入口\n        |-- isSameVnode.js // 判断是否是相同的虚拟节点\n        |-- patch.js // 对比两个虚拟节点进行打补丁操作\n        |-- patchVnode.js // 新旧虚拟节点进行对比\n        |-- updateChildren.js // 比对更新虚拟节点里的children\n        |-- vnode.js // 虚拟节点类\n```\n\n## 参考资料\n\n\u003e \u003chttps://www.bilibili.com/video/BV1v5411H7gZ?p=5\u0026spm_id_from=pageDriver\u003e\n\n好好学习不会差，一起进步！\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafine970%2Fstudy_diff","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fafine970%2Fstudy_diff","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafine970%2Fstudy_diff/lists"}