通过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>

 

posted @ 2018-07-03 11:15  叶子玉  阅读(446)  评论(0)  编辑  收藏  举报