This is the 12th day of my participation in Gwen Challenge

Front-end framework virtual DOM DIFF foundation

Diff algorithm (I), focusing on the front-end interview

1. The virtual DOM

Since the diff algorithm happens in the virtual DOM, what is the virtual DOM

1.1 Basic Concepts

In simple terms, an object is used to describe a real DOM structure, for example:

<div class="box">
	<h1>DOM</h1>
	<ul>
		<li>Real DOM</li>
		<li>Virtual DOM</li>
	</ul>
</div>
Copy the code
{ sel:'div', data:{ class:'box' }, child:[ {sel:'h1', data:{}, text:'DOM'}, { sel:'ul', data:{}, child:[ {sel:'li', Data: {}, text: 'real DOM'}, {sel: 'li', data: {}, text: 'virtual DOM'}]]}}Copy the code

1.2 Basic properties of the virtual DOM

In general, a virtual DOM requires the following basic properties:

  1. Sel: What is the sel of the node described
  2. Data: the required attribute value of this node
  3. Elm: represents the real DOM node of the virtual DOM. If it is undefined, it means that the virtual DOM has no patch.
  4. Key: unique identifier of the node
  5. Text: Identifies the text

1.3 What is Patch (Upper Tree)?

This is essentially rendering the virtual DOM onto a real DOM tree, a process called patch.

2. H function (generate virtual node)

In the render section of the Vue document, it is actually said, here is a brief description

2.1 H function is basically used

The h function is used to generate virtual DOM nodes (vNodes), for example:

H (a, {props: {href: 'http://www.baidu.com'}}, 'baidu')

You get the following virtual nodes

{
	sel:'a'.data: {href:'http://www.baidu.com'
	},
	text:'Do a search.'
}
Copy the code

2.2 Handwriting simple H function

  1. The first step is to write a VNnode function that returns an object
function VNode(sel,data,children,text,elm){
	return {
		sel,
		data,
		children,
		text,
		elm
	}
}
Copy the code
  1. One thing to remember before we write the h function is that the simple h function takes three arguments and has the following three states
    • H (' div ', {}, 'text')
    • h('div',{},[...] )
    • h('div',{},h(...) )

So the code looks like this:

/ * * *@param { String } Sel Virtual DOM label *@param { Object } Data virtual DOM property *@param {can be virtual DOM, text, []} c
 * @return VNode * VNode return * 1. There are three form h (' div ', {}, 'text') * 2 h (' div ', {}, [...]. ) * 3. h('div',{},h()) **/
function h(sel,data,c){
	if( Array.from(arguments).length ! = =3) {throw new Error('Parameter error, please check')}if(typeof c === 'string' || typeof c === 'number') {return VNode(sel,data,undefined,c,undefined)}if( Array.isArray(c) ){
		const children = c.map((item) = >{
			if(! (typeof item === 'object' && item.hasOwnProperty('sel'))) {throw new Error('The array element member passed in is not the virtual DOM returned by h()')}else{
				return item
			}
		})
		
		return VNode(sel,data,children,undefined.undefined)}if(typeof c === 'object' && c.hasOwnProperty('sel')) {return VNode(sel,data,[c])
	}
	return new Error('Parameter error, please check')}// Test case
console.log( h('div', {},'The front end is so hard.'))console.log( h('div',{},[
	h('div', {},'Learn the bottom line'),
	h('div', {},'To learn frames'),
	h('div', {},'To learn English')))console.log( h('div',{},h('div', {},'Where there is life, there is life.')))Copy the code

Stay tuned for part two