一.假设html 元素里面通过"[[ ]]" 进行单项绑定 "{{}}"进行向绑定
二.假设你的html元素 是通过虚拟dom创建出来的
思路通过js对对象的属性的set和get进行拦截处理,调用相应的方法去更新元素;
set和get 拦截可以查看我写的 js原生模仿Polymer2.0属性监测
第一种情况:
1.同过js声明一给变量 obj = {}
2.对obj对向的所有属性设置get和set方法
3.get取值操作
4.set触发时掉用刷新
5.假设obj 有属性a
6.元素里有 "[[a]]"或者 "{{a}}"
7.html并不知道你的"[[]]"和"{{}}"是干嘛用的,只是认为是字符串
8.那么你需要实现一个解析器把 "[[]]"和"{{}}" 里面的a解析出来(同时把当前元素记录下来,用于更新)
9.到obj里面匹配到"a "就把"[[a]]" 或者"{{a}}" 替换成变量a的值
10.修改obj.a = 'n';触发set方法 把"[[a]]" 或者"{{a}}"替换成n
第二种情况:
对象模拟dom节点 实现方式这里不做介绍
每一个element会解析成一给dom对象
重复一中的12345
我们可以对他的内容进行动态绑定`${obj.a}`
把绑定的dom给记录下来用以更新