一张图说明:

1、一句话总结:

vm层(视图模型层)通过接口从后台m层(model层)请求数据,vm层继而和v(view层)实现数据的双向绑定。

2、mvc和mvvm的关系:

c(控制层)被换成了vm(viewmodel)层

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。

mvvm层实现了前后端更好的分离(前端需要的数据只需要请求后端的接口即可)

3、MVVM框架编码实例

Vue 的 View 模板:

<div id="app">
    <p>{{message}}</p>
    <button v-on:click="showMessage()">Click me</button>
</div>

Vue 的 ViewModel 层(下面是伪代码):

var app = new Vue({
    el: '#app',
    data: {     // 用于描述视图状态(有基于 Model 层数据定义的,也有纯前端定义)
        message: 'Hello Vue!',  // 纯前端定义
        server: {}, // 存放基于 Model 层数据的二次封装数据
    },
    methods: {  // 用于描述视图行为(完全前端定义)
        showMessage(){
            let vm = this;
            alert(vm.message);
        }
    },
    created(){
        let vm = this;

        // Ajax 获取 Model 层的数据
        ajax({
            url: '/your/server/data/api',
            success(res){
                // TODO 对获取到的 Model 数据进行转换处理,做二次封装
                vm.server = res;
            }
        });
    }
})

 

服务端的 Model 层(省略业务逻辑处理,只描述对外接口):

{
    "url": "/your/server/data/api",
    "res": {
        "success": true,
        "name": "IoveC",
        "domain": "www.cnblogs.com"
    }
}

4、前端框架MVVM出现的最大意义是什么: 

MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离,极大地提高了前端开发效率。

MVVM用接口实现了前后端数据的通信,这样可以使前后端之间的业务逻辑没有什么关系。

MVVM在感觉上要比mvc模式前后端要分的更开

5、应用MVVM框架的vue.js框架的最主要作用是什么:

前端數據的統一:前端应用相同数据的位置实现了数据的统一
双向数据绑定:綁定后vue好dom數據保持統一,一動全動,是前端的

双向数据绑定中的两向分别为 view和viewmodel。

6、前端框架MVVM中的vm层是干嘛的:

ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层,前端开发者对从后端获取的 Model 数据进行转换处理,做二次封装,以生成符合 View 层使用预期的视图数据模型。

View 层展现的不是 Model 层的数据,而是 ViewModel 的数据,由 ViewModel 负责与 Model 层交互,这就完全解耦了 View 层和 Model 层,这个解耦是至关重要的,它是前后端分离方案实施的重要一环。

7、MVVM简述举例:

View一般就是我们平常说的HTML文本的Js模板,里面可以嵌入一些js模板的代码,比如Mustache,比如jstl类似的模板伪代码

ViewModule层里面就是我们对于这个视图区域的一切js可视业务逻辑,举个例子,比如图片走马灯特效,比如表单按钮点击提交,这些自定义事件的注册和处理逻辑都写在ViewModule里面了

Module就更简单了,就是对于纯数据的处理,比如增删改查,与后台CGI做交互

Logo

前往低代码交流专区

更多推荐