领域驱动设计
- VO(View Object)
视图对象,用于展示层,其作用是把某个指定页面或组件的所有数据封装起来。 - DO(Domain Object)
领域对象,从现实世界中抽象出来有形或无形的业务实体 - PO(Presistent Object)
持久化对象,在关系型数据库中跟持久层的数据结构形成一一对应的映射关系 - Domain
领域驱动层,用户与数据交互的核心中转站,控制用户数据收集、请求转向等。
ViewModel和View一起组成领域驱动架构体系中的展示层Presention,在MVVM架构中,ViewModel连接视图View和数据业务的Model层,而Domain和Data数据持久化层共同组成整个Model。
常见的客户端结构设计有三种方式
- MVC Model-View-Controller
- MVP Model-View-Presenter
- MVVM Model-View-ViewModel
MVVM(Model-View-ViewModel)是一种软件架构设计模式,由微软WPF和Silverlight的架构师Ken Cooper和Ted Peters开发,是一种简化用户界面的事件驱动编程方式,由John Gossman于2005年博客发表。
MVVM是一种架构模式,并非一种框架,是一种思想,一种组织和管理代码的艺术。它利用数据绑定、属性依赖、路由事件、命令等特性实现高效灵活的架构。
WPF(Windows Presentation Foundation)是微软推出基于Windows的用户界面框架。
MVVM源于MVC(Model-View-Controller)模式,期间还演化出MVP(Model-View-Presenter)模式。MVVM的出现促进了GUI前端开发和后端开发逻辑的分离,提高了前端开发效率。
MVVM的核心是数据驱动即ViewModel,ViewModel是View和Model的关系映射。ViewModel类似中转站(Value Converter),负责转换Model中的数据对象,使得数据变得更加易于管理和使用。MVVM本质就是基于操作数据来操作视图进而操作DOM,借助于MVVM无需直接操作DOM,开发者只需完成包含声明绑定的视图模板,编写ViewModel中有业务,使得View完全实现自动化。
The term means "Model of a View", and can be thought of as abstraction of the view.
视图的模型,可将其想象成一个抽象化的视图。
在MVVM中View和Model是不可以直接进行通信的,它们之间存在这ViewModel这个中介充当着观察者的角色。当用户操作View,ViewModel感知到变化,然后通知Model发生相应改变,反之亦然。ViewModel向上与视图层View进行双向数据绑定,向下与Model通过接口请求进行数据交互,起到承上启下的作用。
KnockoutJS是最早实现MVVM模式的前端框架之一
ViewModel所封装出来的数据模型包含视图的状态和行为两部分,Model的数据模型只包含状态,这样的封装使得ViewModel可以完整地去描述View层。MVVM最标志的特性是数据绑定,MVVM的核心理念是通过声明式的数据绑定来实现View的分离,完全解耦View。
响应式双向数据绑定的实现原理
- 脏值检查
AngularJS实现方式
通过脏值检查的方式比对数据是否变更,来决定是否更新视图。最简单的方式是通过setInterval()
定时轮询检测数据变动。AngularJS只有在指定事件触发时进入脏值检测。
检查器是一颗树状的结构,当异步事件发生时,脏检查会从根组件开始,自上而下的对子组件进行检查,这种检查的性能存在很大问题。
- 观察者-订阅者(数据劫持)
VUE的实现方式
数据监听器
Observer将普通的JS对象传递给VUE实例的data选项,Vue将遍历此对象所有属性,并使用Object.defineProperty()方法将属性全部转换成setter和getter方法。当data中的属性被调用访问时,则会调用getter方法。当data中的属性被改变时,则会调用setter方法。指令解析器
Compiler 的作用是对每个元素节点的指令进行解析,替换模板数据,并绑定对应的更新函数,初始化相应的订阅。订阅者
Watcher作为连接Observer和Compiler的桥梁,能够订阅并接收每个属性变动的通知,执行指令绑定相应回调函数。消息订阅器
Dep内部维护了一个数组,用来执行收集订阅者Watcher,数据变动触发notify()
函数,在调用订阅者的update()
方法。