自己动手写一个render函数

前言

在这个之前我们需要了解render是什么？

可以去之前的文章里面看看 《 搞懂vue-render函数（入门篇）》

本文目录结构

1. 定义一个对象

2. 获取根节点挂载

3. 开始重头戏

4. 升级render

5. props参数

6. 多个子元素

7. 全部代码

8. 总结与福利

废话不多说，快快快 上车！！！

定义一个对象

先定义一个数据对象来作为我们的参数

let data = {
    tag:"h2",
    props:{},
    children:"严老湿"
}

tag 作为标签名，props 作为属性对象，children 作为子元素或者文本节点

哈哈哈 还是老套路 先写一个 h2 标签试试水

获取根节点挂载

这个So Easy啦

<div id="app"></div>

// app 作为我们的根节点
let app = document.querySelector('#app')

获取到 app 节点之后呢？我们是不是需要 appendChild 我们第一步定义的 data 对象

// 此时还没有render这个函数
app.appendChild(render(data))

这个 render 函数就是我们今天要写的重要内容

开始重头戏

天才第一步 ，先定义一个 render 函数

// 接收传入的参数
const render = (options) = >{
    // 获取数据中的标签并创建
    let el = document.createElement(options.tag);
 // 打印el
 console.log(el) // <h2></h2>
 // 将节点返回
 return el
}
app.appendChild(render(data))

此时我们的元素已经创建成功，接下来我们需要做的就是，把它的文本，渲染上去。

渲染文本节点

将 children 赋值给到节点文本内容

const render = (options) = >{
    let el = document.createElement(options.tag);
 // 我们在这里传入 children 文本
 el.textContent = options.children
 return el
}
app.appendChild(render(data))

严老湿 ：好了，render 写完了，下课吧！

童鞋 ：等等！！就这？？？

开个玩笑 当然不是啦！这写得也真是太简陋了吧

升级render

刚刚我们其实已经写了一个简陋版本的render 但是存在很多问题！

• children 如果是数组，多个子元素呢?

• 如果props 里面有属性呢？

• 我还想要点事件触发函数呢？

....

还有很多问题，所以我们来加强一下，冲鸭!!!

props参数

我们现在先来升级一下 props 参数，如我们需要在元素上加 class 、id 、on

首先是一号选手 class

我们先将数据中的props中新增一个class 且 它的值为 myClass

let data = {
    tag:"h2",
    props:{
        class:"myClass"
    },
    children:"严老湿"
}

数据改造好了，我们来看看 render 改如何升级

const render = (options) = >{
    let el = document.createElement(options.tag);
 // 判断是否是对象，并且不是null
 if(typeof options.props ===&nb