[发明专利]一种MVVM设计模式JavaScript库实现方法

权利要求书

1.一种MVVM设计模式JavaScript库实现方法，包括以下步骤：

S1：对于数据的所有属性设置监听器Observer；

S2：设计订阅者Watcher，收到属性的变化通知并执行相应的函数，从而更新视图；

S3：将Observer和Watcher关联，实现简单的双向绑定数据；

S4：订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。

2.根据权利要求1所述的MVVM设计模式JavaScript库实现方法，其特征在于：步骤S1中，监听器Observer采用Object.defineProperty()，通过递归方法遍历所有属性值。

3.根据权利要求1所述的MVVM设计模式JavaScript库实现方法，其特征在于：步骤S2中，订阅者Watcher的实现包括以下步骤：

1)创建一个容纳订阅者的消息订阅器Dep，负责收集订阅者，然后在属性变化的时候执行对应订阅者的更新函数；

2)监听器Observer在其get函数执行了添加订阅者Wather的操作，在订阅者Watcher初始化时触发对应的get函数，去执行添加订阅者操作。

4.根据权利要求3所述的MVVM设计模式JavaScript库实现方法，其特征在于：步骤2)中，订阅者Watcher初始化时才需要添加订阅者，在订阅器进行如下操作：在Dep.target上缓存下订阅者，添加成功后再将其去掉。

5.根据权利要求1所述的MVVM设计模式JavaScript库实现方法，其特征在于：步骤S3中，双向绑定数据通过解析器Compile来做解析和绑定工作，完成指令的解析、初始化、编译三个过程，包括以下步骤：

1)解析HTML模板指令，并替换模板数据，初始化视图；

2)将模板指令对应的节点绑定对应的更新函数，初始化相应的订阅器；

3)遍历各个节点，对含有相关指定的节点进行处理；

4)获取到最外层节点后，调用compileElement函数，对所有子节点进行判断，如果节点是文本节点且匹配{{}}这种形式指令的节点就开始进行编译处理，编译处理首先需要初始化视图数据，对应步骤1)，接下去需要生成一个并绑定更新函数的订阅器，对应步骤2)。

6.根据权利要求5所述的MVVM设计模式JavaScript库实现方法，其特征在于：步骤2)中，解析模板首先获取到dom元素，然后对含有dom元素上含有指令的节点进行处理，通过先建一个fragment片段，将需要解析的dom节点存入fragment片段里再进行处理。

7.根据权利要求5所述的MVVM设计模式JavaScript库实现方法，其特征在于：步骤3)中，处理是指对带有'{{变量}}'形式的指令进行处理。

8.根据权利要求5所述的MVVM设计模式JavaScript库实现方法，其特征在于：步骤4)中，更多指令的解析编译在compileElement函数加上对其他指令节点进行判断，然后遍历其所有属性，看是否有匹配的指令的属性，如果有的话，就对其进行解析编译。

9.根据权利要求5所述的MVVM设计模式JavaScript库实现方法，其特征在于：通过添加一个v-model指令和事件指令的解析编译，对于这些节点使用函数compile进行解析处理，所述compile函数是挂载Compile原型上的，首先遍历所有节点属性，然后再判断属性是否是指令属性，如果是的话再区分是哪种指令，再进行相应的处理。

10.根据专利要求5所述的MVVM设计模式JavaScript库实现方法，其特征在于：初始化SelfVue类时，首先SelfVue通过Compile解析器扫描和解析每个HTML节点的相关指令，并初始化模板数据以及初始化相应的监听器、订阅器；通过监听器Observer劫持并监听所有属性，如果有变动，就通知订阅者Watcher，订阅者能够收到属性的变化通知并执行相应的函数，从而更新视图以实现数据的双向绑定。