前端设计模式-MVP与MVVM

前端设计模式-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是面向数据在进行开发

posted @ 2020-12-17 11:19  墨问苍生  阅读(283)  评论(0)  编辑  收藏  举报