1.第一阶段,直接用JavaScript操作DOM节点,使用浏览器提供的原生API:
var dom = document.getElementById('name');
dom.innerHTML = 'Homer';
dom.style.color = 'red';
第二阶段,由于原生API不好用,还要考虑浏览器兼容性,jQuery横空出世,以简洁的API迅速俘获了前端开发者的芳心:
$('#name').text('Homer').css('color', 'red');
第三阶段,MVC模式,需要服务器端配合,JavaScript可以在前端修改服务器渲染后的数据。
现在,随着前端页面越来越复杂,用户对于交互性要求也越来越高,想要写出Gmail这样的页面,仅仅用jQuery是远远不够的。MVVM模型应运而生。
MVVM最早由微软提出来,它借鉴了桌面应用程序的MVC思想,在前端页面中,把Model用纯JavaScript对象表示,View负责显示,两者做到了最大限度的分离。
把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来,还负责把View的修改同步回Model。
ViewModel如何编写?需要用JavaScript编写一个通用的ViewModel,这样,就可以复用整个MVVM模型了。
这就是MVVM的设计思想:关注Model的变化,让MVVM框架去自动更新DOM的状态,从而把开发者从操作DOM的繁琐步骤中解脱出来!
Model——数据模型。
View——页面视图。
Controller——页面控制器,负责处理View和Model的事件。
数据关系
- View 接受用户交互请求
- View 将请求转交给Controller
- Controller 操作Model进行数据更新
- 数据更新之后,Model通知View更新数据变化
- View 更新变化数据
方式
所有方式都是单向通信
结构实现
View :使用 Composite模式 (混合模式)
View和Controller:使用 Strategy模式 (策略者模式)
Model和 View:使用 Observer模式同步信息(观察者模式)
mvp的全称为Model-View-Presenter,Model提供数据,View负责显示,Controller/Presenter负责逻辑的处理。MVP与MVC有着一个重大的区别:在MVP中View并不直接使用Model,它们之间的通信是通过Presenter (MVC中的Controller)来进行的,所有的交互都发生在Presenter内部,而在MVC中View会直接从Model中读取数据而不是通过 Controller。
数据关系
- View 接收用户交互请求
- View 将请求转交给 Presenter
- Presenter 操作Model进行数据更新
- Model 通知Presenter数据发生变化
- Presenter 更新View数据
MVP的优势
- Model与View完全分离,修改互不影响
- 更高效地使用,因为所有的逻辑交互都发生在一个地方—Presenter内部
- 一个Preseter可用于多个View,而不需要改变Presenter的逻辑(因为View的变化总是比Model的变化频繁)。
- 更便于测试。把逻辑放在Presenter中,就可以脱离用户接口来测试逻辑(单元测试)
方式
各部分之间都是双向通信
ViewModel: 相比较于MVC新引入的视图模型。是视图显示逻辑、验证逻辑、网络请求等代码存放的地方。
4.MVVM框架
MVVM框架主要包括三个部分Model、View和ViewModel,
Model指的是数据部分,对应到前端就是一些Javascript对象,
View指的视图部分,对应到前端就是DOM,
ViewModel就是连接数据和视图的中间件,
在MVVM的框架下视图和数据是不能直接通信的,它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者,
当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,
而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,
这实际上就实现了数据的双向绑定。
MVVM框架的主要应用场景
1)针对具有复杂交互逻辑的前端应用
2)提供基础的架构抽象
3)通过Ajax数据持久化,保证前端用户体验
好处就是当前后端进行一些数据交互的时候,前端可以通过Ajax请求对后端做数据持久化,不需要刷新整个页面,只需要改动DOM里需要改动的那部分数据和内容,
特别是对于移动端应用场景,刷新页面的代价太昂贵,会重新加载很多资源,虽然有些资源会被缓存,但是页面的DOM、JS、CSS都会被浏览器重新解析一遍,
因此,移动端页面经常会做成SPA单页应用,在这个基础上就诞生了很多MVVM框架,如Angular、React、Vue
Vue.js的核心思想
Vue.js的核心思想包括两个方面:数据驱动和组件化
数据驱动:DOM是数据的一种自然映射,在vue.js中只需要操作数据,vue.js通过directives指令去对DOM做一层封装,当数据发生变化,会通知指令去修改对应的DOM,数据驱动DOM变化,DOM是数据的一种自然映射,vue.js还会对操作做一些监听,当我们修改视图的时候,vue.js监听到这些变化,从而去改变数据,这样就实现了数据的双向绑定。
组件化的目的是扩展HTML元素,封装可重用的代码
组件设计原则:
1)页面上每个独立的可视/可交互区域视为一个组件,
2)每个组件对应一个工程目录,组件所需要的各种资源在这个目录下就近维护,
3)页面不过是组件的容器,组件可以嵌套自由组合形成完整的页面。
MVVM设计模式的优点
1. 低耦合。View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的”View”上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。
3. 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,生成xml代码。
4. 可测试。界面素来是比较难于测试的,而现在测试可以针对ViewModel来写。