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

最新推荐文章于 2024-10-18 17:51:23 发布

ATWLee

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量278

点赞数

分类专栏： JS JS设计模式 OTHER 文章标签： javascript mvc 前端

本文链接：https://blog.csdn.net/bwater_monster/article/details/130163866

版权

JS 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

OTHER

15 篇文章 0 订阅

订阅专栏

JS设计模式

1 篇文章 0 订阅

订阅专栏

该文章展示了MVVM架构的一个简单实现，通过JavaScript创建了Model、View和Controller三个类，实现了数据绑定和实时更新视图的功能。用户在input输入时，控制器监听到变化，更新数据模型，进而自动刷新页面上的p标签内容。

摘要由CSDN通过智能技术生成

参考文章

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>