abstract：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>在页面渲染方式 上MVVM与传统的MVC模式相比有哪些优势</title> </head> <body> <h2>在页面渲染方式 上MVVM与传统的MVC模式相比有哪些优势</h2> <div> <p></p> <p> 1.MVC </p> <p> a.MVC:是Model-View-Controller的缩写;</p> <p> b.M:Model,模型,主要处理与数据库相关的业务逻辑;</p> <p> V:View,视图,主要负责数据在客户端/浏览器上的展示; </p> <p> C:Controller:控制器,视图与模型之间传递消息,例如接受请求,选择模型,渲染视图等; </p> <p> c.MVC基本的运行流程是: </p> <p> 1. 视图发起请求-->控制器接收请求-->转发给对应模型处理-->模型将结果返回到控制器-->控制器返回到视图; </p> <p> 2. 简单描述: View-->Controller-->Model-->Controller-->View, 即 V-C-M-C-V; </p> <p> 3. 整个过程是封闭的,单向的,视图与模型之间不允许直接直接通讯,必须通过控制器进行; </p> <p> d. MVC开发的基本原则: </p> <p> 1. 需要服务器端配合,模型Model与控制器Controller都在服务器端完成; </p> <p> 2. 服务器处理过的数据,必须通过JavaScript在前端进行渲染; </p> <p> 2. '厚模型,薄控制器',业务逻辑尽可能写到模型中,控制器仅调用模型提供的接口即可; </p> <p> 2.MVVM: </p> <p> a.随着前端页面开发越来越复杂,用户与数据的交互也越来越频繁,而很多交互都是临时性的,没有必要每一次都要 和服务器中的模型对象进行交互,但是传统的jQuery等函数库又力不从心,这时MVVM模型就应运而生啦。 </p> <p> b.MVVM: 是Model-View-ViewModel的缩写; </p> <p> M:Model层, V:View层, VM: ViewModel层; </p> <p> c.Model:JavaScript对象/模型, View:HTML代码/模板,各司其职,完全分离 </p> <p> d.VM层:负责Model与View之间的交互,完全使用JavaScript进行编写; </p> <p> e.基本流程: VM层根据Model数据来更新View,或者根据View来更新Model,这个过程是双向的,即双向数据绑定; </p> <p> f.服务器端只负责更新Model即可,而Model就是一个JavaScript对象,所以服务器只需要返回可被Model解析的 数据即可,例如:json,html等,这样就完全实现了面向接口/API编程。 </p> <p> g.Vue.js就是一个完全采用了MVVM机制的前端开发框架,采用从底层向上的渐进式开发思想,易学易用! </p> <p> 3. MVVM 的优点 </p> <p> a.MVVM 兼容 MVC，可以先创建一个简单的 View Model，再慢慢迁移。 </p> <p> b.MVVM 使得 app 更容易测试，因为 View Model 部分不涉及 UI。 </p> <p> c.MVVM 双向绑定技术，当Model变化时，View-Model会自动更新，View也会自动变化。很好的做到数据的一致性 </p> </div>
Correcting teacher：查无此人Correction time：2019-05-20 09:19:38
Teacher's summary：完成的不错。编程有很多设计模式，多了解，对以后工作帮助很大。继续加油。