还不了解MVC、MVP、MVVM模式?(深度解析、全实例讲解)

  • 模式说明

示意图

  • 优点:(对比MVC模式)
  1. 耦合度更低:通过Presenter实现数据和视图之间的交互,完全隔离了View层与Mode层,二者互不干涉

避免了ViewModel的直接联系,又通过Presenter实现两者之间的沟通

  1. Activity代码变得更加简洁:简化了Activity的职责,仅负责UI相关操作,其余复杂的逻辑代码提取到了Presenter层中进行处理

2.3 MVVM

为了更加分离M、V层,更加释放Activity的压力,于是出现了MVVM模式

  • 定义

VM层:ViewModel,即 View的数据模型和Presenter的合体

基本上与 MVP 模式完全一致,将逻辑处理层 Presenter 改名为 ViewModel

  • 模式说明

示意图

  • 优点

使得视图层(View)& 控制层(Controller)之间的耦合程度进一步降低,关注点分离更为彻底,同时减轻了Activity的压力

本文主要讲解MVC和MVP模式,不过多阐述MVVM模式.


3. MVC、MVP模式的区别

================

示意图


4. 三种模式出现的初衷

=============

  • MVC模式的出现

为解决程序模块化问题,于是MVC模式出现了:将业务逻辑、数据处理与界面显示进行分离来组织代码,即分成M、V、C层;

  • MVP模式的出现

但M、V层还是有相互交叉、隔离度不够,同时写到Activity上使得Activity代码臃肿,于是出现了MVP: 隔离了MVC中的 M 与 V 的直接联系,将M、V层更加隔离开来,并释放了Activity的压力;

  • MVVM模式的出现

为了更加分离M、V层,更加释放Activity的压力,于是出现了MVVM: 使得V和M层之间的耦合程度进一步降低,分离更为彻底,同时更加减轻了Activity的压力。

下面,我将详细讲解一下最常用的MVP模式的核心思想 & 使用


5. MVP模式详解

===========

此处主要详细分析MVP模式的核心思想,并实例说明。

5.1 核心思想

把Activity里的逻辑都抽离到ViewPresenter接口中去 & 由具体的实现类来完成。具体实现思路如下:

  1. Activity中的UI逻辑抽象成View接口 & 由具体的实现类来完成

  2. 把业务逻辑抽象成Presenter接口 & 由具体的实现类来完成

  3. Model类还是原来MVC模式的Model

5.2 实现步骤

MVP模式的UML

示意图

通过UML图可看出,使用MVP模式的步骤如下:

示意图

5.3 实例讲解

本节通过一个 英语词典app实例 讲解 MVP模式具体的实现

前言:工程项目的列表架构

MVP技术架构的项目结构非常清晰:把MVP层分别分为三个文件夹:ModelViewPresenter,每个文件下分别是对应的接口和实现的类

其中Model层的fanyi类是作为实现用GSON解析JSON信息的一个JavaBean

步骤1:设置View层(IView接口 & 实现类)

/**

  • View接口:IfanyiView

  • 需定义在实现类中需要用到的方法

*/

public interface IfanyiView {

void init();//初始化

void SetInfo(String str); //输出翻译信息

void SetError(); //输出出错信息

}

/**

  • View实现类:MainActivity类

  • 注:由于MainActivity是对应View层的实现类,所以要实现View层的接口

*/

public class MainActivity extends AppCompatActivity implements IfanyiView {

private EditText et;

private TextView tv;

CidianPresenter cidianPresenter; // 声明了Presenter对应类

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// 实例化P对应类的对象和findView

init();

// 接受用户的输入

findViewById(R.id.btnfanyi).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

//将View层获得的数据传入Presenter层 ,注意还要传递MainActivity

cidianPresenter.InputToModel(et.getText().toString(), MainActivity.this);

}

});

}

@Override

public void init(){

//实例化P类的对象和findView

cidianPresenter = new CidianPresenter(this);

et = (EditText) findViewById(R.id.editText);

tv = (TextView) findViewById(R.id.tv);

}

@Override

//输出出错信息

public void SetError() {

tv.setText(“查询不成功,请检查网络”);

}

//输出翻译信息

@Override

public void SetInfo(String str){

tv.setText(str);

}

}

// 从上述代码可看出,MainActivity只做了FindView、setListener的工作(包含了cidianPresenter),简洁清爽!

步骤2:设置Presenter层(创建IPresenter接口&实现类)

/**

  • Presenter接口:ICidianPresenter

  • 需定义在实现类中需要用到的方法

*/

public interface ICidianPresenter {

void InputToModel(String input,Context context); // 将View层获得的数据传入Model层

}

/**

  • Presenter层的实现类:CidianPresenter类

  • 注:由于CidianPresenter是对应Presenter层的实现类,所以要实现Presenter层的接口

*/

public class CidianPresenter implements onfanyiListener,ICidianPresenter {

// 1. 声明View层对应接口、Model层对应的类

IfanyiView fyV;

fanyimodel fanyimodel;

// 2. 重构函数,初始化View接口实例、Model实例

public CidianPresenter(IfanyiView fyV){

this.fyV = fyV;

fanyimodel = new fanyimodel();

}

// 3.将View层获得的数据传入Model层,注意要传递this.当前类

@Override

public void InputToModel(String input, Context context){

fanyimodel.HandleData(input, context, this);

}

// 回调函数,调用UI更新

@Override

public void onSuccess(String str) {

fyV.SetInfo(str); }

// 回调函数,调用UI输出出错信息

@Override

public void onError() {

fyV.SetError(); }

}

// 注:

// a. 保留IfanyiView的引用,就可直接在CidianPresenter当前类进行UI操作而不用在Activity操作

// b. 保留了Model层的引用就可以将View层的数据传递到Model层

步骤3:Model层(Model层接口 & 实现类)

/**

  • Model层接口:Ifanyi

  • 需定义在实现类中需要用到的方法

*/

public interface Ifanyi {

void HandleData(String input,Context context,final onfanyiListener listener);

String fanyiToString(fanyi fy);

}

/**

  • Model层的实现类:fanyiModel类

  • 注:由于fanyiModel是对应Model层的实现类,所以要实现Model层的接口

*/

public class fanyimodel implements Ifanyi {

private fanyi fy = new fanyi();

public void HandleData(String input,Context context,final onfanyiListener listener){

// 使用Volley框架来实现异步从网络的有道API获取翻译数据

RequestQueue mQueue = Volley.newRequestQueue(context);

StringRequest stringRequest = new StringRequest(“http://fanyi.youdao.com/openapi.do?keyfrom=Yanzhikai&key=2032414398&type=data&doctype=json&version=1.1&q=”+input, new Response.Listener() {

@Override

public void onResponse(String s) {

// 用Gson方式解析获得的json字符串

Gson gson = new Gson();

fy = gson.fromJson(s.trim(),fy.getClass());

// 回调监听器的函数把处理数据后的结果(翻译结果)返回给Presenter层

listener.onSuccess(fanyiToString(fy));

}

}, new Response.ErrorListener() {

最后

我坚信,坚持学习,每天进步一点,滴水穿石,我们离成功都很近!
以下是总结出来的字节经典面试题目,包含:计算机网络,Kotlin,数据结构与算法,Framework源码,微信小程序,NDK音视频开发,计算机网络等。

字节高级Android经典面试题和答案


《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》点击传送门,即可获取!
= gson.fromJson(s.trim(),fy.getClass());

// 回调监听器的函数把处理数据后的结果(翻译结果)返回给Presenter层

listener.onSuccess(fanyiToString(fy));

}

}, new Response.ErrorListener() {

最后

我坚信,坚持学习,每天进步一点,滴水穿石,我们离成功都很近!
以下是总结出来的字节经典面试题目,包含:计算机网络,Kotlin,数据结构与算法,Framework源码,微信小程序,NDK音视频开发,计算机网络等。

字节高级Android经典面试题和答案

[外链图片转存中…(img-oxCMuRA6-1715414717878)]
[外链图片转存中…(img-EHg4Mfzc-1715414717878)]

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》点击传送门,即可获取!

  • 30
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. props和state的区别: props:父组件传递给子组件的数据,子组件不能直接修改props的值,只能通过父组件传递新的props来更新组件的状态。 state:组件内部维护的数据,可以通过setState()方法来更新组件的状态,每次更新state都会重新渲染组件。 2. 受控组件: 受控组件是指表单元素的值被state控制的组件,通过onChange事件来更新state中的值,从而更新组件的显示。 使用场景:表单中需要对用户输入进行校验、格式化等操作时,可以使用受控组件。 3. HOC(Higher Order Component): 高阶组件是一个函数,接受一个组件作为参数,返回一个新的组件。新的组件具有被包裹组件的所有特性,可以在新组件中添加额外的功能或修改原有的功能。 使用场景:在多个组件中都需要使用相同的逻辑或UI组件时,可以使用HOC来提取公共代码。 4. React类组件的构造中super是做什么的? 在React类组件的构造函数中,需要调用super(props)方法来继承父类的this对象,并将props传递给父类的构造函数。 5. Redux是什么?项目中如何使用的? Redux是一个JavaScript状态管理库,用于管理应用程序中的状态。它提供了一个局的状态容器,可以通过dispatch函数来修改状态,然后通过subscribe函数来监听状态变化。Redux可以与React等UI库结合使用,来管理应用程序的状态。 在项目中,可以通过安装redux和react-redux依赖来使用Redux。首先需要创建一个store来保存应用程序的状态,然后通过Provider组件将store传递给所有子组件。每个子组件可以通过connect函数来连接store,然后通过dispatch函数来修改状态。 6. React的项目优化有哪些? React的项目优化可以从以下几个方面入手: - 减少不必要的渲染:使用shouldComponentUpdate或React.memo来优化组件的渲染。 - 优化列表渲染:使用虚拟滚动或分页加载等方式来优化大量数据的列表渲染。 - 代码分割:使用React.lazy懒加载组件,减少首屏加载时间。 - CDN加速:使用CDN来加速静态资源的加载。 - SSR(服务端渲染):使用SSR来提升首屏渲染速度和SEO效果。 7. v-if v-for为什么不能放在同一个元素上? v-for会优先于v-if执行,如果两者同时存在于同一个元素上,那么v-if将会重复执行,导致性能问题或错误的渲染结果。 8. MVVM MVC MVP 三个的区别? - MVVM:Model-View-ViewModel,主要用于前端开发,将UI和业务逻辑分离,并且通过ViewModel来实现双向绑定。 - MVC:Model-View-Controller,主要用于后端开发,将数据、UI和业务逻辑分离,通过Controller来管理数据和UI的交互。 - MVP:Model-View-Presenter,类似于MVC,但是Presenter代替了Controller,主要用于前端开发,负责处理UI和业务逻辑之间的交互。 9. $route和$router的区别? - $route:表示当前路由信息的对象,包括路由路径、参数、查询参数等信息。 - $router:表示路由器的实例,可以通过$router.push()等方法来进行路由跳转。 10. 为什么有时候修改了值,可以打印修改的值,但是页面上不会改变? 这可能是因为React的渲染机制,当组件的状态发生改变时,并不会立即重新渲染组件,而是将修改的状态存储在一个队列中,等到下一次渲染时才会更新组件。如果修改状态的代码在异步函数或生命周期函数中执行,可能会导致渲染时机的问题,从而导致页面上不会立即更新。可以通过调用this.forceUpdate()方法来强制重新渲染组件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值