MVC设计模式(TypeScript)

MVC模式(TypeScript)

MVC 模式代表 Model-View-Controller（模型-视图-控制器） 模式。这种模式用于应用程序的分层开发。它应该算是描述系统架构的一种模式。

MVC架构通常会结合观察者模式，单例模式等等。

MVC架构由model，view和controller三者组成，基于职责分离的原则，三者分别承担不同的职责。

• view：负责界面显示逻辑
• model：负责数据封装以及相关业务逻辑
• controller：view与mode的中间者，负责传递事件，有时候可承担简单的业务逻辑

具体实现

创建模型

//model.ts
export class StudentModel {
    private rollNo:string;
    private name:string;
    public getRollNo():string{
       return this.rollNo;
    }
    public setRollNo( rollNo:string):void {
       this.rollNo = rollNo;
    }
    public  getName():string {
       return this.name;
    }
    public  setName( name:string):void {
       this.name = name;
    }
}

创建视图

//view.ts

export class StudentView {
    public printStudentDetails(studentName: string, studentRollNo: string): void {
        console.log("Student: ");
        console.log("Name: " + studentName);
        console.log("Roll No: " + studentRollNo);
    }
}

创建控制器

//ctrl.ts
import { StudentModel } from "./model";
import { StudentView } from "./view";

export class StudentController {
    private model: StudentModel;
    private view: StudentView;

    constructor(model: StudentModel, view: StudentView) {
        this.model = model;
        this.view = view;
    }

    public setStudentName(name: string): void {
        this.model.setName(name);
    }

    public getStudentName(): string {
        return this.model.getName();
    }

    public setStudentRollNo(rollNo: string): void {
        this.model.setRollNo(rollNo);
    }

    public getStudentRollNo(): string {
        return this.model.getRollNo();
    }

    public updateView(): void {
        this.view.printStudentDetails(this.model.getName(), this.model.getRollNo());
    }
}

主进程

以上就是三个模块的简单设计，还需要一个主进程去调用实现。

import { StudentController } from "./ctrl";
import { StudentModel } from "./model";
import { StudentView } from "./view";

//从数据库获取学生记录
let model: StudentModel = retrieveStudentFromDatabase();

//创建一个视图：把学生详细信息输出到控制台
let view: StudentView = new StudentView();
let controller: StudentController = new StudentController(model, view);

controller.updateView();

//更新模型数据
controller.setStudentName("John");
controller.updateView();

function retrieveStudentFromDatabase(): StudentModel {
    let studentModel: StudentModel = new StudentModel();
    studentModel.setName("Robert");
    studentModel.setRollNo("10");
    return studentModel;
}

输出结果

最后的输出结果：

Student: 
Name: Robert
Roll No: 10 
Student:    
Name: John  
Roll No: 10