这是在纯Javascript（typescript）中实现事件驱动编程的正确方法吗？

我以的Javascript示例为基础，尝试用事件实现我自己的版本。 我用的是合成事件。 到目前为止，只执行了一个操作，即addItem

应用程序的入口点：

class App {
    private model = new Model();
    private view = new View();
    public controller = new Controller(this.model, this.view);

    constructor() {
        this.setListeners()
    }

    setListeners() {
        document.addEventListener(this.view.AddItemEventType, ({ detail }: CustomEvent["detail"]) => {
            this.controller.addItem(detail)
        })

    }
}

window.addEventListener('load', () => new App(), false)

控制器：

export default class Controller {
    constructor(public model: Model, public view: View) { }

    addItem(title: Item["title"]) {
        this.model.insert({
            id: generateUuid(),
            completed: false,
            title
        });
    }
}

型号：

export default class Model {
    constructor() {}

    getLocalStorage(): Item[] {
        return JSON.parse(window.localStorage.getItem("data")!) || [];
    }
    setLocalStorage(itemList: Item[]) {
        return window.localStorage.setItem("data", JSON.stringify(itemList));
    }

    insert(item: Item){
        const itemList = this.getLocalStorage();
        itemList.push(item);
        this.setLocalStorage(itemList);
    }
}

视图（这是使用

CustomEvent

的位置）：

我的问题是：

• 你看到这个代码有什么问题吗
• 你会在生产中使用它吗

export default class View {
    public AddItemEventType = "AddItem";
    private addItemEvent = (title: string) => new CustomEvent(this.AddItemEventType, {detail: title});

    private input = document.querySelector('input')!;

    constructor() {
        this.addListeners();
    }

    addListeners() {
        this.input.addEventListener('change', ({target}: any): void => {
            const title = target.value.trim();
            if(title){
                document.dispatchEvent(this.addItemEvent(title));
            }
        })
    }
}