JavaScript MVVM框架的简单设计与实现

青旅半醒 2022-05-19 03:44 257阅读 0赞

MVVM(Model View ViewModel)是一种基于MVC和MVP的架构模式，它试图将用户界面（UI）从业务逻辑和行为中更加清晰地分离出来。

MVVM的设计思想：关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="userList">
        id:   <input type="text" id="id">  <br>
        name:   <input type="text" id="name">  <br>
        age:    <input type="text" id="age"> <br>
        <button id="add">添加</button>
        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>age</th>
                    <th>operation</th>
                </tr>
            </thead>
            <tbody>
    
            </tbody>
        </table>
    </div>
    
    
    <script>
    
        function UserManager(data,table){
            this.data = data;
            this.table = table;
            this.render = function() {
                let tbody = this.table.getElementsByTagName("tbody")[0];
                if(tbody){
                    tbody.remove();
                }
                tbody = document.createElement("tbody");
                this.data.forEach((user) => {
                    let trElement = document.createElement("tr");
                    for(u in user){
                        let input = document.createElement("input");
                        let tdElement = document.createElement("td");
                        input.value = user[u];
                        input.name = u;
                        input.setAttribute("disabled","disabled");
                        tdElement.appendChild(input);
                        trElement.appendChild(tdElement);
                        trElement.addEventListener('dblclick',(e)=>{
                            input.removeAttribute("disabled");
                        });
                    }
                    let tdButtonElement = document.createElement("td");
                    //delete
                    let deleteButton = document.createElement("button");
                    deleteButton.textContent = "delete";
                    deleteButton.addEventListener('click',(e)=>{
                        this.deleteUser(user);
                    });
                    tdButtonElement.appendChild(deleteButton);
    
                    //update
                    let updateButton = document.createElement("button");
                    updateButton.textContent = "update";
                    updateButton.addEventListener('click',(e)=>{
                        let inputEles = e.target.parentElement.parentElement.getElementsByTagName("input");
                        let data = {};
                        for(let i = 0; i < inputEles.length; i++){
                            data[inputEles[i].name] = inputEles[i].value;
                        }
                        this.updateUser(user,data);
                    });
                    tdButtonElement.appendChild(updateButton);
    
                    trElement.appendChild(tdButtonElement);
                    tbody.appendChild(trElement);
    
                });
                document.querySelector("#userList table").appendChild(tbody);
            };
            this.deleteUser = function(u){
                let index = this.data.indexOf(u);
                this.data.splice(index,1);
                this.render();
            };
    
            this.addUser = function(u){
                this.data.splice(this.data.length,0,u);
                this.render();
            };
            
            this.updateUser = function (u,data) {
                let index = this.data.indexOf(u);
                this.data.splice(index,1,data);
                this.render();
            }
    
    
        }
    
    
        window.onload=function () {
            let data = [{id: 1, name: 'john', age: 100}, {id: 2, name: 'john', age: 100}, {id: 3, name: 'john', age: 100}];
            let userManager = new UserManager(data,document.querySelector("#userList table"));
            userManager.render();
    
            let addButton = document.querySelector("#add");
            addButton.addEventListener('click',(e) =>{
                let u = {id:document.querySelector("#id").value,name: document.querySelector("#name").value, age:document.querySelector("#age").value};
                userManager.addUser(u);
            })
    
        }
    
    </script>
    
    </body>
    </html>

这样我们改变JavaScript对象的状态，会导致DOM结构作出对应的变化。这让我们的关注点从如何操作DOM变成了如何更新JavaScript对象的状态。