在 Android 开发中经常会用到一些架构,从 MVC 到 MVVP、MVVM等,这些架构会大大的解耦我们代码的功能模块,让我们的代码在项目中后期更容易扩展和维护。
在Flutter中同样有 MVC、MVP、MVVM等架构。在Android实际开发中,也有把项目从 MVC切换到 MVP,形成了一套 MVP 快速开发框架,且做了一个 AS 快速代码生成插件。所以在 Flutter 开发中也想着是不是可以用 MVP 架构去开发,且做个一样的代码生成插件。
所以在这是里主要看一下在 Flutter 中如何使用 MVP 模式来开发应用。
MVC
提到MVP就不得不提到MVC,关于MVC架构,可以看下面这张图:
MVC即Model View Controller,简单来说就是通过controller的控制去操作model层的数据,并且返回给view层展示,具体见上图。当用户出发事件的时候,view层会发送指令到controller层,接着controller去通知model层更新数据,model层更新完数据以后直接显示在view层上,这就是MVC的工作原理。
这种原理就会造成一个致命的缺陷:当很多业务逻辑写在vidget中时,widget既充当了View层,又充当了Controller层。因此,耦合性极高,各种业务逻辑代码和View代码混合在一起,你中有我我中有你,如果要修改一个需求,改动的地方可能相当多,维护起来十分不便。
MVP
MVP模式相当于在MVC模式中加了一个Presenter用于处理模型和逻辑,将View和Model完全独立开,在flutter开发中的体现就是widget仅用于显示界面和交互,widget不参与模型结构和逻辑。
使用MVP模式会使得代码多出一些接口,但是使得代码逻辑更加清晰,尤其是在处理复杂界面和逻辑时,可以对同一个widget将每一个业务都抽离成一个Presenter,这样代码既清晰逻辑明确又方便扩展。当然如果业务逻辑本身就比较简单的话使用MVP模式就显得没那么必要了。所以不需要为了用它而用它,具体的还是要根据业务需要。
简而言之:view就是UI,model就是数据处理,而persenter则是他们的纽带。
可能存在的问题
Model进行异步操作,获取结果通过Presenter回传到View时,出现View引用的空指针异常
Presenter和View互相持有引用,解除不及时造成的内存泄漏。
因此,在进行MVP架构设计时需要考虑Presenter对View进行回传时,View是否为空?
Presenter与View何时解除引用即Presenter能否和View层进行生命周期同步?
好了,说了这么多,我个人比较推荐mvp,主要是因为其相对比较简单且易上手。下面我们来看看具体如何优雅的实现MVP的封装。
MVP封装
代码结构
具体代码见最后
代码讲解
Model 封装
/// @desc 基础 model
/// @time 2019-04-22 10:33 am
/// @author Cheney
abstract class IModel {
///释放网络请求
void dispose();
}
import ‘package:flutter_mvp/model/i_model.dart’;
/// @desc 基础 Model 生成 Tag
/// @time 2019-04-22 12:06 am
/// @author Cheney
abstract class AbstractModel implements IModel {
String _tag;
String get tag => _tag;
AbstractModel() {
_tag = ‘${DateTime.now().millisecondsSinceEpoch}’;
}
}
复制代码IModel 接口有一个抽象的dispose,主要用于释放网络请求。
AbstractModel抽象类实现 IModel 接口,且构造方法中生成唯一的tag 用于取消网络请求。
具体代码见最后
Present 封装
import ‘package:flutter_mvp/view/i_view.dart’;
/// @desc 基础 Presenter
/// @time 2019-04-22 10:30 am
/// @author Cheney
abstract class IPresenter {
///Set or attach the view to this mPresenter
void attachView(V view);
///Will be called if the view has been destroyed . Typically this method will be invoked from
void detachView();
}
import ‘package:flutter_mvp/model/i_model.dart’;
import ‘package:flutter_mvp/presenter/i_presenter.dart’;
import ‘package:flutter_mvp/view/i_view.dart’;
/// @desc 基础 Presenter,关联 View\Model
/// @time 2019-04-22 10:51 am
/// @author Cheney
abstract class AbstractPresenter<V extends IView,