1. What is snabbDOM?

Snabbdom means “speed”, source code is only 200 lines, written using TS, make things modular

2. How does snabbDOM h function work?

H function is used to generate virtual nodes, and can also be nested to obtain the virtual DOM tree.

What is the virtual DOM?

Js object to describe the DOM hierarchy, all the attributes in the DOM have corresponding attributes in the virtual DOM.

3.1 create a virtual DOM

const patch = init([classModule, propsModule, styleModule, eventListenersModule]); / / create the virtual node const myVirtual1 = h (' a ', {props: {href: 'https://blog.lijianlin.com.cn/' target: "_blank"}}, "top dog"); console.log(myVirtual); // Make the tree on the virtual node const container = document.getelementById ('container'); patch(container, myVirtual1);Copy the code

3.2 patch function source code flow chart

Export default function(oldVnode, newVnode){// If (oldValue. Sel = = '| | oldValue. Sel = = undefined) {/ / 2, the incoming of the first parameter is the DOM node, Packaged into virtual node oldValue = vnode (oldValue. TagName. ToLowerCase (), {}, [], undefined, oldValue); } // 3, check whether oldValue and newValue are the same node. If (oldValue.key == newValue.kee && oldValue.sel == newValue.sel){console.log(' same node '); If (oldValue == newValue) return; If (newvalue.text! = undefined && (newValue. Children = = undefined | | newValue. Children. The length = = 0)) {the console. The log (' new vnode has a text attribute); 3.2.1 If the text of the new virtual node is different from the text of the old virtual node, write the new text to the old ELM. If the chilren of old Elm were to disappear immediately. if(newValue.text ! = oldValue.text){ oldValue.elm.innerHTML = newValue.text; }}else {// New vnode has no text attribute, chidren console.log(' new vnode has no text attribute '); If (oldValue. Children! = undefined &&oldvlaue. children > 0){// Let ch = newvNode. children[I]; // let isExist = false; // Let isExist = false; for(let j = 0; j < oldValue.children.length; j++){ if(oldValue.children[j].sel == ch.sel && oldValue.children[j].key == ch.key){ isExist = true; } } if(! isExist){ console.log(ch, i); let dom = createElement(ch); ch.elm = dom; }}else{// 3.2.2.3, oldValue.elm.innerhtml = "; For (let I = 0; i < newVnode.children.length; i++){ let dom = createElement(newVnode.children[i]); oldVnode.elm.appendChild(dom); }}}}else{console.log(' not the same node ') let newVnoElm = createElement(newVnode); / / before 4, inserted into the old node oldValue. Elm. ParentNode. The insertBefore (newVnodeElm, oldVnode. Elm); }}Copy the code

4. Principle of DIFF algorithm

4.1 diff occurs in the virtual DOM and is used to calculate the difference between the two virtual DOM and re-edify it.

const patch = init([classModule, propsModule, styleModule, eventListenersModule]); / / create the virtual node const myVirtual2 = h (' ul '{} and [h (' li', {key: 'A'}, 'A'), h (' li ', {key: 'B'}, 'B'), h (' li ', {key:} 'C', 'C'), h('li',{key:'D'},'D'), ]); Patch (container, myVirtual2); / / create replacement node const myVirtual3 = h (' ul '{} and [h (' li', {key: 'D'}, 'D'), h (' li ', {key: 'A'}, 'A'), h (' li ', {key: 'B'}, 'B), h('li',{key:'C'},'C'), h('li',{key:'D'},'D'), ]);Copy the code

4.2 Noteworthy points of Diff:

  • The Diff algorithm changes before and after the same DOM node
  • If the selectors and keys are the same, the node is judged to be the same.
  • Only half price of the same layer, not cross-layer comparison.