接着上一节我们开始虚拟DOM的更新 话不多说 直接上代码
// vDom.js
const vnodeType = {
HTML:'HTML',
TEXT: 'TEXT',
// 前期不会介绍 component虚拟dom
COMPONENT: 'COMPONENT',
CLASS_COMPONENT: 'CLASS_COMPONENT'
}
const childType = {
EMPTY: 'EMPTY', // 子元素为空
SINGLE: 'SINGLE', // 子元素只有一个
MULTIPLE: 'MULTIPLE' // 子元素有多个
}
// 新建虚拟dom 标签名 属性 子元素
function createElement(tag,data,children= null) {
let flag,childrenFlag
if (typeof tag === 'string'){
// 普通的html标签
flag = vnodeType.HTML
} else if (typeof tag === 'function'){
// 方法式虚拟dom
flag = vnodeType.COMPONENT
} else {
// 普通文本
flag = vnodeType.TEXT
}
if (children === null){
childrenFlag = childType.EMPTY
} else if (Array.isArray(children)){
// 通过长度来判断 childrenFlag的类型
let length = children.length
if (length === 0) {
childrenFlag = childType.EMPTY
} else {
childrenFlag = childType.MULTIPLE
}
}else {
// 其他情况认为是文本
childrenFlag = childType.SINGLE
children = createTextVnode(children + '')
}
// 返回vnode
return {
flag, // vnode类型
tag, // 标签, div 文本没有tag， 组件就是函数
data,
children,
key:data&&data.key,
childrenFlag,
el: null
}
}
// 渲染dom 要渲染的虚拟dom ，容器
function render(vnode,container) {
// 区分首次渲染 和 再次渲染
if (container.vnode){
// 更新
patch(container.vnode,vnode,container)
} else {
mount(vnode,container)
}
// 渲染之后进行储存 判断是否首次渲染
container.vnode = vnode
}
// 更新操作
function patch(prev,next,container){
let nextFlag = next.flag,
prevFlag = prev.flag
// 直接替换
if (nextFlag !== prevFlag) {
replaceVnode(prev,next,container)
} else if (nextFlag === vnodeType.HTML){
patchElement(prev,next,container)
} else if (nextFlag === vnodeType.TEXT){
patchText(prev,next,container)
}
}
// 更新节点
function patchElement(prev,next,container) {
// tag不同 直接替换
if (prev.tag !== next.tag){
replaceVnode(prev,next,container)
return
}
let el = (next.el = prev.el),
prevData = prev.data,
nextData = next.data
// 更新和新建
if (nextData){
for (let key in nextData){
let prevVal = prevData[key],
nextVal = nextData[key]
patchData(el,key,prevVal,nextVal)
}
}
// 删除之前的
if (prevData){
for (let key in prevData){
// 拿到新建的data 然后取值 看之前的data里面是存在
let prevVal = prevData[key]
if(prevVal && !nextData.hasOwnProperty(key)){
patchData(el,key,prevVal,null)
}
}
}
// data更新完毕 更新子元素
patchChildren(
prev.childrenFlag,
next.childrenFlag,
prev.children,
next.children,
el)
}
// 更新子元素
function patchChildren(prevChildFlag,nextChildFlag,prevChildren,nextChildren,container) {
// 需要做的处理
// 1.老的是单独的
// 老的是空的
// 老的是多个
// 2.新的是单独的
// 新的是空的
// 新的是多个
switch (prevChildFlag) {
case childType.SINGLE:
switch (nextChildFlag) {
case childType.SINGLE:
console.log('渲染文本')
patch(prevChildren,nextChildren,container)
break;
case childType.EMPTY:
container.removeChild(prevChildren.el)
break;
case childType.MULTIPLE:
container.removeChild(prevChildren.el)
for (let i = 0;inext.key == prevVnode.key)
if (!has){
container.removeChild(prevVnode.el)
}
}
break;
}
break;
}
}
// 直接替换文本
function patchText(prev,next,container) {
let el = (next.el = prev.el)
if (next.children !== prev.children){
el.nodeValue = next.children
}
}
// 直接替换节点
function replaceVnode(prev,next,container) {
container.removeChild(prev.el)
mount(next,container)
}
// 首次挂载元素
function mount(vnode,container,flagNode) {
// 区分flag的类型
let {flag} = vnode
if (flag === vnodeType.HTML){
mountElement(vnode,container,flagNode)
}else if (flag === vnodeType.TEXT){
mountText(vnode,container)
}
}
// 新建文本类型的vnode
function createTextVnode(text){
return {
flag: vnodeType.TEXT,
tag: null,
data: null,
el: null,
children: text,
childrenFlag: childType.EMPTY
}
}
// 直接挂载dom
function mountElement(vnode,container,flagNode) {
let dom = document.createElement(vnode.tag)
vnode.el = dom // 存储之前的dom
let {data,children,childrenFlag} = vnode // 属性
// 挂载data属性
if (data){
for (let key in data ){
// 节点 对应的key 旧值 新值
patchData(dom,key,null,data[key])
}
}
// 判断子元素数量
if (childrenFlag !==childType.EMPTY) {
if (childrenFlag === childType.SINGLE){
mount(children,dom)
}else if (childrenFlag === childType.MULTIPLE){
children.map(item=> mount(item,dom))
}
}
flagNode? container.insertBefore(dom,flagNode): container.appendChild(dom)
}
// 直接挂载text
function mountText(vnode,container) {
let dom = document.createTextNode(vnode.children)
vnode.el = dom
container.appendChild(dom)
}
// 挂载data
function patchData(el,key,prev,next){
switch (key) {
case 'style':
for (let k in next){
el.style[k] = next[k]
}
for (let k in prev){
if (!next.hasOwnProperty(k)){
el.style[k] = ''
}
}
break;
case 'class':
el.className = next
break;
default:
if (key[0] ==='@'){
if (prev) {
el.removeEventListener(key.slice(1),prev)
return
}
if (next){
el.addEventListener(key.slice(1),next)
} else {
el.setAttribute(key,next)
}
}
}
}
然后通过settimeout来模拟更新
let vnode = createElement('div',{id:'test'},[
createElement('p',{key: 'a', style: {color: 'blue'},'@click':()=>{alert('xxx')}},'节点1'),
createElement('p',{key: 'b', style: {color: 'green'}},'节点2'),
createElement('p',{key: 'c', style: {fontSize: '15px'}},'节点3'),
createElement('p',{key: 'd', style: {color: 'yellow'}},'节点4'),
])
let vnode1 = createElement('div',{id:'test'},[
createElement('p',{key: 'd', style: {color: 'yellow'}},'节点4'),
createElement('p',{key: 'a', style: {color: 'blue'},class: 'item-last'},'节点1'),
createElement('p',{key: 'b', style: {color: 'green'}},'节点3'),
createElement('p',{key: 'e', style: {fontSize: '15px'}},'节点5'),
createElement('p',{key: 'f', style: {fontSize: '20px'}},'节点6'),
])
// console.log(JSON.stringify(div,null,2))
render(vnode,document.getElementById('app'))
setTimeout(()=>{
render(vnode1,document.getElementById('app'))
},2000)
这样就实现了dom的更新,本篇文章是通过遍历对比来确定需要更新的节点 没做太多优化。具体步骤都写了注释