[插件]Vue react 基于的虚拟Dom库 Snabbdom, vnode virtual-dom

"scripts": {
   "dev": "parcel index.html --open",
   "build": "parcel build index.html"
 }

//导入snabbdom
import { h, init } from 'snabbdom'
let patch = init([])
//第一个参数：标签+选择器
//第二个参数：如果是字符串的画就是标签中的内容
//let vnode = h('div#container.cls','hello world')
let vnode = h('div#container',[
    h('h1','hello snabbdom'),
    h('p','这是一个p标签')])
//获取html文件中id为app的元素
let app = document.querySelector('#app')
let oldVnode = patch(app,vnode)
/*
vnode = h('div','hello Snabbdom')
//旧的节点对比新节点更新差异
patch(oldVnode,vnode)
*/
setTimeout(()=>{
    vnode = h('div#container',[
        h('h1','hello world'),
        h('p','hello p')
    ])
    patch(oldVnode,vnode)
    //清空页面（因为官网的清空有bug，所以用！直接注释）
    // patch(oldVnode,h('!'))
},2000)
// 照这种方法以此类推，也可以不用写setTimeout直接渲染

import {init ,h} from 'snabbdom'
//导入模块（按需导入）
import style from 'snabbdom/modules/style'
import eventlisteners from 'snabbdom/modules/eventlisteners'
//注册模块
let patch = init([
    style,
    eventlisteners
])
//使用h（）函数的第二个参数传入模块需要的数据
let vnode = h('div',{
    style:{
        backgroundColor:'red'
    },
    on:{
        click:eventHandler
    }
},[
    h('h1','hello snabbdom'),
    h('p','这是p标签')
])
function eventHandler () {
    console.log('点击')
}
let app = document.querySelector('#app')
patch(app,vnode)

<script>
       //事件出发器
       class EventEmitter {
           constructor () {
               this.subs = Object.create(null)//为null节约性能
           }
           //注册事件
           $on (eventType,handler) {
               this.subs[eventType] = this.subs[eventType] || []
               this.subs[eventType].push(handler)
           }
           //触发事件
           $emit (eventType) {
               if (this.subs[eventType]){
                   this.subs[eventType].forEach(handler =>{
                       handler()
                   })
               }
           }
       }
       let em = new EventEmitter()
       em.$on('click',() => {
           console.log('click2')
       });
       em.$on('click',() => {
           console.log('click2')
       });
       em.$emit('click')
   </script>