网站构建流程专门做单页的网站

diff算法

snabbdom：

h函数：产生虚拟节点

第一个参数：为标签，第二个：属性 ，第三个：值

一个虚拟dom的属性：让虚拟节点上树，即生成真实dom

//h函数//vnode:把参数返回成一个对象export default function(sel,data,children,text,elm){const key=data.keyreturn {sel,data,children,text,elm}
}import vnode from './vnode.js'//低配版本的diff，必须接受三个参数
// h('div',{},'文字'/[]/h{})export default function h(a,b,c){if(arguments.length<3){return ;}if(typeof c =='string'||typeof c=='number'){return vnode(a,b,undefined,c,undefined)}if(Array.isArray(c)){let children=[]for(let i=0;i<c.length;i++){if(!(typeof c[i]=='object'&& c[i].hasOwnProperty(sel))){return }children.push(c[i])}return vnode(a,b,children,undefined,undefined)}if(typeof c=='object' &&c.hasOwnProperty(sel)){let children=[c]return vnode(a,b,children,undefined,undefined)}else{return }}h('div',{},'文字')

diff算法：

//patch函数：

过程：

先判断老节点是否为虚拟节点，若不是，把它转化为虚拟节点，若是，则判断旧vnode和新的vnode是否为同一节点，若是进行精细比较，若不是，则直接暴力删除添加

(1)：如何定义 是相同节点：

        新旧节点的key相同和新旧节点的选择器相同

（2）：暴力删除旧的，插入新节点

        创建子节点时，递归创建

        

const myvnode1=h('h1',{},'你好')
const container=document.getElementById('container')function patch(oldvnode,newnode){if(oldnode.sel==''||oldnode.sel=='undefioned'){oldvonde=vnode(oldvnode.tagname.toLowerCase(),{},[],undefined,oldvnode)}if(oldvnode.key==newvnode.key&&oldvnode.sel===newvnode.sel){//判断新旧是否为一个对象patchVnode(oldVnode,newvnode)}else{let newdom=createElement(newvnode)//插入oldVonde.elm.parentNode.insertBefore(newdom,oldvnode.elm)oldvnode.ele.parentNode.removeChild(oldvnode);}
}function patchvnode(oldvnode,newvnode){if(oldvnode==newvnode) return if(newvnode.text!=='undefined' &&newvnode.children.length==0){if(newvnode.text!=oldvnode.text){oldvnode.elm.innerText=newvnode.text}}else{//判断老的有没有childrenif(oldvnode.children!=='undefined'&&oldvnode.children.length!==0){updateChilden(oldvnode.elm,oldvnode.children,newvnode.children)}else{//老的没有，新的有oldvnode.elm.innerHTML=''for(let i=0;i<newvnode.chileren.length;i++){let dom=createElement(newvnode.children[i])oldvnode.ele.appChildren(dom)}}}
}function createElement(vnode){//创建domlet domnode=document.createElement(vnode.sel)if(vnode.text!=''&&(vnode,children=='undefined)){domNode.innerText=vnode.text;}else if(Array.isArray(vnode.children)&&vnode.children.length>0){//内部是子节点，要进行递归for(let i=0;i<vnode.children.length;i++){let ch=vnode.childrfen[i]let chdom=createElement(ch)domnode.appendChild(chdom)}}vnode.elm=domnodereturn vnode.elm}function updateChilden(parentelm,oldch,newch){let oldstart=0;let newstart=0;let oldend=oldch.length-1;let newend=newch.length-1;let oldsnode=oldch[0]let oldenode=old[oldend]let newsnode=newch[0]let newenode=newch[newend]while(oldstart<=oldend&&newstart<=newend){if(checksamenode(oldsnode,newsnode)){patchvnode(oldsnode,newsnode)oldsnode=oldch[++oldstart]newsnode=newch[++newstart]}//新后和旧后else if(checksamenode(oldenode,newenode)){patchvnode(oldenode,newenode)oldenode=oldch[--oldend]newenode=newch[--newend]}else if(checksamenode(oldsnode,newenode)){patchvnode(oldsnode,newenode)parentelm.insertBefore(oldsnode.elm,oldenode.elm.nextSibling)oldsnode=oldch[++oldstart]newenode=newch[--newend]}else if(checksamenode(oldenode,newsnode)){patchvnode(oldenode,newsnode)parentelm.insertBefore(oldenode.elm,oldsnode.elm)oldenode=[--oldend]newsnode=[++newstart]}else{}}//剩余节点if(newstart<=newend){for(let i=newstart,i<=newend;i++){parentelm.insertBefore(createElement(newch[i]),newch[i+1].elm)}}else if(oldstart<oldend){for(let i=oldsrart,i<=oldend;i++){parentelm.removeChild(oldch[i])}}}function checksamenode(a,b){return a.sel==b.sel&&a.key==b.key
}

diff算法优化：

虚拟dom变为真实dom