我做了一个无虚拟DOM的VUE!!!!!

409 阅读1分钟

没错,标题就是蹭VUE框架的,VUE就是一坨,感觉不如我的框架JBinder
JBinder命名类似JQuery,JQuery所做的是dom查询再操作,而JBinder所做的是声明数据和事件的绑定关系,在数据变化后,自动的将数据变化维护到dom上
JBinder目前支持以下能力:
1、数据和事件绑定

<!-- 模板通过data-*声明绑定关系,当*为函数绑定相应事件,为非函数绑定相应属性-->
<div id="app">
    <div 
      data-value="innerText">
      </div>
    <input 
      type="text" 
      data-value="value"       
      data-fn-set-value="input, change"/>
    <button 
      data-fn-add-value="click">value + 1
      </button>
</div>
const dom = document.getElementById('app')
const app = JBinder.new(
    dom.innerHTML,
    // 在此处声明模板中需要的数据
    {
        value: 0
        ,fnAddValue() {
            this.value ++
        }
        ,fnSetValue(dom, event) {
            this.value = dom.value
        }
    }
)
.mountAtDom(dom)
.mount()

2、条件和列表渲染

<!-- 条件渲染语法 if标签 test属性编写条件表达式-->
<div id="app">
    <div>a:<span data-a="innerText"></span></div>
    <button data-a1="click">a = 1</button>
    <button data-a0="click">a = 0</button>
    <if test="getA() && b">
        <div>a>0才会渲染</div>
    </if>
</div>
// 代码部分
const app = JBinder.new(
    document.getElementById('app').innerHTML,
    {
        a: 0
        ,b: 1
        ,getA() {return this.a}
        ,a1() {this.a = 1}
        ,a0() {this.a = 0}
    }
)
.mountAtDom(document.getElementById('app'))
.mount()
<!-- 列表渲染语法 for标签 list指定遍历的对象数组key-->
// 模板
<div id="app">
    <button data-alert-all="click">数组</button>
    <button data-listadd="click">数组+1</button>
    <button data-listdel="click">数组-1</button>
    <for list="dataList">
        <div>x:<span data-x="innerText"></span>y:<span data-y="innerText"></span><button data-xadd="click">x++</button></div>
    </for>
</div>       

// 代码
const app = JBinder.new(
    document.getElementById('app').innerHTML,
    {
        dataList: [
            {x:1, y:1},
            {x:2, y:2},
            {x:3, y:3},
        ]
        ,xadd() {
            this.x ++
        }
        ,alertAll() {
            alert(JSON.stringify(this.dataList))
        }
        ,listadd() {
            this.dataList.push({x:0, y:0})
        }
        ,listdel() {
            this.dataList.pop()
        }
    }
)
.mountAtDom(document.getElementById('app'))
.mount()

还支持组件引用,自定义渲染逻辑,详情可查看:JBinder (gitee.io)