[JavaScript知识库] 渲染器render（未解决）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 渲染器render（未解决） -> 正文阅读

[JavaScript知识库]渲染器render（未解决）

  <template>
      <div> </div>
  </template>

  <script>
    export default { 
     name: 'Count',
     setup() {
         const vnode = {
             tag: 'div',
             props: {
                 onClick: () => alert('hello')
             },
             children: 'click me'
         }
         
         function render(vnode, container) {
             const el = document.createElement(vnode.tag)
             for (const key in vnode.props) {
                 if (/^on/.test(key)) {
                     el.addEventListener(
                         key.substr(2).toLowerCase(),
                         vnode.props[key]
                     )
                 }
             }
             
             if (typeof vnode.children === 'string') {
                 el.appendChild(document.createTextNode(vnode.children))
             } else if (Array.isArray(vnode.children)) {
                 vnode.children.forEach(child => renderer(child, el))
             }
             container.appendChild(el)
         render(vnode, document.body)
     }
    }
    </script>

这个为什么也不行

  <template>
      <div> </div>
  </template>

  <script>
    export default { 
     name: 'Count',
     setup() {
         const vnode = {
  tag: 'div',  
  props: {
    onClick: () => { console.log('点击了.') },
    class: 'red'
  },
  children: '点击'
}
     },

    function render(vnode, container){
  // 根据tag创建标签
  const el = document.createElement(vnode.tag)
  // 遍历props 将属性、事件添加到DOM上
  for(const key in vnode.props){
    // 匹配事件
    if(/^on/.test(key)){
      el.addEventListener(
         key.substring(2).toLowerCase(),
         vnode.props[key]
      )
    }else{
       el.setAttribute(key, vnode.props[key])
    }
  }
  let children = vnode.children
  // 处理children
  if(typeof children === 'string'){
     // 判断字符串的时候 创建文本节点
     const textNode = document.createTextNode(children)
     el.appendChild(textNode)
  }else if( Array.isArray(children) ){
     // 子节点 递归渲染
     children.forEach( item=> render(item, el) )
  }
  container.appendChild(el)
  render(vnode, docunmet.body)
}
     
     
    }
    
    </script>

不行

<!DOCTYPE html>
<html>
  <script src="https://unpkg.com/vue@next"></script>
<div id="app">
  
</div>     

  <script>
         const vnode = {
  tag: 'div',  
  props: {
    onClick: () => { console.log('点击了.') },
    class: 'red'
  },
  children: '点击'
}
     

    function render(vnode, container){
  // 根据tag创建标签
  const el = document.createElement(vnode.tag)
  // 遍历props 将属性、事件添加到DOM上
  for(const key in vnode.props){
    // 匹配事件
    if(/^on/.test(key)){
      el.addEventListener(
         key.substring(2).toLowerCase(),
         vnode.props[key]
      )
    }else{
       el.setAttribute(key, vnode.props[key])
    }
  }
  let children = vnode.children
  // 处理children
  if(typeof children === 'string'){
     // 判断字符串的时候 创建文本节点
     const textNode = document.createTextNode(children)
     el.appendChild(textNode)
  }else if( Array.isArray(children) ){
     // 子节点 递归渲染
     children.forEach( item=> render(item, el) )
  }
  container.appendChild(el)
  render(vnode, docunmet.body)
}
     

         
        </script>
    </head>
</html>

不行

<!DOCTYPE html>
<html>
  <script src="https://unpkg.com/vue@next"></script>
<div id="app">
</div>     

  <script>
         const vnode = {
             tag: 'div',
             props: {
                 onClick: () => alert('hello')
             },
             children: 'click me'
         }
         
         function render(vnode, container) {
             const el = document.createElement(vnode.tag)
             for (const key in vnode.props) {
                 if (/^on/.test(key)) {
                     el.addEventListener(
                         key.substr(2).toLowerCase(),
                         vnode.props[key]
                     )
                 }
             }
             
             if (typeof vnode.children === 'string') {
                 el.appendChild(document.createTextNode(vnode.children))
             } else if (Array.isArray(vnode.children)) {
                 vnode.children.forEach(child => renderer(child, el))
             }
             container.appendChild(el)
         render(vnode, document.body)
     }
    
    </script>
     

         
        </script>
    </head>
</html>

不知道该怎样写

<!DOCTYPE html>
<html>
  <script src="https://unpkg.com/vue@next"></script>
<div>
 
</div>     

  <script>
         const vnode = {
             tag: 'div',
             props: {
                 onClick: () => alert('hello')
             },
             children: 'click me'
         }
         
         function renderer(vnode, container) {
             const el = document.createElement(vnode.tag)
             for (const key in vnode.props) {
                 if (/^on/.test(key)) {
                     el.addEventListener(
                         key.substr(2).toLowerCase(),
                         vnode.props[key]
                     )
                 }
             }
             
             if (typeof vnode.children === 'string') {
                 el.appendChild(document.createTextNode(vnode.children))
             } else if (Array.isArray(vnode.children)) {
                 vnode.children.forEach(child => renderer(child, el))
             }
             container.appendChild(el)
         renderer(vnode, document.body)
     }
    
    </script>
     

         
        </script>
    </head>
</html>