如何减少重复代码,以面向对象方式开发?

比如一个弹框需求,我想抽象一些公共的字段与方法,避免重复性编码。
我直接上代码了,大家应该都能看懂~

//问题:采用以下的方式,每次都要定义 visible,open,sure等重复性的属性和方法
/let formDialog = reactive({
visible: false,
open: () => {
formDialog.visible = true;
},
sure: function () {
formDialog.visible = false;
}
});
/

//所以我想使用继承解决重复性问题
class FormDialogBase {

public visible: boolean = false;

constructor() {
}
//定义一个 open 方法,供外部调用
public open() {
//this 为 undefined,无法更好的面向对象,无法使用继承重用代码
this.visible = true;
}

public sure() {
//this 为 undefined,无法更好的面向对象,无法使用继承重用代码
this.visible = false;
}
}

class FormDialog extends FormDialogBase {

//表单内容
public name: string = “”;

constructor() {
super();
}
}

//但是将 new FormDialog() 使用 reative 包装,但是 FormDialog 内部无法使用 this 了,会报 this 为 undefined 的错误
//所以我想问下我想避免每次都要定义 visible,open,sure等重复性的属性和方法,有什么好办法吗?
let formDialog = reactive(new FormDialog());

页面绑定:
<a-button type=“primary” @click=“formDialog.open”>添加
<a-modal v-model:visible=“formDialog.visible” title=“Basic Modal” @ok=“formDialog.sure”>

Some contents…


Some contents…


Some contents…


vue3这样还是有点搞头的,让前端变得有意思了起来

对于一个页面来说,页面内的任何元素都可以抽象为一个对象,它拥有着自己的内部属性和方法。
但是以目前vue的设计(或者说机制)貌似无法使用这种思想去编程开发,因为它更改了this指针,很蛋疼。很多逻辑都可以提出来共用,但没法使用this指针,就没法使用继承了。因此开发过程会出现很多重复的代码。同时也正是因为没办法使用面向对象思想开发一个页面(不要说抽象成组件,用组件我懂,但跨组件间操作确实难用,我觉得组件不是理想的解决方案),导致一个页面所有的元素绑定的字段、数据、方法都平摊在一个作用域内,好难受,大家有什么好办法解决吗?

应该是可以的,要不你在 constructor() { this.visible = false } 里面设置 visible = false

vue2不太清楚。
vue3完全可以用面向对象的思路开发,还可以用MVC的方式。

这里就用了class和继承的方式,使用了reactive。