preface

Before we do that we need to know what render is.

You can check out the previous article “Understanding the Vue-render function (introductory)”.

Nonsense not much to say, quickly quickly get in the car!!

Define an object

Let’s start by defining a data object as our data

let data = {
    tag:"h2".props: {},children:"Yan Lao Shi"
}
Copy the code

Tag is the tag name, props is the attribute object, and children is the child element or text node

Ha, ha, ha Still the old routine Write an h2 tags try water first

Obtain the root node mount

This is So Easy

<div id="app"></div>
Copy the code
// app is our root node
let app = document.querySelector('#app')
Copy the code

What happens after you get the APP node? We don’t need appendChild to the data object we defined in the first step

// We don't have the render function yet
app.appendChild(render(data))
Copy the code

The render function is the main thing to write today

Start the big show

The first step in genius is to define arenderfunction

// Receives the parameters passed in
const render = (options) = >{
    // Get the label in the data and create it
    let el = document.createElement(options.tag);
	/ / print el
	console.log(el) // <h2></h2>
	// Return the node
	return el
}
app.appendChild(render(data))
Copy the code

Now that our element has been created, all we need to do is render its text.

Render text node

Assign children to the node text content

const render = (options) = >{
    let el = document.createElement(options.tag);
	// We pass in the children text here
	el.textContent = options.children
	return el
}
app.appendChild(render(data))
Copy the code

Yan Laoshi: Ok, render finished writing, class is over!

Kids: Wait!! Right here?

Just kidding, of course not! Oh, that’s a pretty crude way to write it

Upgrade render

Just now we actually wrote a crude version of Render that had a lot of problems!

  • childrenIf it’s an array, what about multiple children?
  • ifpropsDoes it have properties in it?
  • I also want to have the event trigger function?

.

There are still a lot of problems, so let’s strengthen it, rush duck!!

Props parameters

Let’s update the props parameters, such as class, ID, and on

First up, contestant number oneclass

Let’s start by adding a class in the props data and giving it a value of myClass

let data = {
    tag:"h2".props: {class:"myClass"
    },
    children:"Yan Lao Shi"
}
Copy the code

Data transformation good, let’s look at render change how to upgrade

const render = (options) = >{
    let el = document.createElement(options.tag);
	// Determine if it is an object and not null
	if(typeof options.props === 'object'&& options.props ! = =null) {for(key in options.props){
            // Get props key and val
            vla = options.props[key];
            // Add the specified attribute to the element
            el.setAttribute(key, vla);
        }
    }
	el.textContent = options.children;
	return el
}
app.appendChild(render(data))
Copy the code

So we are done adding the class

What about ID, Lao Shi?

Wait, I’ll get the hammer…

Second playerid

Id actually do not need to say, just change the data, So Easy

let data = {
    tag:"h2".props: {class:"myClass".id:"myId"
    },
    children:"Yan Lao Shi"
}
Copy the code

The last contestant for Propson

On is used to bind events, so we can’t treat class and ID the same way. A man who cheats on a woman’s affections! To discriminate

Once again, let’s tweak the data and add on-click

let data = {
    tag:"h2".props: {class:"myClass".id:'myId'.on: {// Pass in the click event
            click:(e) = >{
                console.log(e)
            }
        }
    },
    children:"Yan Lao Shi"
}
Copy the code

After the data transformation is complete, we proceed to upgrade render

const render = (options) = >{
    let el = document.createElement(options.tag);
	if(typeof options.props === 'object'&& options.props ! = =null) {for(key in options.props){
            vla = options.props[key];
            // If key = on
            if(key === "on") {// Assign the on object to incident
                incident = options.props[key]
                for(k in incident){
                    // Pass an Event to the element binding Event
                    el.addEventListener(k,e= >incident[k](e))
                }
            }else{
                // All the others come in here
            	el.setAttribute(key, vla);
            }
        }
    }
	el.textContent = options.children;
	return el
}
app.appendChild(render(data))
Copy the code

Click on the label and look at the print

Isn’t it also very simple

At this point we’ve done some of the operations that are often used in this props.

Multichild element

Sometimes we might have more than one element in our data, but what if children is an array?

So we can’t just assign to the element’s textContent, so let’s go ahead and judge.

We’re going to do the same thing, we’re going to change the data, we’re going to change the children to an array, and we’re going to have the same structure as before

let data = {
    tag:"ul".props: {class:"myClass".id:'myId',},children:[
        {
            tag: 'li'.props: {
                class: "list",},children: "40,000 five-star red flags hang in Wuhan streets"
        }, {
            tag: 'li'.props: {
                class: "list",},children: "The remains of martyrs are greeted with the utmost courtesy at the airport watergate."}}]Copy the code

Now that the data structure is modified, let’s modify the Render function

const render = (options) = >{
    let el = document.createElement(options.tag);
	if(typeof options.props === 'object'&& options.props ! = =null) {for(key in options.props){
            vla = options.props[key];
            if(key === "on"){
                incident = options.props[key]
                for(k in incident){
                    el.addEventListener(k,e= >incident[k](e))
                }
            }else{ el.setAttribute(key, vla); }}}// We make a judgment here in content assignment
	// If children is an array
	if (options.children instanceof Array) {
        // Let's do forEach traversal
        options.children.forEach((item) = >{
            // Render the recursive function, passed in
            el.appendChild(render(item));
        });
    }else{
        // If it is not data, we assign it
        el.textContent = options.children
    }
	return el
}
app.appendChild(render(data))
Copy the code

Has it been rendered successfully?

All the code

Post all the code for you!

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Old strict render</title>
</head>
<body>
    <div id="app"></div>
    <script>
        const app = document.querySelector('#app')
        let data = {
            tag: "ul".props: {
                class: "myClass".id: 'myId',},children: [{tag: 'li'.props: {
                        class: "list",},children: "40,000 five-star red flags hang in Wuhan streets"
                }, {
                    tag: 'li'.props: {
                        class: "list",},children: "The remains of martyrs are greeted with the utmost courtesy at the airport watergate."}}]const render = (options) = > {
            let el = document.createElement(options.tag);
            if (typeof options.props === 'object'&& options.props ! = =null) {
                for (key in options.props) {
                    vla = options.props[key];
                    if (key === "on") {
                        incident = options.props[key]
                        for (k in incident) {
                            el.addEventListener(k, e= > incident[k](e))
                        }
                    } else{ el.setAttribute(key, vla); }}}if (options.children instanceof Array) {
                options.children.forEach((item) = > {
                    el.appendChild(render(item));
                });
            } else {
                el.textContent = options.children
            }
            return el;
        };
        app.appendChild(render(data));
    </script>
</body>
</html>
Copy the code

conclusion

  • The code we wrote was crude and didn’t have that much judgment logic, but we’ve learned the simple implementation of Render

If you like, you can follow the wechat public account “Sad Diary”.