构建自己的js mvc框架

class UserModel {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    updateName(newName) {
        this.name = newName;
    }
}

<div id="user-info">
    <p>Name: <span id="name"></span></p>
    <p>Age: <span id="age"></span></p>
</div>

class UserView {
    constructor(model) {
        this.model = model;
        this.nameElement = document.getElementById('name');
        this.ageElement = document.getElementById('age');
        this.render();
    }

    render() {
        this.nameElement.textContent = this.model.name;
        this.ageElement.textContent = this.model.age;
    }
}

class UserController {
    constructor(model, view) {
        this.model = model;
        this.view = view;

        // 假设有一个按钮点击事件
        document.getElementById('update-name').addEventListener('click', () => {
            const newName = prompt('Enter new name:');
            this.model.updateName(newName);
            this.view.render();
        });
    }
}

const user = new UserModel('John Doe', 30);
const view = new UserView(user);
const controller = new UserController(user, view);