炫意html5
最早CSS3和HTML5移动技术网站之一

从0到1: 实现一个虚拟 DOM(上)

写在前面

本文分上下两篇,实现一个基础版本的虚拟 DOM。

上篇首先介绍什么是虚拟 DOM、为什么要使用虚拟 DOM,其次完成项目创建、实现 h 函数、render 函数以及 mount 函数,完成创建虚拟 DOM 到挂载到页面成为真实 DOM的过程;下篇将通篇介绍虚拟 DOM 的核心,diff 算法的实现。

本文上篇代码已上传GitHub。

目录

  • 1 什么是虚拟 DOM
  • 2 为什么要使用虚拟 DOM
  • 3 虚拟 DOM 实现
    • 3.1 项目创建
    • 3.2 h 函数:用 JS 对象模拟 DOM 树
    • 3.2 render 函数:实现渲染
    • 3.3 mount 函数:实现挂载
    • 3.4 diff 算法

1. 什么是虚拟 DOM

用 JavaScript 对象描述真实的 DOM 结构,就是虚拟 DOM。

<div id="app">
<h1>hello world!</h1>
</div>
复制代码

因为真实 DOM 本身天然具有树状结构,因此用 JavaScript 对象描述非常容易。在这个对象中,我们只需要使用 tagNamepropschildren 三个属性就可以完整的描述上面的 HTML 结构:

{
tagName: 'div',
props: {
id: 'app'
},
children: [
{
tagName: 'h1',
props: {},
children: ['hello world!']
}
]
}
复制代码

上面的代码就是一个虚拟 DOM 了,简单吧!

2. 为什么要使用虚拟 DOM?

第一个原因:DOM 操作太慢了。这里的慢有两方面,一是性能低,页面慢。二是手动操作 DOM,效率低,从而导致开发节奏慢。

我们可以在浏览器打开一个空白页面:about:blank,打开控制台,输入以下代码:

const div = document.createElement('div')
let str = ''
for (let key in div) {
str = str + key + ','
}
console.log(str)
复制代码

此时你会看到:

仅仅一个 div 元素的属性就这么庞大,可想而知为什么操作 DOM 的花销会及其巨大了。

而相比于 DOM 对象,JavaScript 对象处理起来就非常快了,再加上 diff 算法,找出最小差异,然后进行批量 patch。这样我们可以极大的减少真实的 DOM 操作,减少重排,提升性能。

第二个原因:真实 DOM 与浏览器强相关,而虚拟 DOM 本质上是 JavaScript 对象,JavaScript 对象能够更方便地进行跨平台操作。如服务端渲染,移动端开发等等。

3. 虚拟 DOM 实现

说了这么多理论,我们就开始 step by step,一步步实现一个虚拟 DOM 吧。

3.1 项目创建

首先,我们创建项目目录:

$ mkdir virtual-dom-lite
$ cd virtual-dom-lite
复制代码

然后,我们进行 npm 初始化

$ npm init -y
复制代码

最后,我们安装一下 Parcel Bundler,一个无需配置的小型项目打包器。安装后可以启动一个 dev-server,并具有热更新功能。

$ npm install parcel-bundler
复制代码

安装好依赖后,创建一个 src 目录,在 src 目录下,创建两个文件:

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virtual DOM</title>
</head>
<body>
hello world
</body>
<script src="./main.js"></script>
</html>
复制代码

src/main.js

const vApp = {
tagName: 'div',
props: {
id: 'app'
}
}
console.log(vApp)
复制代码

最后修改 package.json。

package.json

{
"scripts": {
"dev": "parcel src/index.html"
}
}
复制代码

在终端输入 npm run dev 就可以启动我们的项目啦。

3.2 h 函数:用 JS 对象模拟 DOM 树

一般情况下,我们都使用 createElement 方法创建虚拟 DOM。在绝大多数虚拟 DOM 库以及流行框架中,通常用 h 函数指代,因此我们也来创建一个 h 函数。

还记得 JavaScript 对象中用哪三个属性就可以描述 DOM 树么?对,就是 tagNameprops 以及 children。其中 propschildren 是可选项,因为想要表示一个 DOM 结构,标签是必选项,但可以没有属性,也可以没有子元素。

src/vdom/creatElement.js

export default (tagName, opts) => {
const vElement = Object.create(null)
Object.assign(vElement, {
tagName,
props: opts.props || {},
children: opts.children || []
});
return vElement;
}
复制代码

使用对象解构后,可以优化上面的代码

src/vdom/createElement.js

export default (tagName, { props = {}, children = [] } = {}) => {
const vElement = Object.create(null)
Object.assign(vElement, {
tagName,
props,
children
});
return vElement;
}
复制代码

src/main.js

import h from './vdom/createElement'
const vApp = h('div', {
props: {
id: 'app'
}
})
console.log(vApp)
复制代码

这样,在浏览器的控制台中,我们就可以看到虚拟 DOM 对象啦。

3.2 render 函数:实现渲染

有了虚拟 DOM 对象,那么如何将它转化为真正的 DOM 呢?这就是渲染函数要干的事情。

在这里我们仅针对元素节点文本节点进行渲染。

src/vdom/render.js

const render = (vNode) => {
// 如果字符串,认为是文本节点,我们创建一个一个文本节点
if (typeof vNode === 'string') return document.createTextNode(vNode)
// 其他情况默认为元素节点
// 创建一个元素
const $el = document.createElement(vNode.tagName)
// 添加虚拟 DOM 对象上所有的属性
for (const [key, value] of Object.entries(vNode.props)) {
$el.setAttribute(key, value)
}
// 如果虚拟 DOM 上有子元素,则追加(这里其实有一个递归思想)
for (const child of vNode.children) {
$el.appendChild(render(child))
}
return $el
}
export default render
复制代码

回到 main.js 文件,我们尝试用 render 函数渲染一下我们的虚拟 DOM,并在控制台打印一下:

src/main.js

import h from './vdom/createElement'
import render from './vdom/render'
const vApp = h('div', {
props: {
id: 'app'
},
children: [
h('h1', {
props: {
id: 'title'
},
children: ['hello world!']
})
]
})
const $app = render(vApp)
console.log($app)
复制代码

此时,在控制台打印,可以看到以下结果:

3.3 mount 函数:实现挂载

现在,我们可以创建虚拟 DOM 并渲染其为真实 DOM 了。下一步就是激动人心的时刻 —— 将渲染出来的真实 DOM 挂载到页面上!!!

我们首先修改 index.html 页面

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virtual DOM</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="./main.js"></script>
</html>
复制代码

然后编写我们的挂载函数:

src/vdom/mount.js

export default ($node, $target) => {
return $target.appendChild($node)
}
复制代码

src/main.js

import h from './vdom/createElement'
import render from './vdom/render'
import mount from './vdom/mount'
const vApp = h('div', {
props: {
id: 'app'
},
children: [
h('h1', {
props: {
id: 'title'
},
children: ['hello world!']
})
]
})
const $app = render(vApp)
mount($app, document.getElementById('root'))
复制代码

终于,我们的页面可以出现自己渲染的虚拟 DOM 啦!里程碑!扭起来!

高兴的同时,其实现在的页面还是有一些的问题的:当我们需要修改页面时,无论是增删改元素、属性或者子元素,我们只能全量渲染和挂载,这又会造成不必要的性能损耗,因此,整个实现虚拟 DOM 过程中最重要的 diff 算法要出场了。

因为 diff 算法是整个虚拟 DOM 实现的核心,篇幅略长,我们在下一篇重点实现。

炫意HTML5 » 从0到1: 实现一个虚拟 DOM(上)

Java基础教程Android基础教程