js双向绑定和虚拟dom

一.假设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给记录下来用以更新