手记

MVVM框架

1.MVVM框架双向绑定

①解释

Model指的是数据部分,对应到前端就是Javascript对象,View指的是视图部分,对应到前端就是DOM,ViewModel就是连接视图和数据的中间件,在MVM架构下视图和数据是不能直接通讯的,通常会通过ViewModel来做通讯,ViewModel通常要实现一个Observer观察者,当数据发生变化,ViewModel能够观察到这种数据
的变化,然后通知到对应的视图进行更新,而当用户操作视图ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定

②例子

小明(model)喜欢上小花,但是又不敢直接表白,于是托小夏(viewModel)送一份情书给小花,小花(View)收到情书非常开心,对小明产生了好感。

model发生变化,通过viewModel通讯,view发生了改变。

这时其他同学都知道了,其中一个同学(user)跟小花说了小明的好话,于是小花更加喜欢小明,通过小夏告诉小明,小明更加用心追求。
user操作view,viewModel监听到view的变化,通知model做改动。
③精简
通过viewModel监听两端的变化,相互改变。

2.MVVM框架的应用场景

  • 1.针对具有复杂交互逻辑的前端应用
  • 2.提供基础的架构抽象
  • 3.通过Ajax数据持久化,保证前端用户体验
    • 好处:当前端对数据进行操作的时候,可以通过ajax请求对后端做数据持久化,不需要刷新整个页面,只需要改动DOM里面那部分数据和内容,特别是移动端应用场景。刷新页面的代价太昂贵,需要重新加载很多资源,虽然有些资源会被缓存,但是页面的DOM、JS、CSS会被浏览器重新解析一遍,因此移动端页面通常会做成SPA单页面,在这个基础上就诞生了许多MVVM框架
    • 精简:通过ajax提升用户体验和性能

3.MVVM框架

  • 1.Angular.js
  • 2.react.js
  • 3.vue.js
3人推荐
随时随地看视频
慕课网APP