> 文章列表 > Javascript40行代码实现基础MVC原理。

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

文章列表

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

参考文章

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

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

// Controller
function Controller(model){// get Valuethis.getValue = ()=>{return model.inputValue}// onChangthis.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()

看下效果
Javascript40行代码实现基础MVC原理。

完整代码

<!--* @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"> // Modelfunction Model(){// 定义数据模型，包括值和修改值的方法this.inputValue = 'Look Me';this.setInputValue = value=>this.inputValue=value;}// Viewfunction View(controller){// 获取需要绑定的domconst inputNode = document.getElementById('mvc');const pNode = document.getElementById('mvcp');// 监听dom的change事件，调用控制器的change事件inputNode.addEventListener('input',(e)=>{controller.onChaneg(e);this.render()});// renderthis.render = ()=>{pNode.innerHTML=controller.getValue()}}// Controllerfunction Controller(model){// get Valuethis.getValue = ()=>{return model.inputValue}// onChangthis.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>