Uncaught ReferenceError: renderer is not defined at，为什么不对，出不来alert警告框

hamimelon2020

已于 2022-04-05 14:47:32 修改

阅读量1.2k

点赞数

分类专栏： JavaScript vue 文章标签： javascript vue.js

于 2022-04-05 14:17:21 首次发布

本文链接：https://blog.csdn.net/weixin_40945354/article/details/123968782

版权

vue 同时被 2 个专栏收录

722 篇文章 4 订阅

订阅专栏

JavaScript

628 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<html>
<div id = "vnode.tag">
  <button class="btn" style="width:100px;height:50px">click me</button>
</div>

//<script type="text/javascript"></script>
<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.substre(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(chind, el))
   }

   container.appendChild(el)
}

renderer(vnode, document.body)
</script>
</html>

错误的

<!DOCTYPE html>
<html>
<div id = "app">
  <button class="btn" style="width:100px;height:50px">click me</button>
</div>

//<script type="text/javascript"></script>
<script>
  const vdom = h('div', {class:'red'}, [
    h('span', null['hello'])
  ])
  mount(vdom, document.getElementById('app'))
  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.substre(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(chind, el))
   }

   container.appendChild(el)
}

renderer(vnode, document.body)
</script>
</html>

还是不知道咋整，乱七八糟的

<html>
<style>
  .red {color: #f00;font-size:24px;}
</style>
<div id="app">
  <button>click me</button></div>
<script>
  const vdom = h('div',{class:'red'},[
    h('span',null,['hello'])
  ])
  mount(vdom,document.getElementById('app'))

  const vnode = {
    tag: 'div',
    props: {
      onClick: () =>alert('hello')
    },
    children: 'click me'
  }
  
  function h(tag,props,children){
    return {
        tag,
        props,
        children
    }
  }
  function mount(vnode,container){
    // 把container一层层传递下去
    const el = vnode.el = document.createElement(vnode.tag);
    // props 处理
    if(vnode.props){
        for(const key in vnode.props){
            const value = vnode.props[key];
            // props 有很多类型，这里假设都是 attribute
            el.setAttribute(key,value)
        }
    }
   // 处理 children
   if(vnode.children){
     // 假设子节点是字符串
     if(typeof vnode.children === 'string'){
         el.textContent = vnode.children;
     }else{ 
         vnode.children.forEach(child=>{
             mount(child,el)
         })
     }
   } 
   container.appendChild(el)
  }
</script>
</html>

<html>
<style>
  .red {color: #f00;font-size:24px;}
</style>
<div id="app">
  <button>click me</button></div>

<script>
  const createNode = (tag, props, children) => ({
  tag,
  props,
  children,
});
  createNode('div', { id: 'app' }, ['Hello World']);
const createElement = vnode => {
  if (typof vnode === 'string') {
    return document.createTextNode(vnode); // 如果是字符串就直接返回文本元素
  }
  const el = document.createElement(vnode.tag);
  if (vnode.props) {
    Object.entries(vnode.props).forEach(([name, value]) => {
      el[name] = value;
    });
  }
  if (vnode.children) {
    vnode.children.forEach(child => {
      el.appendChild(createElement(child));
    });
  }
  return el;
  createElement(createNode("div", { id: "app" }, ["Hello World"]));
</script>
</html>

<!DOCTYPE html>
<html>
<div id = "vnode.tag">
  <button class="btn" style="width:100px;height:50px">click me</button>
</div>

//<script type="text/javascript"></script>
<script src="https://unpkg.com/vue@next"></script>

<script>
  import { h } from 'vue'
  
  export default {
    render() {
      return h('h1', { onClick: handler })
    }
  }
  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.substre(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(chind, el))
   }

   container.appendChild(el)
}

renderer(vnode, document.body)
</script>
</html>

hamimelon2020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Uncaught ReferenceError: renderer is not defined at，为什么不对，出不来alert警告框

<!DOCTYPE html><html><div id = "vnode.tag"> <button class="btn" style="width:100px;height:50px">click me</button></div>//<script type="text/javascript"></script><script> const vnode = { ta
复制链接

扫一扫