前端设计模式-MVP与MVVM
——墨问苍生
MVP设计模式：
Model：数据层（模组层）
Presenter：呈现层（业务逻辑相关的控制层）
View：视图层
以下是使用jQuery实现的TodoList
1 <!DOCTYPE html> 2 <!--MVP设计模式(本段代码并没有M层)--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Hello World</title> 7 <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.4.1.min.js"></script> 8 </head> 9 <body> 10 <div> 11 <input id="input" type="text"/> 12 <button id="btn">提交</button> 13 <ui id="list"></ui> 14 </div> 15 <script> 16 function Page(){ 17 18 }//构造函数 19 $.extend(Page.prototype,{ 20 init: function(){ 21 this.bindEvents() 22 }, 23 bindEvents:function() { 24 var btn = $('#btn'); 25 btn.on('click',$.proxy(this.handleBtnClick,this))//绑定事件，点击btn就会执行handleBtnClick函数 26 }, 27 handleBtnClick:function(){ 28 var inputElem = $("#input");//对选择器返回的jQuery对象做一个保存 29 var inputValue = $("#input").val(); 30 var ulElem = $("#list"); 31 ulElem.append('<li>'+inputValue+'</li>');//添加<li>节点到页面 32 inputElem.val('');//设置输入框内容为空 33 }//点击事件函数 34 }) 35 var page = new Page();//声明Page实例 36 page.init(); 37 </script> 38 </body> 39 </html>
可以看到，由V（视图层/DOM代码）发出事件请求到P（控制层/js代码），P可以选择去到M（数据层/模组层）获取一些数据或者返回结果到V，在MVP体系中，P是最关键的一层
MVVM设计模式：
以下是MVVM的代码示例：
<!DOCTYPE html> <!--MVVM设计模式--> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> <script src = 'vue.js'></script> </head> <body> <div id="app"> <input type="text" v-model="inputValue"/> <button v-on:click="handleBtnClick">提交</button> <!--"v-on"是Vue.js的标签指令，"click"用来定义点击事件的方法名--> <!--此处handleBtnClick为点击事件方法名，同下第27行--> <ul> <li v-for="item in list">{{item}}</li> <!--"v-for"是Vue.js的标签指令，"item in list"使得"item"变量遍历"list"数组--> </ul> </div> <script> var app = new Vue({ el: '#app', data: { list: [],//列表中的内容 inputValue: ''//输入框中的内容 }, //定义按钮点击事件↓ methods: { handleBtnClick:function(){ this.list.push(this.inputValue)//为数组添加数据 this.inputValue=''//清空输入框 //alert(this.inputValue) } }, }) </script> </body> </html>
可以看见，并没有直接对dom进行操作，自始至终都只是在对数据进行操作。
数据发生变化，View层就会自己发生改变，这一过程是VM层帮助我们去做的
在MVVM中我们更多的注意力聚集在Modle层
总结：MVP是面向DOM进行开发、MVVM是面向数据在进行开发