理论
MV*
模型包括:MVC,MVP,MVVM,MVI。它们的基本思想是相通的:C/P/VM 负责逻辑的处理,Model 提供数据,View 负责显示;目的是相同的:实现视图、业务、数据三个部分代码的解耦。
MVC,MVP,MVVM,MVI是GUI程序演变过程中先后产生的设计模式,后者是前者的改进。三者区别就是解耦程度不同,后者解耦程度更大。
模型 | M | V | * |
---|---|---|---|
MVC | 数据来源 | 界面 | Controller处理业务 |
MVP | 数据来源 | 界面 | Presenter处理业务 |
MVVM | 数据来源 | 界面 | ModelView处理业务 |
区别
实例
WPF的MMVM
Xaml中的数据与DataContext
绑定;DataContext
就是ViewModel,ViewModel通过IOC获取Model中的数据。
ViewModel需要继承
GalaSoft.MvvmLight.ViewModelBase
基类。
View需要继承Window
基类。
Model需要继承一个自定义基类,用于实现IOC。
namespace WpfApp3
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
MainViewModel viewModel = new MainViewModel();
viewModel.Query();
this.DataContext = viewModel;
}
}
}
Vue的MVVM
view和ViewModel实现了双向绑定。
//view
<div id="app">
<input type="text" v-model="num"><button @click="num++">+</button>
<h1>
{{name}} 很帅<br>
{{num}}位女性为其着迷!
</h1>
</div>
//ViewModel
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data:{
name: "King",
num: 1
}
});
</script>
Spring的MVC
view和controller交互
view
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
Hi JSP. 现在时间是 ${now}
</body>
</html>
controller
@Controller
public class HelloController {
@RequestMapping("/hello")
public String hello(Model m){
m.addAttribute("now",DateFormat.getDateTimeInstance().format(new Date()));
//到/WEB-INF/jsp目录下去寻找hello.jsp文件
return "hello"; //视图重定向hello.jsp
}
}
Qt的MVC
Android的MVC
view和controller耦合在一起。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.jay.example.test.MainActivity" >
<TextView
android:id="@+id/txtOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="张全蛋"/>
</RelativeLayout>
public class MainActivity extends Activity {
private TextView txt;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); //view
txt = (TextView) findViewById(R.id.textOne);
//controller
txt.setText("helloWorld");
txt.setTextColor(Color.RED);
}
}