首页 > 其他分享 >名词（术语）了解--架构-MVCMVVMMVP

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

时间：2024-11-03 23:19:03浏览次数：3  
标签：架构 name -- void 视图 MVCMVVMMVP email string view

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

MVC

  1. 模型（Model）

    • 负责应用程序的数据逻辑和业务规则
    • 维护数据的状态和完整性
    • 与数据库等持久化层交互
    • 不依赖于视图和控制器
    • 当数据发生变化时，通知相关的视图进行更新

  2. 视图（View）

    • 负责数据的可视化展示
    • 将模型的数据呈现给用户
    • 接收用户的操作输入
    • 可以存在多个视图展示同一个模型的数据
    • 不直接处理业务逻辑

  3. 控制器（Controller）

    • 作为模型和视图之间的中介
    • 处理用户的交互请求
    • 更新模型的状态
    • 选择合适的视图进行展示
    • 协调整个应用程序的工作流程

MVC的工作流程：

  1. 用户通过视图界面进行操作
  2. 控制器接收用户的请求
  3. 控制器调用相应的模型进行数据处理
  4. 模型返回处理结果给控制器
  5. 控制器选择合适的视图进行展示
  6. 视图更新界面显示

MVC的优势：

  1. 关注点分离：每个组件负责特定的功能，使代码结构清晰
  2. 代码复用：模型可以被多个视图复用
  3. 并行开发：不同团队可以同时开发不同组件
  4. 维护性好：修改某一组件不会影响其他组件

实际应用示例：

# Model
class UserModel:
    def __init__(self):
        self.name = ""
        self.email = ""
    
    def save(self):
        # 保存用户数据到数据库
        pass

# View
class UserView:
    def show_user_details(self, name, email):
        print(f"User: {name}")
        print(f"Email: {email}")
    
    def get_user_input(self):
        name = input("Enter name: ")
        email = input("Enter email: ")
        return name, email

# Controller
class UserController:
    def __init__(self):
        self.model = UserModel()
        self.view = UserView()
    
    def create_user(self):
        name, email = self.view.get_user_input()
        self.model.name = name
        self.model.email = email
        self.model.save()
        self.view.show_user_details(name, email)

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

  1. Web开发：

    • Django (Python)：MTV模式（Model-Template-View，本质是MVC）
    • Spring MVC (Java)
    • Ruby on Rails：严格遵循MVC模式

  2. 移动开发：

    • iOS：Cocoa MVC
    • Android：Activity/Fragment可以看作Controller和View的组合

  3. 桌面应用：

    • JavaFX
    • Windows Forms

MVVM

  1. 模型（Model）

    • 代表应用程序的数据和业务逻辑
    • 包含数据实体、数据访问层和业务规则
    • 完全独立于UI层，不知道视图和视图模型的存在
    • 示例：
class UserModel {
    id: number;
    name: string;
    email: string;

    constructor(data: any) {
        this.id = data.id;
        this.name = data.name;
        this.email = data.email;
    }

    async save() {
        // 保存数据到服务器
    }
}

  1. 视图（View）

    • 负责UI的展示和用户交互
    • 通过数据绑定与ViewModel进行通信
    • 不包含业务逻辑
    • 示例（Vue.js）：
<template>
  <div>
    <input v-model="viewModel.userName" />
    <button @click="viewModel.saveUser">保存</button>
    <p>{{ viewModel.userStatus }}</p>
  </div>
</template>

  1. 视图模型（ViewModel）

    • 作为视图的数据源和命令源
    • 处理视图的业务逻辑
    • 将模型数据转换为视图可以使用的格式
    • 管理视图状态
    • 示例：
class UserViewModel {
    private model: UserModel;
    public userName: string = '';
    public userStatus: string = '';

    constructor(model: UserModel) {
        this.model = model;
        this.userName = model.name;
    }

    async saveUser() {
        try {
            this.userStatus = '保存中...';
            await this.model.save();
            this.userStatus = '保存成功';
        } catch (error) {
            this.userStatus = '保存失败';
        }
    }
}

  1. 数据绑定机制

    • 单向绑定：数据从ViewModel流向View
    • 双向绑定：View和ViewModel之间的数据自动同步
    • 示例（Vue.js的响应式系统）：
<script setup>
import { ref, computed } from 'vue'

const firstName = ref('')
const lastName = ref('')

// 计算属性示例
const fullName = computed(() => {
    return firstName.value + ' ' + lastName.value
})
</script>

<template>
    <input v-model="firstName" />
    <input v-model="lastName" />
    <p>全名: {{ fullName }}</p>
</template>

  1. MVVM的主要特点：

a. 数据绑定
  • 自动同步数据和UI
  • 减少手动DOM操作
  • 提高开发效率
b. 命令模式
// ViewModel中的命令
class ViewModel {
    saveCommand = {
        execute: async () => {
            // 执行保存操作
        },
        canExecute: () => {
            // 判断是否可以执行
            return this.isValid;
        }
    }
}
c. 状态管理
// Vue.js中的状态管理
const store = {
    state: reactive({
        count: 0
    }),
    increment() {
        this.state.count++
    }
}

  1. 实际应用场景：

a. Vue.js中的MVVM实现：
<!-- 组件示例 -->
<template>
    <div>
        <input v-model="user.name" />
        <p>{{ user.displayName }}</p>
        <button @click="saveUser">保存</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            user: {
                name: '',
                displayName: computed(() => `用户: ${this.user.name}`)
            }
        }
    },
    methods: {
        saveUser() {
            // 保存用户信息
        }
    }
}
</script>
b. Angular中的MVVM实现：
// 组件类
@Component({
    selector: 'app-user',
    template: `
        <input [(ngModel)]="user.name" />
        <p>{{user.displayName}}</p>
        <button (click)="saveUser()">保存</button>
    `
})
class UserComponent {
    user = {
        name: '',
        get displayName() {
            return `用户: ${this.name}`;
        }
    };

    saveUser() {
        // 保存用户信息
    }
}

  1. MVVM的优势：

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

  1. 最佳实践：

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

MVP

  1. 模型（Model）

    • 负责数据和业务逻辑
    • 完全独立于UI层
    • 示例：
class UserModel {
    private id: number;
    private name: string;
    private email: string;

    constructor(data: any) {
        this.id = data.id;
        this.name = data.name;
        this.email = data.email;
    }

    async save(): Promise<boolean> {
        // 保存数据到服务器
        return true;
    }

    validate(): boolean {
        return this.email.includes('@');
    }
}

  1. 视图（View）

    • 定义视图接口
    • 实现具体的UI展示
    • 将用户操作委托给Presenter
    • 示例：
// 视图接口
interface IUserView {
    setName(name: string): void;
    setEmail(email: string): void;
    showError(message: string): void;
    showSuccess(message: string): void;
}

// 具体视图实现
class UserView implements IUserView {
    private nameElement: HTMLInputElement;
    private emailElement: HTMLInputElement;
    private presenter: UserPresenter;

    constructor() {
        this.presenter = new UserPresenter(this);
        this.bindEvents();
    }

    private bindEvents() {
        document.getElementById('saveButton')
            .addEventListener('click', () => {
                this.presenter.onSaveClicked();
            });
    }

    setName(name: string): void {
        this.nameElement.value = name;
    }

    setEmail(email: string): void {
        this.emailElement.value = email;
    }

    showError(message: string): void {
        alert(message);
    }

    showSuccess(message: string): void {
        alert(message);
    }
}

  1. 展示者（Presenter）

    • 处理视图逻辑
    • 操作Model
    • 更新View
    • 示例：
class UserPresenter {
    private view: IUserView;
    private model: UserModel;

    constructor(view: IUserView) {
        this.view = view;
        this.model = new UserModel({});
    }

    async onSaveClicked() {
        if (!this.model.validate()) {
            this.view.showError('数据验证失败');
            return;
        }

        try {
            const success = await this.model.save();
            if (success) {
                this.view.showSuccess('保存成功');
            } else {
                this.view.showError('保存失败');
            }
        } catch (error) {
            this.view.showError('发生错误');
        }
    }
}

  1. MVP的主要特点：

a. 严格的分层
// 视图层只负责UI展示
interface IView {
    render(data: any): void;
    showLoading(): void;
    hideLoading(): void;
}

// Presenter层处理业务逻辑
class Presenter {
    private view: IView;
    private model: Model;

    handleUserAction() {
        this.view.showLoading();
        this.model.process()
            .then(data => {
                this.view.render(data);
                this.view.hideLoading();
            });
    }
}
b. 视图接口化
// 定义视图接口
interface ILoginView {
    getUserName(): string;
    getPassword(): string;
    showError(message: string): void;
    navigateToHome(): void;
}

// 实现视图接口
class LoginActivity implements ILoginView {
    private presenter: LoginPresenter;

    constructor() {
        this.presenter = new LoginPresenter(this);
    }

    getUserName(): string {
        return document.getElementById('username').value;
    }

    getPassword(): string {
        return document.getElementById('password').value;
    }

    showError(message: string): void {
        // 显示错误信息
    }

    navigateToHome(): void {
        // 导航到主页
    }
}

  1. 实际应用示例：

a. Android中的MVP实现：
// View接口
interface MainView {
    fun showProgress()
    fun hideProgress()
    fun setItems(items: List<String>)
}

// Presenter
class MainPresenter(private val view: MainView) {
    private val model = MainModel()

    fun loadItems() {
        view.showProgress()
        model.getItems { items ->
            view.hideProgress()
            view.setItems(items)
        }
    }
}

// Activity实现View接口
class MainActivity : AppCompatActivity(), MainView {
    private lateinit var presenter: MainPresenter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        presenter = MainPresenter(this)
        presenter.loadItems()
    }

    override fun showProgress() {
        progressBar.visibility = View.VISIBLE
    }

    override fun hideProgress() {
        progressBar.visibility = View.GONE
    }

    override fun setItems(items: List<String>) {
        // 更新UI
    }
}
b. Web应用中的MVP实现：
// View接口
interface IProductView {
    displayProducts(products: Product[]): void;
    showLoadingIndicator(): void;
    hideLoadingIndicator(): void;
}

// Presenter
class ProductPresenter {
    constructor(
        private view: IProductView,
        private model: ProductModel
    ) {}

    async loadProducts() {
        this.view.showLoadingIndicator();
        try {
            const products = await this.model.getProducts();
            this.view.displayProducts(products);
        } finally {
            this.view.hideLoadingIndicator();
        }
    }
}

// View实现
class ProductPage implements IProductView {
    private presenter: ProductPresenter;

    constructor() {
        this.presenter = new ProductPresenter(this, new ProductModel());
    }

    displayProducts(products: Product[]): void {
        // 渲染产品列表
    }

    showLoadingIndicator(): void {
        // 显示加载指示器
    }

    hideLoadingIndicator(): void {
        // 隐藏加载指示器
    }
}

  1. MVP的优势：

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

  1. 最佳实践：

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

标签：架构,name,--,void,视图,MVCMVVMMVP,email,string,view
From： https://blog.csdn.net/weixin_40539956/article/details/143400424

相关文章

  • STM32——PWM
    目录1、PWM2、芯片手册通用定时器（TIM1/TIM8）高级定时器（TIMx）3、如何配置生成一个PWM波形4、示例5、如何配置出来的5.1、RCC 5.2、时基单元5.3、PWM输出5.4、具体配置1、PWMPWM信号：PWM信号通过改变高电平和低电平的持续时间比（占空比）来调节输出功率。定时器：STM32......
  • Linux基础命令（八） 之 alias ，history，stat，type，特殊符号及命令行快捷键
    目录一，命令别名alias常见用法二，命令历史history参数及其作用常见用法三.显示文件或文件系统的详细信息stat参数及其作用常见用法四，显示命令的类型type参数及其作用常见用法五，特殊符号及命令行快捷键一，命令别名alias别名是命令的快捷方式。对于需要经常......
  • 【一学就会】Oracle通过伪列ROWNUM来实现分页功能
    本人详解作者：王文峰，参加过CSDN2020年度博客之星，《Java王大师王天师》公众号：JAVA开发王大师，专注于天道酬勤的Java开发问题中国国学、传统文化和代码爱好者的程序人生，期待你的关注和支持！本人外号：神秘小峯山峯转载说明：务必注明来源（注明：作者：王文峰哦）【一学就会】O......
  • LeetCode题练习与总结：两整数之和--371
    一、题目描述给你两个整数 a 和 b ，不使用 运算符 + 和 - ，计算并返回两整数之和。示例1：输入：a=1,b=2输出：3示例2：输入：a=2,b=3输出：5提示：-1000<=a,b<=1000二、解题思路这个问题可以通过位运算来解决。位运算中的“与”操作（&）和“异或”操作（^......
  • LeetCode题练习与总结：超级次方--372
    一、题目描述你的任务是计算 a^b 对 1337 取模，a 是一个正整数，b 是一个非常大的正整数且会以数组形式给出。示例1：输入：a=2,b=[3]输出：8示例2：输入：a=2,b=[1,0]输出：1024示例3：输入：a=1,b=[4,3,3,8,5,2]输出：1示例4：输入：a=2147483647,b=[2,......
  • 听说你要WPS办公软件？自取。
    前言听说有小伙伴都没有Office软件，哦豁，小白这不就来了嘛？其实小白是分享了很多好资源的，只是你不知道怎么找？资源获取一常用软件链接一：https://pan.xunlei.com/s/VOAmXWfXtkjA9A1wN0h5g6HGA1?pwd=d72m#链接二：https://pan.quark.cn/s/558930521ce3这里只截取了部分截图，常......
  • 【Google Cloud】专用 Google 访问通道的组成和利用方法详解
    专用Google访问通道（PrivateGoogleAccess）允许从没有外部IP的虚拟机访问GoogleCloud服务的API。本文将详细介绍此功能。什么是专用Google访问通道专用Google访问通道（PrivateGoogleAccess）是指在GoogleCloud（原称GCP）中，允许没有外部IP（公网IP）的虚拟机或本地......
  • 微服务设计模式：节流模式（Throttling Pattern）
    微服务设计模式：节流模式（ThrottlingPattern）定义节流模式（ThrottlingPattern）是一种控制资源使用速率的设计模式，广泛应用于云计算和微服务架构中，以防止服务过载和资源耗尽。它通过限制客户端请求的数量，保证系统稳定性和可用性。结构节流模式的核心组件包括：请求过滤器：拦......
  • netstat命令
    netstat命令用于显示与IP、TCP、UDP和ICMP协议相关的统计数据，一般用于检验本机各端口的网络连接情况。netstat是在内核中访问网络及相关信息的程序，它能提供TCP连接，TCP和UDP监听，进程内存管理的相关报告。如果计算机有时候接收到的数据报导致出错数据或故障，不必感到奇怪，TCP/IP可......
  • harbor 使用https部署 与 docker 登录
    目录配置harbor证书1.生成证书颁发机构证书及私钥2.生成服务器私钥及证书签名请求（CSR）3.生成证书签名请求4.生成x509v3扩展文件。5.使用该v3.ext文件为Harbor服务器生成证书。6.将test.harbor.com.crt转换为test.harbor.com.cert,供Docker使用。Docker守护进程将.crt......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99