专栏首页Czy‘s BlogMVVM模式的理解

MVVM模式的理解

MVVM模式的理解

MVVM全称Model-View-ViewModel是基于MVCMVP体系结构模式的改进,MVVM就是MVC模式中的View的状态和行为抽象化,将视图UI和业务逻辑分开,更清楚地将用户界面UI的开发与应用程序中业务逻辑和行为的开发区分开来。

描述

MVVM模式简化了界面与业务的依赖,有助于将图形用户界面的开发与业务逻辑或数据模型的开发分离开来。在MVVM中的ViewModel作为绑定器将视图层UI与数据层Model链接起来,在Model更新时,ViewModel通过绑定器将数据更新到View,在View触发指令时,会通过ViewModel传递消息到ModelViewModel像是一个黑盒,在开发过程中只需要关注于呈现UI的视图层以及抽象模型的数据层Model,而不需要过多关注ViewModel是如何传递的数据以及消息。

组成

Model

  • 以面向对象来对对事物进行抽象的结果,是代表真实状态内容的领域模型。
  • 也可以将Model称为数据层,其作为数据中心仅关注数据本身,不关注任何行为。

View

  • View是用户在屏幕上看到的结构、布局和外观,即视图UI
  • Model进行更新的时候,ViewModel会通过数据绑定更新到View

ViewModel

  • ViewModel是暴露公共属性和命令的视图的抽象。
  • ViewModel中的绑定器在视图和数据绑定器之间进行通信。
  • Model更新时,ViewModel通过绑定器将数据更新到View,在View触发指令时,会通过ViewModel传递消息到Model

优点

  • 低耦合: 视图View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
  • 可重用性: 可以把一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑。
  • 独立开发: 开发人员可以专注于业务逻辑和数据的开发Model,设计人员可以专注于页面设计。
  • 可测试: 界面素来是比较难于测试的,测试行为可以通过ViewModel来进行。

不足

  • 对于过大的项目,数据绑定需要花费更多的内存。
  • 数据绑定使得Bug较难被调试,当界面异常,可能是View的代码有问题,也可能是Model 的代码有问题,数据绑定使得一个位置的Bug可能被快速传递到别的位置,要定位原始出问题的地方就变得不那么容易了。

实例

下面是参照Vue实现的简单的数据绑定实例。

<!DOCTYPE html>
<html>
<head>
    <title>数据绑定</title>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>{{date}}</div>
        <button onclick="update()">update</button>
    </div> 
</body>
<script type="text/javascript">

///////////////////////////////////////////////////////////////////////////////
    var Mvvm = function(config) {
        this.$el = config.el;
        this.__root = document.querySelector(this.$el);
        this.__originHTML = this.__root.innerHTML;

        function __dep(){
            this.subscribers = [];
            this.addSub = function(watcher){
                if(__dep.target && !this.subscribers.includes(__dep.target) ) this.subscribers.push(watcher);
            }
            this.notifyAll = function(){
                this.subscribers.forEach( watcher => watcher.update());
            }
        }


        function __observe(obj){
            for(let item in obj){
                let dep = new __dep();
                let value = obj[item];
                if (Object.prototype.toString.call(value) === "[object Object]") __observe(value);
                Object.defineProperty(obj, item, {
                    configurable: true,
                    enumerable: true,
                    get: function reactiveGetter() {
                        if(__dep.target) dep.addSub(__dep.target);
                        return value;
                    },
                    set: function reactiveSetter(newVal) {
                        if (value === newVal) return value;
                        value = newVal;
                        dep.notifyAll();
                    }
                });
            }
            return obj;
        }

        this.$data = __observe(config.data);

        function __proxy (target) {
            for(let item in target){
                Object.defineProperty(this, item, {
                    configurable: true,
                    enumerable: true,
                    get: function proxyGetter() {
                        return this.$data[item];
                    },
                    set: function proxySetter(newVal) {
                        this.$data[item] = newVal;
                    }
                });
            }
        }

        __proxy.call(this, config.data);

        function __watcher(fn){
            this.update = function(){
                fn();
            }

            this.activeRun = function(){
                __dep.target = this;
                fn();
                __dep.target = null;
            }
            this.activeRun();
        }

        new __watcher(() => {
            console.log(this.msg, this.date);
        })

        new __watcher(() => {
            var html = String(this.__originHTML||'').replace(/"/g,'\\"').replace(/\s+|\r|\t|\n/g, ' ')
            .replace(/\{\{(.)*?\}\}/g, function(value){ 
                return  value.replace("{{",'"+(').replace("}}",')+"');
            })
            html = `var targetHTML = "${html}";return targetHTML;`;
            var parsedHTML = new Function(...Object.keys(this.$data), html)(...Object.values(this.$data));
            this.__root.innerHTML = parsedHTML;
        })

    }

///////////////////////////////////////////////////////////////////////////////

    var vm = new Mvvm({
        el: "#app",
        data: {
            msg: "1",
            date: new Date(),
            obj: {
                a: 1,
                b: 11
            }
        }
    })

    function update(){
        vm.msg = "updated";
    }

///////////////////////////////////////////////////////////////////////////////
</script>
</html>

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://zhuanlan.zhihu.com/p/38296857
https://baike.baidu.com/item/MVVM/96310
https://www.liaoxuefeng.com/wiki/1022910821149312/1108898947791072

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • async/await剖析

    JavaScript是单线程的,为了避免同步阻塞可能会带来的一些负面影响,引入了异步非阻塞机制,而对于异步执行的解决方案从最早的回调函数,到ES6的Promis...

    WindrunnerMax
  • Canvas基础

    HTML5中引入<canvas>标签,用于图形的绘制,<canvas>为图形的绘制提供了画布,是图形容器,具体的图形绘制由JavaScript来完成。

    WindrunnerMax
  • 建造者模式

    建造者模式Builder Pattern又可以称为生成器模式,是将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示,建造者模式属于对象创建...

    WindrunnerMax
  • 聊聊原型 Prototype | 技术创作101训练营

    原型和原型链,一直是 JavaScript 中的重要概念,也是面试官必问的知识点,或许有的同学认为,自己虽然没有很深入了解过原型和原型链,但并不影响自己日常的开...

    Nian糕
  • 《JavaScript 模式》读书笔记(5)— 对象创建模式4

    JavaScript中没有常量的概念,虽然许多现代的编程环境可能为您提供了用以创建常量的const语句。作为一种变通方案,JavaScript中常见的一种方法...

    zaking
  • PHP示例演示发送邮件给某个邮箱

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对ZaLou.Cn的支持。

    砸漏
  • 【JS 口袋书】第 8 章:以更细的角度来看 JS 中的 this

    JS 中的this关键字对于初学者来说是一个谜,对于经验丰富的开发人员来说则是一个永恒的难题。this 实际上是一个移动的目标,在代码执行过程中可能会发生变化,...

    前端小智@大迁世界
  • 50行javaScript代码实现简单版的 call , apply ,bind 【中级前端面试基础必备】

    其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象,这就是精髓。最关键所在

    Peter谭金杰
  • PHP观察者模式实例分析【对比JS观察者模式】

    砸漏
  • JQuery碎碎念

    IT故事会

扫码关注云+社区

领取腾讯云代金券