通过TodoList案例对比Vue.js的MVVM设计模式与JQuery的MVP设计模式
Posted 叶子玉
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过TodoList案例对比Vue.js的MVVM设计模式与JQuery的MVP设计模式相关的知识，希望对你有一定的参考价值。
Vue MVVM设计模式：
在使用vue进行编程时，不会再涉及到DOM的操作，取而代之的是修改数据层，当把数据进行变更的时候，vue之中它的底层会自动的根据数据的不同帮助我们去重新渲染页面。
编码时不需要关注VM层是如何实现的，它是vue内置的，只需要关注M层（模型层）和V层（视图层）。
使用MVVM设计模式进行编码时，编码的重点一部分在于视图层，一部分在于模型层。
data：指M层。
<div>模板标签：指V层。
vue：自身实现VM层。vue会监听到数据变了会帮你改变视图层，vue也能监听到视图层有一些事件触发然后帮助你通过VM这一层去调用一些你写的逻辑代码，通过这些代码改变了M层的数据，当数据发生变化时，VM层又会自动的把数据的变化映射到视图层的上面来。
VM层的实现：引入虚拟DOM+ES5的一个核心API：Object.defineProperty()，来实现VM层的架构体系。
MVVM设计模式的好处：
开发时只需要关注M层的开发。代码会得到显著的减少。
MVVM里最重的一层是M层。
vue是面向数据进行编程。
JQuerty:MVP设计模式:
M(model):模型层(数据层)(弱)V(view):视图层，页面上的DOM展示P(presenter):控制器(最核心的一层)，视图和模型层的中转站，大量代码做DOM的操作，模型层非常弱。视图发生改变点击提交时控制器会去执行，控制器里负责了所有的业务逻辑，控制器可以去调模型层去发Ajax请求，控制器通过DOM操作再改变视图层。在大型项目中，JQuery编写的百分之七八十以上的代码都在操作DOM。JQuery是面向DOM在做开发。
vue实现todolist：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>todolist</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <!-- v-model:数据的双向绑定 --> 15 <!-- 把input里的value值和data里的value值做了绑定 --> 16 <input type="text" name="" id="" v-model="inputValue"> 17 <!-- v-on:绑定事件 --> 18 <button v-on:click="handleBtnClick">提交</button> 19 <ul> 20 <!-- item指list中的每一项(循环过程的每一项内容) --> 21 <!-- v-for指令：循环数据 --> 22 <li v-for="item in list">{{item}}</li> 23 </ul> 24 </div> 25 26 <script> 27 var app = new Vue({ 28 el: ‘#app‘, 29 data: { 30 list: [], 31 inputValue: ‘‘ 32 }, 33 methods: { 34 handleBtnClick: function() { 35 this.list.push(this.inputValue); 36 this.inputValue = ‘‘; 37 } 38 } 39 }) 40 </script> 41 </body> 42 43 </html>
jquery实现todolist：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>TodoList Jquery</title> 9 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> 10 </head> 11 12 <body> 13 <div> 14 <input type="text" id="input"> 15 <button id="btn">提交</button> 16 <ul id="list"></ul> 17 </div> 18 19 <script> 20 function Page() { 21 22 } 23 $.extend(Page.prototype, { 24 init: function() { 25 this.bindEvents() 26 }, 27 bindEvents: function() { 28 var btn = $(‘#btn‘); 29 btn.on(‘click‘, $.proxy(this.handleBtnClick, this)); //proxy:改变this的指向 30 }, 31 handleBtnClick: function() { 32 var inputEle = $(‘#input‘); 33 var inputValue = inputEle.val(); //获取input框的内容 34 var ulEle = $(‘#list‘); 35 ulEle.append(‘<li>‘ + inputValue + ‘</li>‘); 36 inputEle.val(‘‘); 37 } 38 }) 39 var page = new Page(); 40 page.init(); 41 </script> 42 </body> 43 44 </html>
以上是关于通过TodoList案例对比Vue.js的MVVM设计模式与JQuery的MVP设计模式的主要内容，如果未能解决你的问题，请参考以下文章