名词（术语）了解--架构-MVCMVVMMVP

名词（术语）了解–架构-MVC/MVVM/MVP

MVC

• 模型（Model）
  
  
  
  • 负责应用程序的数据逻辑和业务规则
    
  • 维护数据的状态和完整性
    
  • 与数据库等长期化层交互
    
  • 不依赖于视图和控制器
    
  • 当数据发生变化时，关照相关的视图进行更新
    
  
  
• 视图（View）
  
  
  
  • 负责数据的可视化展示
    
  • 将模型的数据出现给用户
    
  • 吸取用户的操纵输入
    
  • 可以存在多个视图展示同一个模型的数据
    
  • 不直接处置处罚业务逻辑
    
  
  
• 控制器（Controller）
  
  
  
  • 作为模型和视图之间的中介
    
  • 处置处罚用户的交互请求
    
  • 更新模型的状态
    
  • 选择合适的视图进行展示
    
  • 和谐整个应用程序的工作流程
    
  
  

MVC的工作流程：

• 用户通过视图界面进行操纵
  
• 控制器吸取用户的请求
  
• 控制器调用相应的模型进行数据处置处罚
  
• 模型返回处置处罚结果给控制器
  
• 控制器选择合适的视图进行展示
  
• 视图更新界面表现
  

MVC的上风：

• 关注点分离：每个组件负责特定的功能，使代码布局清楚
  
• 代码复用：模型可以被多个视图复用
  
• 并行开辟：差别团队可以同时开辟差别组件
  
• 维护性好：修改某一组件不会影响其他组件
  

实际应用示例：

1. # Model
2. class UserModel:
3.     def __init__(self):
4.         self.name = ""
5.         self.email = ""
6.    
7.     def save(self):
8.         # 保存用户数据到数据库
9.         pass
11. # View
12. class UserView:
13.     def show_user_details(self, name, email):
14.         print(f"User: {name}")
15.         print(f"Email: {email}")
16.    
17.     def get_user_input(self):
18.         name = input("Enter name: ")
19.         email = input("Enter email: ")
20.         return name, email
22. # Controller
23. class UserController:
24.     def __init__(self):
25.         self.model = UserModel()
26.         self.view = UserView()
27.    
28.     def create_user(self):
29.         name, email = self.view.get_user_input()
30.         self.model.name = name
31.         self.model.email = email
32.         self.model.save()
33.         self.view.show_user_details(name, email)

复制代码

MVC模式在现代框架中的应用：

• Web开辟：
  
  
  
  • Django (Python)：MTV模式（Model-Template-View，本质是MVC）
    
  • Spring MVC (Java)
    
  • Ruby on Rails：严格遵循MVC模式
    
  
  
• 移动开辟：
  
  
  
  • iOS：Cocoa MVC
    
  • Android：Activity/Fragment可以看作Controller和View的组合
    
  
  
• 桌面应用：
  
  
  
  • JavaFX
    
  • Windows Forms
    
  
  

MVVM

• 模型（Model）
  
  
  
  • 代表应用程序的数据和业务逻辑
    
  • 包罗数据实体、数据访问层和业务规则
    
  • 完全独立于UI层，不知道视图和视图模型的存在
    
  • 示例：
    
  
  

1. class UserModel {
2.     id: number;
3.     name: string;
4.     email: string;
6.     constructor(data: any) {
7.         this.id = data.id;
8.         this.name = data.name;
9.         this.email = data.email;
10.     }
12.     async save() {
13.         // 保存数据到服务器
14.     }
15. }

复制代码

• 视图（View）
  
  
  
  • 负责UI的展示和用户交互
    
  • 通过数据绑定与ViewModel进行通讯
    
  • 不包罗业务逻辑
    
  • 示例（Vue.js）：
    
  
  

1. <template>
2.   <div>
3.     <input v-model="viewModel.userName" />
4.     <button @click="viewModel.saveUser">保存</button>
5.     <p>{{ viewModel.userStatus }}</p>
6.   </div>
7. </template>

复制代码

• 视图模型（ViewModel）
  
  
  
  • 作为视图的数据源和下令源
    
  • 处置处罚视图的业务逻辑
    
  • 将模型数据转换为视图可以使用的格式
    
  • 管理视图状态
    
  • 示例：
    
  
  

1. class UserViewModel {
2.     private model: UserModel;
3.     public userName: string = '';
4.     public userStatus: string = '';
6.     constructor(model: UserModel) {
7.         this.model = model;
8.         this.userName = model.name;
9.     }
11.     async saveUser() {
12.         try {
13.             this.userStatus = '保存中...';
14.             await this.model.save();
15.             this.userStatus = '保存成功';
16.         } catch (error) {
17.             this.userStatus = '保存失败';
18.         }
19.     }
20. }

复制代码

• 数据绑定机制
  
  
  
  • 单向绑定：数据从ViewModel流向View
    
  • 双向绑定：View和ViewModel之间的数据自动同步
    
  • 示例（Vue.js的响应式系统）：
    
  
  

1. <script setup>
2. import { ref, computed } from 'vue'
4. const firstName = ref('')
5. const lastName = ref('')
7. // 计算属性示例
8. const fullName = computed(() => {
9.     return firstName.value + ' ' + lastName.value
10. })
11. </script>
13. <template>
14.     <input v-model="firstName" />
15.     <input v-model="lastName" />
16.     <p>全名: {{ fullName }}</p>
17. </template>

复制代码

• MVVM的紧张特点：
  

a. 数据绑定

• 自动同步数据和UI
  
• 淘汰手动DOM操纵
  
• 进步开辟效率
  

b. 下令模式

1. // ViewModel中的命令
2. class ViewModel {
3.     saveCommand = {
4.         execute: async () => {
5.             // 执行保存操作
6.         },
7.         canExecute: () => {
8.             // 判断是否可以执行
9.             return this.isValid;
10.         }
11.     }
12. }

复制代码

c. 状态管理

1. // Vue.js中的状态管理
2. const store = {
3.     state: reactive({
4.         count: 0
5.     }),
6.     increment() {
7.         this.state.count++
8.     }
9. }

复制代码

• 实际应用场景：
  

a. Vue.js中的MVVM实现：

1. <!-- 组件示例 -->
2. <template>
3.     <div>
4.         <input v-model="user.name" />
5.         <p>{{ user.displayName }}</p>
6.         <button @click="saveUser">保存</button>
7.     </div>
8. </template>
10. <script>
11. export default {
12.     data() {
13.         return {
14.             user: {
15.                 name: '',
16.                 displayName: computed(() => `用户: ${this.user.name}`)
17.             }
18.         }
19.     },
20.     methods: {
21.         saveUser() {
22.             // 保存用户信息
23.         }
24.     }
25. }
26. </script>

复制代码

b. Angular中的MVVM实现：

1. // 组件类
2. @Component({
3.     selector: 'app-user',
4.     template: `
5.         <input [(ngModel)]="user.name" />
6.         <p>{{user.displayName}}</p>
7.         <button (click)="saveUser()">保存</button>
8.     `
9. })
10. class UserComponent {
11.     user = {
12.         name: '',
13.         get displayName() {
14.             return `用户: ${this.name}`;
15.         }
16.     };
18.     saveUser() {
19.         // 保存用户信息
20.     }
21. }

复制代码

• MVVM的上风：
  

• 更好的关注点分离
  
• 更轻易进行单元测试
  
• 更好的代码复用
  
• 更好的可维护性
  
• 低落视图和业务逻辑的耦合
  

• 最佳实践：
  

• 保持ViewModel的纯粹性
  
• 避免在View中写业务逻辑
  
• 使用计算属性处置处罚数据转换
  
• 合理使用数据绑定
  
• 注意性能优化
  

MVP

• 模型（Model）
  
  
  
  • 负责数据和业务逻辑
    
  • 完全独立于UI层
    
  • 示例：
    
  
  

1. class UserModel {
2.     private id: number;
3.     private name: string;
4.     private email: string;
6.     constructor(data: any) {
7.         this.id = data.id;
8.         this.name = data.name;
9.         this.email = data.email;
10.     }
12.     async save(): Promise<boolean> {
13.         // 保存数据到服务器
14.         return true;
15.     }
17.     validate(): boolean {
18.         return this.email.includes('@');
19.     }
20. }

复制代码

• 视图（View）
  
  
  
  • 定义视图接口
    
  • 实现详细的UI展示
    
  • 将用户操纵委托给Presenter
    
  • 示例：
    
  
  

1. // 视图接口
2. interface IUserView {
3.     setName(name: string): void;
4.     setEmail(email: string): void;
5.     showError(message: string): void;
6.     showSuccess(message: string): void;
7. }
9. // 具体视图实现
10. class UserView implements IUserView {
11.     private nameElement: HTMLInputElement;
12.     private emailElement: HTMLInputElement;
13.     private presenter: UserPresenter;
15.     constructor() {
16.         this.presenter = new UserPresenter(this);
17.         this.bindEvents();
18.     }
20.     private bindEvents() {
21.         document.getElementById('saveButton')
22.             .addEventListener('click', () => {
23.                 this.presenter.onSaveClicked();
24.             });
25.     }
27.     setName(name: string): void {
28.         this.nameElement.value = name;
29.     }
31.     setEmail(email: string): void {
32.         this.emailElement.value = email;
33.     }
35.     showError(message: string): void {
36.         alert(message);
37.     }
39.     showSuccess(message: string): void {
40.         alert(message);
41.     }
42. }

复制代码

• 展示者（Presenter）
  
  
  
  • 处置处罚视图逻辑
    
  • 操纵Model
    
  • 更新View
    
  • 示例：
    
  
  

1. class UserPresenter {
2.     private view: IUserView;
3.     private model: UserModel;
5.     constructor(view: IUserView) {
6.         this.view = view;
7.         this.model = new UserModel({});
8.     }
10.     async onSaveClicked() {
11.         if (!this.model.validate()) {
12.             this.view.showError('数据验证失败');
13.             return;
14.         }
16.         try {
17.             const success = await this.model.save();
18.             if (success) {
19.                 this.view.showSuccess('保存成功');
20.             } else {
21.                 this.view.showError('保存失败');
22.             }
23.         } catch (error) {
24.             this.view.showError('发生错误');
25.         }
26.     }
27. }

复制代码

• MVP的紧张特点：
  

a. 严格的分层

1. // 视图层只负责UI展示
2. interface IView {
3.     render(data: any): void;
4.     showLoading(): void;
5.     hideLoading(): void;
6. }
8. // Presenter层处理业务逻辑
9. class Presenter {
10.     private view: IView;
11.     private model: Model;
13.     handleUserAction() {
14.         this.view.showLoading();
15.         this.model.process()
16.             .then(data => {
17.                 this.view.render(data);
18.                 this.view.hideLoading();
19.             });
20.     }
21. }

复制代码

b. 视图接口化

1. // 定义视图接口
2. interface ILoginView {
3.     getUserName(): string;
4.     getPassword(): string;
5.     showError(message: string): void;
6.     navigateToHome(): void;
7. }
9. // 实现视图接口
10. class LoginActivity implements ILoginView {
11.     private presenter: LoginPresenter;
13.     constructor() {
14.         this.presenter = new LoginPresenter(this);
15.     }
17.     getUserName(): string {
18.         return document.getElementById('username').value;
19.     }
21.     getPassword(): string {
22.         return document.getElementById('password').value;
23.     }
25.     showError(message: string): void {
26.         // 显示错误信息
27.     }
29.     navigateToHome(): void {
30.         // 导航到主页
31.     }
32. }

复制代码

• 实际应用示例：
  

a. Android中的MVP实现：

1. // View接口
2. interface MainView {
3.     fun showProgress()
4.     fun hideProgress()
5.     fun setItems(items: List<String>)
6. }
8. // Presenter
9. class MainPresenter(private val view: MainView) {
10.     private val model = MainModel()
12.     fun loadItems() {
13.         view.showProgress()
14.         model.getItems { items ->
15.             view.hideProgress()
16.             view.setItems(items)
17.         }
18.     }
19. }
21. // Activity实现View接口
22. class MainActivity : AppCompatActivity(), MainView {
23.     private lateinit var presenter: MainPresenter
25.     override fun onCreate(savedInstanceState: Bundle?) {
26.         super.onCreate(savedInstanceState)
27.         presenter = MainPresenter(this)
28.         presenter.loadItems()
29.     }
31.     override fun showProgress() {
32.         progressBar.visibility = View.VISIBLE
33.     }
35.     override fun hideProgress() {
36.         progressBar.visibility = View.GONE
37.     }
39.     override fun setItems(items: List<String>) {
40.         // 更新UI
41.     }
42. }

复制代码

b. Web应用中的MVP实现：

1. // View接口
2. interface IProductView {
3.     displayProducts(products: Product[]): void;
4.     showLoadingIndicator(): void;
5.     hideLoadingIndicator(): void;
6. }
8. // Presenter
9. class ProductPresenter {
10.     constructor(
11.         private view: IProductView,
12.         private model: ProductModel
13.     ) {}
15.     async loadProducts() {
16.         this.view.showLoadingIndicator();
17.         try {
18.             const products = await this.model.getProducts();
19.             this.view.displayProducts(products);
20.         } finally {
21.             this.view.hideLoadingIndicator();
22.         }
23.     }
24. }
26. // View实现
27. class ProductPage implements IProductView {
28.     private presenter: ProductPresenter;
30.     constructor() {
31.         this.presenter = new ProductPresenter(this, new ProductModel());
32.     }
34.     displayProducts(products: Product[]): void {
35.         // 渲染产品列表
36.     }
38.     showLoadingIndicator(): void {
39.         // 显示加载指示器
40.     }
42.     hideLoadingIndicator(): void {
43.         // 隐藏加载指示器
44.     }
45. }

复制代码

• MVP的上风：
  

• 关注点分离更彻底
  
• 视图可以轻易替换
  
• 便于单元测试
  
• 业务逻辑可复用
  
• 维护性更好
  

• 最佳实践：
  

• 保持View的简单性
  
• Presenter不应该包罗Android/iOS等平台特定代码
  
• 使用接口定义View和Presenter的交互左券
  
• 避免在Presenter中直接操纵UI元素
  
• 合理处置处罚View的生命周期
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。