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

参考文章

M数据层 V视图 C控制器

  1. 先来一个dom结构,一个p标签,用来展示输入的内容,一个input标签,用来输入内容⬇️
<p id="mvcp"></p>
<input id="mvc"></input>
  1. 创建Model类,有value属性和setValue的方法
// Model
function Model(){
  // 定义数据模型,包括值和修改值的方法
  this.inputValue = 'Look Me';
  this.setInputValue = value=>this.inputValue=value;
}
  1. 创建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()
 }
}
  1. 创建Controller类,有获取model及setMode的方法
// Controller
function Controller(model){
    // get Value
    this.getValue = ()=>{
        return model.inputValue
    }
    // onChang
    this.onChaneg = (event)=>{
        model.setInputValue(event.target.value)
	}
}
  1. 分别创建M、V、C对象,并render
const model = new Model()
const controller = new Controller(model)
const view = new View(controller)
view.render()

看下效果
Javascript40行代码实现基础MVC原理。_第1张图片

完整代码


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>Documenttitle>
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>

你可能感兴趣的:(JS,JS设计模式,OTHER,javascript,mvc,前端)