Javascript40行代码实现基础MVC原理。

news2024/9/30 7:25:30

参考文章

M数据层 V视图 C控制器

先来一个dom结构，一个p标签，用来展示输入的内容，一个input标签，用来输入内容⬇️

<p id="mvcp"></p>
<input id="mvc"></input>

创建Model类，有value属性和setValue的方法

// Model
function Model(){
  // 定义数据模型，包括值和修改值的方法
  this.inputValue = 'Look Me';
  this.setInputValue = value=>this.inputValue=value;
}

创建View类，绑定dom节点，添加input的监听事件，渲染内容的方法

// View
function View(controller){
 // 获取需要绑定的dom
 const inputNode = document.getElementById('mvc');
 const pNode = document.getElementById('mvcp');
 // 监听dom的change事件，调用控制器的change事件
 inputNode.addEventListener('input',(e)=>{
     controller.onChaneg(e);
     this.render()
 });
 // render
 this.render = ()=>{
     pNode.innerHTML=controller.getValue()
 }
}

创建Controller类，有获取model及setMode的方法

// Controller
function Controller(model){
    // get Value
    this.getValue = ()=>{
        return model.inputValue
    }
    // onChang
    this.onChaneg = (event)=>{
        model.setInputValue(event.target.value)
	}
}

分别创建M、V、C对象，并render

const model = new Model()
const controller = new Controller(model)
const view = new View(controller)
view.render()

看下效果
在这里插入图片描述

完整代码

<!--
 * @Author: atwLee
 * @Date: 2023-04-12 21:30:09
 * @LastEditors: atwLee
 * @LastEditTime: 2023-04-12 21:30:42
 * @Description: 
 * @FilePath: /ant-design/Users/atwlee/Downloads/index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <p id="mvcp"></p>
    <input id="mvc"></input>
    <script type="text/javascript"> 
        // Model
        function Model(){
            // 定义数据模型，包括值和修改值的方法
            this.inputValue = 'Look Me';
            this.setInputValue = value=>this.inputValue=value;
        }
        // View
        function View(controller){
            // 获取需要绑定的dom
            const inputNode = document.getElementById('mvc');
            const pNode = document.getElementById('mvcp');
            // 监听dom的change事件，调用控制器的change事件
            inputNode.addEventListener('input',(e)=>{
                controller.onChaneg(e);
                this.render()
            });
            // render
            this.render = ()=>{
                pNode.innerHTML=controller.getValue()
            }
        }
        // Controller
        function Controller(model){
            // get Value
            this.getValue = ()=>{
                return model.inputValue
            }
            // onChang
            this.onChaneg = (event)=>{
                model.setInputValue(event.target.value)
            }
        }
        const model = new Model()
        const controller = new Controller(model)
        const view = new View(controller)
        view.render()
    </script>
</body>
</html>