使用TypeScript实现MVC设计模式
最编程
2024-08-06 14:18:14
...
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
推荐阅读
-
设计模式__unity__unity 中的抽象工厂模式,使用单例模式加载资源
-
学习备忘录模式:使用go编写行为型设计模式中的手撸实例
-
Vue 的技巧:使用策略模式实现动态表单验证
-
理解JavaWeb开发:JSP的基本知识、语法与特性,内置对象、JavaBean组件以及MVC设计模式的应用
-
使用ipvsadm工具实现DR模式,并自动检测后端服务器状态的方法
-
超级详细指南:使用Maven搭建Spring MVC在Tomcat上进行本地部署并实现HelloWorld功能(第一部分)
-
JavaScript 设计模式及代码实现——代理模式
-
理解责任链模式:一种设计模式的实现与应用
-
聊聊前端MVC设计模式
-
使用TypeScript实现MVC设计模式