码迷,mamicode.com
首页 > Web开发 > 详细

前后端分层模式MVC&MVVM

时间:2018-06-26 01:00:20      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:动态   维护   代码   issue   分享   设计   创建   数据校验   关注   

早期


 

特点

  页面由 JSP、PHP 等工程师在服务端生成

  JSP 里揉杂大量业务代码

  浏览器负责展现,服务端给什么就展现什么,展现的控制在 Web Server 层

技术分享图片

优点

  简单明快,本地起一个 Tomcat 或 Apache 就能开发,调试什么的都还好,只要业务不太复杂。

缺点

   前端难以搭建本地环境

  代码重用性,扩展性,维护性很低

后端 MVC 开发


 

特点

  • View:进行数据显示。
  • Model:用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。
  • Controller:处理用户交互,负责转发请求,并对请求进行处理(向模型请求数据或发送数据)

    服务器端的MVC流程:

    客户端发送请求 -> 服务器触发Controller -> 服务器进行Model各种操作 -> 服务器根据Model数据渲染View -> 服务器回复请求,包含了整个View的html -> 客户端重新渲染整个页面,所有的css都又计算了一遍,所有的js都重新执行了一遍,所有的资源都重新请求了一遍(虽然可能已经cache了)

技术分享图片

 

优点

  代码可维护性得到明显好转

  线上模板的渲染还是由java来做的,形成的是带有动态数据的html,比较有利于SEO

缺点

    随着不同终端的出现,前端的工作量变大。但是前端依然依赖着后端(都在一个项目中进行开发)

  前后端职责依旧纠缠不清

前后端分离


 

特点

  ajax带来了Web开发革命性的变化。前端和应用服务器分离,前端和后端通过Ajax来通信。

  前后端分工,前端使用ajax与后端数据交互,操作视图,甚至控制部分路由,后端提供服务与数据。

技术分享图片

 

优点

   前后端的分工非常清晰

缺点

   前端逻辑越来越重,越来越复杂,路由不好掌控。过分使用ajax不利于SEO。前端不坑重负

   这与 JSP 时代区别不大。复杂度从服务端的 JSP 里移到了浏览器的 JavaScript,浏览器端变得很复杂

前端分层


 

特点

  后端思想在前端进行应用 

  前端代码变得也需要保存数据、处理数据、生成视图(SPA),这导致了前端 MVC 框架的诞生

  前端的MVC只是后端MVC中的View里面再去分出来的MVC。前端的MVC是为了解决复杂前端情况下模块化 JS的问题。

  一个事件的发生是这样的过程:
  1. 用户和应用产生交互。
  2. 控制器的事件处理器被触发。
  3. 控制器从模型中请求数据,并将其交给视图。
  4. 视图将数据呈现给用户。

  模型

  用来存放应用的所有数据对象。比如,可能有一个User模型,用以存放用户列表、他们的属性及所有与模型有关的逻辑;当控制器从服务器抓取数据或创建新的记录时,它就将数据包装成模型实例。也就是说,我们的数据是面向对象的,任何定义在这个数据模型上的函数或逻辑都可以直接被调用。

  视图

  呈现给用户的,用户与之产生交互。在JavaScript应用中,视图大都是由HTML、CSS、JavaScript模板组成的。除了模板中简单的条件语句之外,视图不应当包含任何其他逻辑。
  将逻辑混入视图之中是编程的大忌,这并不是说MVC不允许包含视觉呈现相关的逻辑,只要这部分逻辑没有定义在视图之内即可。我们将视觉呈现逻辑归类为“视图助手”(helper):和视图相关的独立的小工具函数。

  控制器

  模型和视图之间的纽带。控制器从视图获取事件和输入,对它们(很可能包含模型)进行处理,并相应地更新视图。当页面加载时,控制器会给视图添加事件监听,比如监听表单提交或按钮点击。然后,当用户和你的应用产生交互时,控制器中的事件触发器就开始工作了。

技术分享图片

 

后端MVC中的view是前端MCV的全部

 技术分享图片

  前端MVC流程(前端其实大部分是MV+X,不一定有Controller):

  客户端根据用户的行为修改客户端Model -> 客户端更新和该Model相关的View -> 客户端Model发送sync请求到服务器,只包含改变了哪些数据 -> 服务器审核数据改动是否合法,只需回复是否修改成功 -> 客户端收到成功,什么都不用做;不成功,则把刚才改的View改回来,然后通知用户。(当然,也可以在客户端的Model里面也加入审核机制,这样对不合法数据的反应更快,但还是得保留服务器端的审核)

  比较一下可以看到,前端MVC需要向服务器端传递和接收的数据量都少很多,而前端要做的等待和渲染工作也少了很多。换言之,会提供更快的交互反馈,也意味着更好的用户体验。同时,服务器端的负载也略有降低,因为基本上只需要在数据库上提供一个RESTful API即可。

优点

  清晰的分工,可以让开发并行

  部署相对独立,产品体验可以快速改进。

缺点

  开发者在代码中大量调用相同的DOM API, 处理繁琐,操作冗余,使得代码难以维护

  大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。
  当 Model 频繁发生变化,开发者需要主动更新到View ;当用户的操作导致Model发生变化,开发者同样需要将变化的数据同步到Model中, 这样的工作不仅繁琐,而且很难维护复杂多变的数据状态。

MVVM 模式


 

特点

另一些框架提出 MVVM 模式,用 View Model 代替 Controller。

  • Model
  • View
  • View-Model:简化的 Controller,为 View 提供处理好的数据,不含其他逻辑。

本质:view 绑定 view-model,视图与数据模型强耦合。数据的变化实时反映在 view 上,不需要手动处理。

技术分享图片

 

优点 

  前端应用的复杂程度已不同往日,暴露出了三个痛点问题:
  开发者在代码中大量调用相同的DOM API, 处理繁琐,操作冗余,使得代码难以维护。
  大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。
  当 Model 频繁发生变化,开发者需要主动更新到View ;当用户的操作导致Model发生变化,开发者同样需要将变化的数据同步到Model中, 这样的工作不仅繁琐,而且很难维护复杂多变的数据状态。
  早期 jQuery 的出现就是为了前端能更简洁的操作DOM 而设计的,但它只解决了第一个问题,另外两个问题始终伴随着前端一直存在。
  MVVM 的出现,完美解决了以上三个问题。
  MVVM 的三部分:
  Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;
  View 代表UI 组件,它负责将数据模型转化成UI 展现出来,
  ViewModel 是一个同步View 和 Model的对象。
  View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互。
  ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

缺点

    代码不能复用。比如后端依旧需要对数据做各种校验,校验逻辑无法复用浏览器端的代码。如果可以复用,那么后端的数据校验可以相对简单化。
   全异步,对 SEO 不利。往往还需要服务端做同步渲染的降级方案。
   性能并非最佳,特别是移动互联网环境下。

 

参考:https://blog.csdn.net/u010924834/article/details/51025127 

     https://github.com/lifesinger/blog/issues/184

前后端分层模式MVC&MVVM

标签:动态   维护   代码   issue   分享   设计   创建   数据校验   关注   

原文地址:https://www.cnblogs.com/lizhhmac/p/9226275.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!