1、常见的三种开发模式

首先明确一点:开发模式≠设计模式
开发模式:一个开发项目的方式或标准,RMVC

(1)MVC模式(感觉重点在view)

MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑(C)、数据(M)、界面显示(V)分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。

当用户对视图层做出操作后,视图层捕获到这个操作,然后把权力交给管理层去进行预处理,从而决定调用哪个模型层去执行相关的业务逻辑,最后视图层观察到模型层变更了后,去重新更新界面

在这里插入图片描述

①用户可以向 View 发送指令(DOM 事件),再由 View 直接要求 Model 改变状态。

②用户也可以直接向 Controller 发送指令(改变 URL 触发 hashChange 事件),再由 Controller 发送给 View。

③Controller 非常薄,只起到路由的作用,而 View 非常厚,业务逻辑都部署在 View。

优点:
耦合性低,重用性高,部署快,可维护性高,有利于软件工程化管理
缺点:
由于模型model和视图view要严格的分离,给前端程序带来了很大的困难,每次操作需要彻底的测试。
这个模式有个问题就是这三者是之间都有关联,但是model发生变化后被view通过观察者模式监控到,从而渲染新的视图,这也就导致了view强依赖与特定的model层

(2) MVP模式 (感觉重点在 Presenter)

MVP是Model-View-Presenter简称,MVP是从经典的模式MVC演变而来,它们的基本思想有相通的地方Controller/Presenter负责逻辑的处理,Model提供数据,View负责显示:

在这里插入图片描述
①各部分之间的通信,都是双向的。

②View 与 Model 不发生联系,都通过 Presenter 传递。可以将一个Presenter用于多个视图,而不需要改变Presenter的逻辑。这个特性非常的有用,因为视图的变化总是比模型的变化频繁。

③View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。而view又由于view和model之间没有直接的关联,就导致后期model->view的手动同步逻辑麻烦,维护困难。

缺点
由于对视图的渲染放在了Presenter中,所以视图和Presenter的交互会过于频繁。-旦视图需要变更, 那么Presenter也需要变更了。

(3)MVVM模式(感觉重点在VM,viewModel)

Model:数据模型。普通的javascript数据对象(其实就是一个对象,对象里放了数据),用于对数据的操作。

View:视图。表示UI组件,作用是将模型的数据转换成UI展示出来,也就是前端展示页面。

ViewModel:视图-模型。用于同步Model和View,用于双向绑定数据与页面,就是vue的实例。

MVVM的调用关系和MVP一样。但是,在ViewModel当中会有一个叫Binder。只需要在view的模板语法中,指令式地声明view上的显示的内容和model的哪一块数据进行绑定即可。当ViewModel对Model进行更新的时候,Binder会自动把数据更新到View上去;当用户对View进行操作,Binder也会自动把数据更新到Model上去。这种方式也称为:双向数据绑定。

在这里插入图片描述
①vue使用MVVM响应式编程模型,避免直接操作DOM ,降低DOM操作的复杂性。

优点
●低耦合。视图(View) 可以独立于Model变化和修改, -个ViewModel可以绑定到不同的View上, 当View变化的时候Mode可以不变, 当Model变化的
时候View也可以不变。
●可重用性。你可以把一些视图逻辑放在一 个ViewModel里面, 让很多view重用这段视图逻辑。
●可测试。界面素来是比较难于测试的,而现在测试可以针对ViewModel来写。

Logo

前往低代码交流专区

更多推荐