UI架构模式——MVC/MVVM/MV对比

2023年4月6日#架构404

AI 生成的摘要

MVC/MVVM/MV是三种不同的软件架构模式。MVC包括Controller、View和Model，Controller负责更新和监听View，Controller也负责获取和设置Model的数据，View与Model直接交互。MVVM包括View、ViewModel和Model，View通过数据绑定与ViewModel进行交互，ViewModel通过获取和设置Model的数据。MV包括View和StatefulModel，View通过观察和执行StatefulModel的操作。在MVX模式中，StatefulModel优先使用，如果无法修改StatefulModel或者只能修改ui层，则使用ViewModel，如果没有数据绑定框架则使用Controller。

MVC/MVVM/MV 对比#

scale 2
!theme vibrant
namespace mvc {
	namespace ui {
		class Controller
		class View
	}
	namespace data {
		class Model
	}
	Controller --> View :update & listen
	Controller --> Model : get & set
	View --> Model
}
namespace mvvm {
	namespace ui {
		class View
		class ViewModel
		View --> ViewModel : data binding
	}
	namespace data {
		class Model
		ViewModel --> Model : get & set
	}
}
namespace mv {
	namespace data {
		class StatefulModel
		class Model
		StatefulModel --> Model
	}
	namespace ui {
		class View
		View --> StatefulModel : observe & action
	}
}

MVX#

StatefulModel 优先
如果不能修改 StatefulModel 或者仅修改 ui 层，则使用 ViewModel
如果没有数据绑定框架使用 Controller

scale 2
!theme vibrant
namespace data {
	class StatefulModel
	class Model
	StatefulModel --> Model
}
namespace ui {
	class ViewModel
	class View
	class Controller
	Controller --> View : update & listen
    Controller --> ViewModel : get & set
	View --> ViewModel : data binding
	ViewModel --> StatefulModel : observe & action
	View --> StatefulModel : observe & action
}