什么是MVVM

最新推荐文章于 2024-02-07 15:31:22 发布
最新推荐文章于 2024-02-07 15:31:22 发布
阅读量440 收藏 1
点赞数 2
分类专栏： 数据结构 文章标签： dom js react mvvm java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Elementsboy/article/details/105826092
版权

MVVM

m:model 数据层

v:view 视图层

vm: 数据双向绑定

在这里插入图片描述
封装mvvm的思路

在这里插入图片描述
1.实现一个Observer,对数据进行劫持，监听数据的属性变更，并在变动时进行notify

Object.defineProperty(vm,key,{
    set(){},
    get(){}
})

2.实现一个compile,对指令进行解析，初始化视图，并且订阅数据的变更，绑定好更新函数:

- 解析指令，将指令模板中的变量替换成数据，对视图进行初始化操作
- 订阅数据的变化，绑定好更新函数
- 接收到数据变化，通知视图进行view update

3.实现一个watcher，将其作为以上两者的一个中介点，一方面接收Observer通过Dep传递过来的数据变化，一方面通知compile进行view update:

- 通过Dep接收数据变动的通知，实例化的时候将自己添加到dep中
- 数据变更时，接收dep的notify，调用自身update方法，触发compile中的绑定的更新函数，进而更新视图

代码实现：

//html片段
<body>
    <div id="app">
        <input type="text" v-model='user.name'>
        nihao
        {{user.age}}
        {{info}}
        <h2>{{user.name}}</h2>
        <h3>{{user.name}}</h3> 
        <li>{{user.name}}</li> 
        <p>{{user.name}}</p>
    </div>
</body>
<script src="./mvvm.js"></script>
<script>
let vm = new Vue({
    el:"#app",
    data:{
        user:{
            name:"你好",
            age:11
        },
        info:"aaaaaaaa"
    }
})


//js片段
class Vue{
    constructor(options){
        this.$el = options.el;
        this.$data = options.data;

        if(this.$el){
            //劫持数据
            new Observer(this.$data);
            console.log(this.$data)
            //编译模板
            new Complie(this.$el,this)
        }
    }
}

//

class Dep{
    constructor(){
        this.watchers = [];
    }
    add(watcher){
        this.watchers.push(watcher)
    }

    notify(){
        this.watchers.forEach(item=>{
            item.updater()
        })
    }
}



//观察者
//vm.$watcher(vm,'user.name',(newValue)=>{})
class Watcher{
    constructor(vm,expr,callback){
        this.vm = vm;
        this.expr = expr;
        this.callback = callback;

        //获取上一次的值
        this.oldValue = this.get();

    }
    get(){
        Dep.target = this;
        let value = complieUtil.getValue(this.expr,this.vm);
        Dep.target =null;
        return value;
    }
    //跟新数据
    updater(){
        let newValue = complieUtil.getValue(this.expr,this.vm);

        if(newValue != this.oldValue){
            this.callback(newValue)
        }
    }


}


//劫持数据
class Observer{
    constructor(data){
        this.observer(data)
    }
    //劫持
    observer(data){
        if(data && typeof data == 'object'){
            for (const key in data) {
                this.observerData(data,key,data[key])
            }
        }
    }

    //添加set  get  函数
    observerData(data,key,value){
        this.observer(value)
        let dep = new Dep()
        Object.defineProperty(data,key,{
            set(newValue){
                console.log('设置值')
                if(value != newValue){
                    value = newValue
                    dep.notify();
                }
            },
            get(){
                Dep.target && dep.add(Dep.target)
                return value;
            }
        })
    }
}

//编译模板
class Complie{
    constructor(el,vm){
        this.vm = vm;
        //判断el 是元素节点
        this.el =  this.isElementNode(el) ? el :document.querySelector(el);


        //把app下所有的元素保存在内存文档片段
        let fragment = this.elementToFragment(this.el);
        // console.log(fragment)
        //编译内存片段
        this.complie(fragment);

        //把编译好的内存片段从放在浏览器中
        this.el.appendChild(fragment)
        // console.log(fragment)
    }
    //编译内存文档的方法
    complie(node){
        //获取内存片段下所有的子节点
        let childNodes = node.childNodes;

        [...childNodes].forEach(child=>{
            //判断是文本还是元素
            if(this.isElementNode(child)){
                //元素节点
                this.complieElement(child);
                this.complie(child);
            }else{
                //文本节点
                this.complieText(child);
            }
        })
    }
    //complieElement编译 -v
    complieElement(node){
        let attrs = node.attributes;
        [...attrs].forEach(attr=>{
            //判断是 v-开头的指令
            let {name,value:expr} = attr
            if(this.isDirective(name)){
                let [,directive]  = name.split('-');
                complieUtil[directive](node,expr,this.vm)
            }
        })
    }

    //complieText 编译 {{}}
    complieText(node){
        let  textContent = node.textContent;
        if(/\{\{(.+?)\}\}/.test(textContent)){
            //编译{{}} 语法
            complieUtil.contentTxet(node,textContent,this.vm)

        }
    }

    //判断是否是  -v开头的属性名
    isDirective(attr){
        console.log(attr)
        console.log(attr.startsWith('v-'))
        return attr.startsWith('v-');
    }
    //elementToFragment保存在内存文档片段函数
    elementToFragment(el){
        //创建一个内存片段
        let fragment = document.createDocumentFragment();
        let firstChild;
        while (firstChild = el.firstChild) {
            fragment.appendChild(firstChild);
        }
        return fragment;
    }

    //isElementNode
    isElementNode(el){//判断是否是元素节点
        return el.nodeType == 1;
    }
}


//工具类
let complieUtil={
    //获取值得方法
    getValue(expr,vm){
        return expr.split('.').reduce((prev,cur)=>{
            return prev[cur];
        },vm.$data)
    },
    model(node,expr,vm){
        let value = this.getValue(expr,vm)
        let fn = this.updater.complieModel;
        //生成观察者
        new Watcher(vm,expr,(newValue)=>{
            fn(node,newValue)
        })
        fn(node,value)
    },
    text(){
        
    },
    html(){
        
    },

    //contentTxet//编译{{}}语法的方法
    contentTxet(node,text,vm){
        
        let value = text.replace(/\{\{(.+?)\}\}/g,(...arg)=>{
            //生成观察者
            new Watcher(vm,arg[1],(newValue)=>{
                fn(node,newValue)
            })
            return this.getValue(arg[1],vm)
        })
        let fn = this.updater.complieText;
        fn(node,value)
        
    },

    //更新数据
    updater:{
        //v-model
        complieModel(node,value){
            node.value = value
        },
        //{{}}
        complieText(node,value){
            node.textContent = value;
        }
    }
}
题词策
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
什么是 MVVM 模式1
08-03
【MVVM 模式详解】 MVVM（Model-View-ViewModel）是一种软件架构模式，尤其在现代前端开发和移动应用中被广泛采用。它源于MVC（Model-View-Controller）模式，但针对复杂的UI交互提供了更为清晰的职责划分。 在MVC...
MVVM简介
热门推荐
实践求真知
06-16 1万+
目录 点睛 什么是MVVM 为什么要使用MVVM MVVM的组成部分 点睛 View是视图层，也就是用户界面。前端主要由HTML和CSS来构成，为了更方便地展现ViewModel或者Model层的数据。 Model是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则。 ViewModel由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者从后端获取得到Model数据进行转换出来，做二次封装，以生成符合View
一篇读懂什么是MVVM？MVVM优缺点？
weixin_48037671的博客
03-22 1万+
什么是MVVM？MVVM优缺点？
MVVM 和 MVVMLight的关系
qq_23018459的博客
03-05 996
一、MVVM 和 MVVMLight介绍 MVVM是Model-View-ViewModel的简写。类似于目前比较流行的MVC、MVP设计模式，主要目的是为了分离视图（View）和模型（Model）的耦合。 它是一种极度优秀的设计模式，但并非框架级别的东西，由MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构。 立足于原有MVP框架并且把...
前端框架MVVM是什么（整理）
02-24
不应该只要后端保证对外接口足够简单就行了，我请求api，你把数据返出来，咱俩就这点关系，其他都扯淡。后端：我们这里的业务逻辑和数据...mvvm层实现了前后端更好的分离（前端需要的数据只需要请求后端的接口即可）
MVVM案例Demo示例
09-01
**MVVM模式详解** MVVM（Model-View-ViewModel）是一种软件设计模式，广泛应用于现代UI开发，尤其是在WPF、Xamarin、Angular、React以及Vue等框架中。它源自MVC（Model-View-Controller）模式，但在UI层面上进行了...
Mvvm
11-12
**Mvvm 模式详解** Mvvm（Model-View-ViewModel）是一种软件设计模式，尤其在现代UI开发中被广泛采用，特别是在WPF、Xamarin、Android、iOS以及UWP等平台的应用开发中。该模式将应用程序的业务逻辑、用户界面和数据...
MVVM架构
云追月的专栏
07-08 5441
MVVM（Model-View-ViewModel）和MVC、MVP一样，也是一种项目架构模式，目前广泛应用在Android程序设计。MVVM主要由三部分组成，Model数据模型部分，View视图展示部分，ViewModel则是一个特殊的部分，为视图与数据模型的中间件。大概的结构如下图这张图中，将程序分为了若干层。其中，UI控制层包含了我们平时写的Activity、Fragment和布局文件等与界面相关的东西。
MVVM风格架构
最新发布
leva的博客
02-07 4566
MVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。当然这些事ViewModel已经帮我们完成了，它可以取出Model的数据同时帮忙处理View中由于需要展示内容而涉及的业务逻辑。微软公司的WPF带来了新的技术体验，如Silverlight、声频、视频、3D、动画……这导致了软件UI层更加细节化、可定制化。
MVC和MVVM的区别
前端精髓
03-24 8276
现在是市面上使用MVVM模型越来越多，相关的前端框架的选择也相应增多。 那么什么是MVVM模型，它和传统MVC模型有什么区别，接下来我们来总结探讨一下。 MVVM即Model-View-ViewModel的简写。即模型-视图-视图模型。模型（Model）指的是后端传递的数据。视图(View)指的是所看到的页面。视图模型(ViewModel)是mvvm模式的核心，它是连接view和model的桥梁...
什么是MVVM？
一个不掉头发的资深小白
08-16 1586
1、什么是MVVM？ MVVM 是一种软件架构模式，用于将应用程序的用户界面（View）与数据和业务逻辑（Model）进行分离。MVVM 的核心思想是通过一个称为 ViewModel 的中间层来连接 View 和 Model。 M：Model（模型）代表应用程序的数据和业务逻辑。它负责数据的获取、处理和存储，以及定义应用程序的行为。 V：View（视图）代表应用程序的用户界面。它负责展示数据和与用户进行交互，通常由 HTML、XML 或其他类似的标记语言编写。 VM：ViewModel（视图模型）它是 V
Android技术框架篇(三)：MVVM框架
看，好自为之的博客！！！
05-19 9933
MVVM框架的介绍
MVVM和MVC 的区别
weixin_55696461的博客
09-28 6603
因为 model层中的数据往往是不能直接跟 view 中的控件一一对应上的，所以需要在定义一个数据对象专门对应 view 上的控件，而 viewModel 就是把 model 对象封装成可以显示和接受输入的界面数据对象。C(Controller): 控制层，是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理，它只是接收请求并决定调用那个模型构建去处理请求，然后在确定用哪个视图来显示返回的数据。展示出来的用户界面。
MVC和MVVM有什么区别
weixin_70443954的博客
11-28 5144
Vue、MVC、MVVM、双向数据绑定、数据驱动视图
mvvm是什么？
weixin_61434466的博客
04-25 3797
1、总结 一句话总结：vm层（视图模型层）通过接口从后台m层（model层）请求数据，vm层继而和v(view层)实现数据的双向绑定 2、mvc和mvvm的关系？ 改进版 数据分离 视图模型层 c（控制层）被换成了vm（viewmodel）层 MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。 mvvm层实现了前后端更好的分离（前端需要的数据只需要请求后端的接口即可 3.MVVM模式的优点以及与MVC模式的区别? MVVM模式的优点： 1、低耦合.
MVVM的理解
weixin_47227886的博客
04-14 4399
MVVM 是 Model-View-ViewModel 的缩写。 Model:代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 View: 代表UI 组件，它负责将数据模型转化成UI 展现出来。 ViewModel: 监听数据模型的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过Vie...
面试问题 什么是mvvm
07-14
MVVM 是 Model-View-ViewModel 的缩写，是一种软件架构模式。它主要用于将用户界面（View）与后端数据和业务逻辑（Model）分离，并通过一个可观察的数据绑定（ViewModel）来实现二者的连接。 在 MVVM 架构中，View ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值