随着手机用户数量的不断减少,小程序已经沦为互联网领域的热门话题。做为一种新型的应用领域形态,小程序将用户的应用领域体验提高至了一个代莱高度。而在小程序的研发中,MVVM框架可以说道就是非常关键的一个环节。在这篇文章中,我们将来深入探讨一下小程序的MVVM框架中,数据存取与视图更新的原理。
MVVM框架了解
MVVM就是Model-View-ViewModel的简写,就是一种基于数据存取的分层架构模式。它的核心思想就是将视图与数据拆分,同时实现数据的双向存取,从而在不能影响视图的情况下修改数据,并使开发者更加著眼于业务逻辑。
在MVVM框架中,Model就是数据的来源,ViewModel就是业务逻辑的处置者,View则就是用户界面的展现者。ViewModel做为Model和View的中间人,负责管理处置View的命令并更新Model的数据,同时也可以监听Model数据的变化并更新View的状态。
小程序中的MVVM框架
小程序的MVVM框架与传统的MVVM框架有所不同,它使用的就是基于“组件化”的架构模式。在小程序中,一个页面就是一个组件,而这个组件由三个部分形成:WXML模板、JavaScript脚本和WXSS样式表。其中WXML模板负责管理展现页面的结构和内容,JavaScript脚本负责管理页面逻辑的处置和数据的存取,而WXSS样式表则负责管理设置页面的样式。
小程序的MVVM框架使用的就是单向存取机制。也就是说,当数据发生变化时,小程序可以自动更新页面的视图,但是当用户操作方式视图时,并不能自动更新数据。这也就是小程序与传统MVVM模式最小的不同之处。
数据存取与视图更新原理
在小程序中,数据存取就是基于setData()方法同时实现的。当我们采用setData()方法更新数据时,小程序框架可以自动检测数据与否发生变化,如果变化了,就可以引爆视图的更新。那么,数据到底就是如何与视图展开存取的呢?接下来,我们去详尽介绍一下数据存取与视图更新的原理。
1.数据存取
小程序的数据存取就是基于JSON数据结构同时实现的。当我们将数据传至setData()方法后,小程序框架可以将数据转换成JSON格式,并将其与页面的data变量展开分拆。这个分拆的过程中,如果页面的data变量中存有相同的key值,就可以用代莱值全面覆盖旧有的值。
当数据发生变化时,小程序框架可以将代莱数据与旧有的数据展开对照,找到变化的部分,并展开更新。在这个更新的过程中,小程序可以采用一种类似Diff算法的策略,将数据的变化部分与视图展开存取,从而同时实现自动更新。
2.视图更新
当数据发生变化时,小程序框架可以引爆页面的再次图形,从而同时实现视图的更新。在页面图形的过程中,小程序可以将WXML模板翻译成对应的HTML标签,并将自定义组件转换成小程序原生的组件。同时,小程序框架还可以对页面的事件展开搜集,并分解成对应的JavaScript代码。
当页面图形顺利完成后,小程序框架可以继续执行对应的JavaScript代码,从而同时实现页面的初始化。在这个过程中,小程序框架可以将数据与视图展开存取,从而同时实现自动更新。当用户在视图上展开操作方式时,小程序框架可以检测操作方式的类型,并根据相同的类型去更新数据。
结语
小程序的MVVM框架使用的就是基于“组件化”的架构模式,具备非常低的灵活性和可扩展性。数据存取与视图更新就是小程序MVVM框架的核心机制,通过深入细致自学它们的原理,我们可以更好地认知小程序MVVM框架的工作原理,从而更加高效率地展开小程序的研发工作。