一种MVVM设计模式JavaScript库实现方法技术

本发明专利技术提供一种MVVM设计模式JavaScript库实现方法，包括以下步骤：S1：对于数据的所有属性设置监听器Observer；S2：设计订阅者Watcher，收到属性的变化通知并执行相应的函数，从而更新视图；S3：将Observer和Watcher关联，实现简单的双向绑定数据；S4：订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。

A JavaScript library implementation method of MVVM design pattern

【技术实现步骤摘要】
一种MVVM设计模式JavaScript库实现方法
本专利技术涉及一种WEB前端的开发方法，尤其是涉及一种轻量级的WEB前端MVVM设计模式JavaScript库实现方法。
技术介绍
Web前端开发是Web技术发展中的一个重要组成部分，在传统的前端开发中由于外界因素的影响导致其开发形式呈现出简单化的特点，即以页面为主体来展示界面中的信息。然而随着科学技术的不断进步，Web前端开发形式上变得更为复杂，但是其功能方面也逐渐实现了与用户间的相互交流。由于大量的DOM操作，会影响前端效率。以下是流行的MVVM框架的介绍。1.Riot3.0：提供了一个类似于基于组件的开发模型(在Riot中称之为Tag)，它提供了小巧精美的API。Riot和Vue在设计理念上可能有许多相似处。尽管相比Riot，Vue要显得重一点，Vue还是有很多显著优势的：更好的性能。Riot使用了遍历DOM树而不是虚拟DOM，但实际上用的还是脏检查机制，因此和AngularJS患有相同的性能问题。更多成熟工具的支持，Vue提供官方支持webpack和Browserify本文档来自技高网...

【技术保护点】
1.一种MVVM设计模式JavaScript库实现方法，包括以下步骤：/nS1：对于数据的所有属性设置监听器Observer；/nS2：设计订阅者Watcher，收到属性的变化通知并执行相应的函数，从而更新视图；/nS3：将Observer和Watcher关联，实现简单的双向绑定数据；/nS4：订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。/n

【技术特征摘要】
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)获取到最外层节点后，调用co...

【专利技术属性】
技术研发人员：万达，董世永，
申请(专利权)人：创盛视联数码科技北京有限公司，
类型：发明
国别省市：北京;11