现在vue和React这种前端框架都标榜着自己使用了虚拟DOM技术,实话说,我简单的看了一下这部分的相关文章和源码,虚拟DOM技术其实也不是什么难以理解的东西,虚拟DOM是一种思路,可以按照这个思路去实现一个你自己的虚拟DOM,当然不需要去看React源码或者其他虚拟DOM的实现源码,那些源码非常复杂,但是事实上,如果按照这个思路写一个属于自己的虚拟DOM实现,只需要几十行代码就能搞定。今天写这篇文章,就是打算自己创造一个自己的虚拟DOM。
在此之前,有两个重要概念需要牢记于心:
- 虚拟DOM只是一种表示真实DOM的方法。
- 虚拟DOM改变的时候,我们会得到一个新的虚拟DOM。然后将旧虚拟DOM和新虚拟DOM进行比较,找到哪里不同,然后用最少的代价去在真实DOM中将这些不同的地方进行更新。
好!就是这些,现在就可以进行下一步了,深入虚拟DOM的实现。
用一个对象来表示真实DOM
假设我们想在网页上展示下面这样一段DOM:
<ul class=”list”>
<li>item 1</li>
<li>item 2</li>
</ul>
这个DOM可以用一个JS对象来表示,如果看到这里,请先暂停,思考几分钟,如果是你,会如何用一个JS对象来表示一个任意的DOM节点。
我是这样计划的,用type
属性来表示DOM名称,用props
属性来表示DOM的属性,用children
属性来表示DOM的子节点。如果没有子节点,children
属性就是空,如果子节点就是文字,比如上面那个li
里面没有子节点只有文字,那么这个对象的children属性就是一个文字,说起来复杂,可以看下面代码,我会用下面的纯JS对象来代表上面所要表达的DOM。
let virtualDOM = {
type:'ul',
props:{
'class':'list'
},
children:[
{
type:'li',
props:{},
children:[
'item 1'
]
},
{
type:'li',
props:{},
children:[
'item 2'
]
}
]
}
写一个虚拟DOM生成函数
如果我要写一个很复杂的DOM,手动转换成虚拟DOM的话实在太麻烦了,所以我要写一个函数,这个函数用来生成一个虚拟DOM。
function h(type,props,...children){
return {type,props,children}
}
这个函数使用到了ES6的新特性,rest参数,简单说明一下就是,在h函数中,除了前两个参数以外,其他所有参数都会被放到一个名为children的数组中。现在有了这个帮助函数,就可以这样来生成一个虚拟DOM了:
h('ul',{'class':'list'},
h('li',{},'item 1'),
h('li',{},'item 2'),
)
怎么样?看起来是不是有点熟悉?没错,React也有这样类似的函数,React的写法是这样:
React.createElement('ul',{'class':'list'},
React.createElement('li', {}, 'item 1'),
React.createElement('li', {}, 'item 2'),
);
其实我们可以像用React.createElement一样来使用h方法
实际操作一下试试
React使用的是JSX语法,那么我们也来用一下JSX语法,最方便的是使用JSFiddle这个在线编辑器。打开这个网站以后,要进行一下设置:
-
在JS那个界面里选择一下编译器:
-
增加一个外部JS,用来显示控制台,将这个js文件加入外部链接:
https://getfirebug.com/firebug-lite-debug.js
加完以后点击Run按钮。就能看到控制台了。
之后就可以用JSX语法配合我们的h()
函数来创建虚拟DOM了。好,写一下代码试试看:
/** @jsx h */
/** 上面这行注释的意思是,告诉JSX编译器,用h函数来替代`React.createElement(…)`函数。*/
function h(type, props, ...children) {
return { type, props, children };
}
const a = (
<ul class="list">
<li>item 1</li>
<li>item 2</li>
</ul>
);
console.log(a);
能在控制台看到,虚拟DOM创建成功了,这很酷吧?
我的代码也放在jsFiddle上面,如果有不清楚的地方可以打开我的代码看看:我的代码地址
现在有了一个创建虚拟DOM的方便函数,下一步就是根据虚拟DOM来生成一个真实DOM了,这个篇幅比较长了,这部分放到下一期吧。