手写MVVM

最新推荐文章于 2021-10-04 10:25:50 发布
最新推荐文章于 2021-10-04 10:25:50 发布
阅读量146 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5c3754125188252410606c79
版权 
let vm = new MVVM({
            el:'#app',
            data:{
                message:{
                    a: 'hello zfpx',
                },
                a:1
            }
        })
复制代码

vue中初始化一个vue实例是这样用的，那么MVVM内部原理究竟是怎么实现的呢？

MVVM实现图示如下

如图主要分为5部分：MVVM类，Compile, Observer,Dep,Watcher

1. MVVM类实现

MVVM类主要功能：

  1. 存挂载的dom元素以及data
  2. 代理$data上的属性到this实例上
  3. 调用Observer类数据劫持
  4. 将挂载的东西传入Compile类，编译模板
class MVVM{
    constructor(options){
        // 先把可用的东西挂载在实例上
        this.$el = options.el;
        this.$data = options.data;

        // 如果有要编译的模板，就开始编译
        if(this.$el){
            // 数据劫持 就是把对想的所有属性 改成get和set方法
            new Observer(this.$data); 
            //将$data代理到this上
            this.proxyData(this.$data);
            // 用数据和元素进行编译
            new Compile(this.$el, this);
        }
    }
    proxyData(data){
        Object.keys(data).forEach(key=>{
            Object.defineProperty(this,key,{
                get(){
                    return data[key]
                },
                set(newValue){
                    data[key] = newValue
                }
            })
        })
    }
}

复制代码

2. Observer类实现 Observer类主要功能：

  1. 将vue中data的每个属性都改成劫持形式（set和get的形式），深度递归data对象的所有属性
  2. 每个属性都对应一个数组（Dep类实现的方法），这个数组存放所有更新的操作
class Observer{
    constructor(data){
       this.observe(data);
    }
    observe(data){
        // 要对这个data数据将原有的属性改成set和get的形式
        if(!data || typeof data !== 'object'){
            return;
        }
        // 要将数据 一一劫持 先获取取到data的key和value
        Object.keys(data).forEach(key=>{
            // 劫持
            this.defineReactive(data,key,data[key]);
            this.observe(data[key]);// 深度递归劫持
        });
    }
    // 定义响应式
    defineReactive(obj,key,value){
        let that = this;
        // 每个属性 都会对应一个数组，这个数组是存放所有更新的操作
        let dep = new Dep(); 
        Object.defineProperty(obj,key,{
            enumerable:true,
            configurable:true,
            get(){ 
    // 当取值时，将Dep.target（watcher即set属性时，要执行的回调函数）推入数组
                Dep.target && dep.addSub(Dep.target); 
                return value;
            },
            set(newValue){ 
               // 当给data属性中设置值的时候 更改获取的属性的值
                if(newValue!=value){
                    // 这里的this不是实例
                    // 如果是对象继续劫持 
                    // 比如你this.$data = {a: '2'}换成了一个新对象
                    that.observe(newValue);
                    value = newValue;
                    dep.notify(); // 通知所有watcher数据更新了
                }
            }
        });
    }
}
复制代码

3. Dep类实现 Dep类的主要功能

  1. 订阅，发布更新通知
class Dep{
    constructor(){
        // 订阅的数组
        this.subs = []
    }
    addSub(watcher){
        this.subs.push(watcher);
    }
    notify(){
        this.subs.forEach(watcher=>watcher.update());
    }
}
复制代码

4.watcher类实现

watcher功能

  1. 给每一个属性添加一个观察者，当属性变化时，执行对应的更新操作
class Watcher{
// vm: vm实例 expr: {{message.a}}中的message.a cb：属性更新后的回调函数
    constructor(vm,expr,cb){
        this.vm = vm;
        this.expr = expr;
        this.cb = cb;
        // 先获取一下老的值，进入get方法，将watcher实例赋给Dep.target
        //然后 执行this.getval()方法时，会读取data对象上的属性
        // 一旦读取属性（数据劫持）
        // 就会执行Observer类中的defineReactive方法
        // 执行这里：Dep.target && dep.addSub(Dep.target); 
        //将watcher实例推入订阅的数组
        this.value = this.get(); // 读取老值 
    }
     // 获取data对象上对应的expr属性值
    getVal(vm, expr) {
        expr = expr.split('.'); // [message,a]
        return expr.reduce((prev, next) => { // vm.$data.a
            return prev[next];
        }, vm.$data);
    }
    get(){
        Dep.target = this;
        let value = this.getVal(this.vm,this.expr);
        Dep.target = null;
        return value;
    }
    // 对外暴露的方法
    //一旦给data对象的属性设置值，就会执行Observer类defineReactive方法中的
    // dep.notify()--》执行订阅的数组中的watcher队列的update方法
    update(){
        let newValue = this.getVal(this.vm, this.expr);
        let oldValue = this.value;
        if(newValue != oldValue){
            this.cb(newValue); // 对应watch的callback
        }
    }
}
// 用新值和老值进行比对 如果放生变化 就调用更新方法
复制代码

5. Compile类实现 Compile类功能

  1. 把真实dom移入内存 fragment
  2. 编译：结合模板和数据进行编译，主要处理v-*, {{}},等其他vue特有的东西
  3. 把编译好的fragment塞回到页面里去
class Compile {
    constructor(el, vm) {
        this.el = this.isElementNode(el) ? el : document.querySelector(el);
        this.vm = vm;
        if (this.el) {
            // 如果这个元素能获取到 我们才开始编译
            // 1.先把这些真实的DOM移入到内存中 fragment
            let fragment = this.node2fragment(this.el);
            // 2.编译 => 提取想要的元素节点 v-model 和文本节点 {{}}
            this.compile(fragment);
            // 3.把编译好的fragment在塞回到页面里去
            this.el.appendChild(fragment);
        }
    }
    /* 专门写一些辅助的方法 */
    isElementNode(node) {
        return node.nodeType === 1;
    }
    // 是不是指令
    isDirective(name) {
        return name.includes('v-');
    }
    /* 核心的方法 */
    compileElement(node) {
        // 带v-model v-text
        let attrs = node.attributes; // 取出当前节点的属性
        Array.from(attrs).forEach(attr => {
            // 判断属性名字是不是包含v-model
            let attrName = attr.name;
            if (this.isDirective(attrName)) {
                // 取到对应的值放到节点中
                let expr = attr.value;
                let [, type] = attrName.split('-');
                // node this.vm.$data expr
                CompileUtil[type](node, this.vm, expr);
            }
        })
    }
    compileText(node) {
        // {{}}的处理
        let expr = node.textContent; // 取文本中的内容
        let reg = /\{\{([^}]+)\}\}/g; // {{a}} {{b}} {{c}}
        if (reg.test(expr)) {
            // node this.vm.$data text
            CompileUtil['text'](node, this.vm, expr);
        }
    }
    compile(fragment) {
        // 递归
        let childNodes = fragment.childNodes;
        Array.from(childNodes).forEach(node => {
            if (this.isElementNode(node)) {
                // 是元素节点，还需要继续深入的检查
                // 这里需要编译元素
                this.compileElement(node);
                this.compile(node)
            } else {
                // 文本节点
                // 这里需要编译文本
                this.compileText(node);
            }
        });
    }
    node2fragment(el) { 
        // 需要将el中的内容全部放到内存中
        // 文档碎片 内存中的dom节点
        let fragment = document.createDocumentFragment();
        let firstChild;
        while (firstChild = el.firstChild) {
            fragment.appendChild(firstChild);
        }
        return fragment; // 内存中的节点
    }
}

CompileUtil = {
    getVal(vm, expr) { // 获取实例上对应的数据
        expr = expr.split('.'); // [message,a]
        return expr.reduce((prev, next) => { // vm.$data.a
            return prev[next];
        }, vm.$data);
    },
    getTextVal(vm, expr) { 
    // 获取编译文本后的结果 {{message.a}}--> message.a-->data.message.a
        return expr.replace(/\{\{([^}]+)\}\}/g, (...arguments) => {
            return this.getVal(vm, arguments[1]);
        })
    },
    text(node, vm, expr) { // 文本处理
        let updateFn = this.updater['textUpdater'];
        // {{message.a}} => hello,zfpx;
        let value = this.getTextVal(vm, expr);
        // {{a}} {{b}}
        expr.replace(/\{\{([^}]+)\}\}/g, (...arguments) => {
        //每个属性都对应一个watcher
            new Watcher(vm, arguments[1],(newValue)=>{
                // 如果数据变化了，文本节点需要重新获取依赖的属性更新文本中的内容
                updateFn && updateFn(node,this.getTextVal(vm,expr));
            });
        })
        updateFn && updateFn(node, value)
    },
    setVal(vm,expr,value){ // [message,a]
        expr = expr.split('.');
        // 收敛
        return expr.reduce((prev,next,currentIndex)=>{
            if(currentIndex === expr.length-1){
                return prev[next] = value;
            }
            return prev[next];
        },vm.$data);
    },
    model(node, vm, expr) { // 输入框处理
        let updateFn = this.updater['modelUpdater'];
        // 这里应该加一个监控 数据变化了 应该调用这个watch的callback
        new Watcher(vm,expr,(newValue)=>{
            // 当值变化后会调用cb 将新的值传递过来 （）
            updateFn && updateFn(node, this.getVal(vm, expr));
        });
        node.addEventListener('input',(e)=>{
            let newValue = e.target.value;
            this.setVal(vm,expr,newValue)
        })
        updateFn && updateFn(node, this.getVal(vm, expr));
    },
    updater: {
        // 文本更新
        textUpdater(node, value) {
            node.textContent = value
        },
        // 输入框更新
        modelUpdater(node, value) {
            node.value = value;
        }
    }
}
复制代码

转载于:https://juejin.im/post/5c3754125188252410606c79

weixin_34362875
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于MVVM
yishengqianan的博客
04-10 185
MVVM是类似于目前比较流行的MVC、MVP设计模式，主要目的是 为了分离视图（View）和模型（Model）的耦合。它是一种极度优秀的设计模式，但并非框架级别的东西，由MVP（Model-View-Presenter）模式与 WPF结合的应用方式时发展演变过来的一种新型架构。立足于原有MVP框架并且把WPF的新特性糅合进去，以应对PC端开发日益复杂的需求变化。 MVVM模式主要目的是分离视图（View）和模型（Model），它有四大优点分别是： 1、低耦合：视图（View）可以独立于Model变化和修改，
手写一套mvvm框架
uperficialyu的博客
01-28 760
1 MVVM是什么 MVVM 设计模式，是由 MVC、MVP 等设计模式进化而来。 M - 数据模型（Model），简单的JS对象 VM - 视图模型（ViewModel），连接Model与View V - 视图层（View），呈现给用户的DOM渲染界面 通过以上的MVVM模式图，我们可以看出最核心的就是ViewModel，它主要的作用：对View中DOM元素的监听和对Model中的数...
手写MVVM的实现原理
十九万里的博客
10-04 534
一、学习目标 了解object,definProperty vue2.0使用都是这个响应式的监听 手写并优化MVVM底层实现 实现v-text和v-model原理 二、 数据响应式 1数据响应式是什么 数据发生变化，我们可以马上知道，并且做一些事情，关键在于知道数据发生变化并做出对应的操作 2、如何实现一个数据响应 及区别 vue2.0 对象属性拦截：Object.defineProperty (原生js的方法) 全局拦截 vue3.0版本中：对象属性拦截 Proxy对象代理 部分拦截 两者实现响应式
手写一个简易的MVVM
m0_45114231的博客
08-18 261
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
Part3-1-3 Vue.js 响应式原理
m0_38066007的博客
06-23 177
1
手写一个简单的MVVM模式
weixin_45740906的博客
07-14 189
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
WPF手写MVVM例子
01-12
**WPF手写MVVM例子** 在Windows Presentation Foundation（WPF）中，MVVM（Model-View-ViewModel）设计模式是一种被广泛采用的开发架构，它将用户界面（View）、业务逻辑（ViewModel）和数据模型（Model）进行解耦...
手写实现vue中mvvm原理
08-14
本篇文章将深入探讨如何手写实现Vue中的MVVM原理，帮助你更深入理解这个框架的工作机制。 MVVM模式源于微软的WPF（Windows Presentation Foundation）框架，它的主要目的是在视图（View）和模型（Model）之间建立一...
手写WPF的MVVM框架.7z
11-14
**三、手写MVVM框架** 创建一个自定义的WPF MVVM框架通常包括以下关键部分： 1. **基础ViewModel类**：定义一个基类，包含INotifyPropertyChanged接口，用于实现属性更改通知，这是数据绑定的基础。 2. **命令实现...
MVVM手写基础框架案例
最新发布
09-04
这个“MVVM手写基础框架案例”显然是一个教学资源，旨在帮助开发者理解并实践MVVM模式的基本概念和实现方法。下面我们将深入探讨MVVM模式以及如何在WPF中应用。 MVVM模式的核心思想是将应用程序的视图（View）、...
手写Vue源码实现MVVM的响应式原理以及数据的双向绑定
08-04
手写Vue源码实现MVVM的响应式原理以及数据的双向绑定 帮你理解什么是数据劫持 什么是发布者-订阅者模式 帮你理解Vue内部是如何实现的双向数据绑定 了解Observer Dep Watcher三者之间的关系
WPF一个非常实用的MVVM例子
11-16
**WPF MVVM模式详解与应用实例** WPF（Windows Presentation Foundation）是微软推出的一种用于构建Windows桌面应用程序的框架，它极大地丰富了用户界面的设计和交互能力。在WPF中，MVVM（Model-View-ViewModel）...
仿Vue手把手带大家从零开始搭建一款MVVM框架
11-08
课程介绍本套课程，大喵将带着大家手把手，编辑每一行代码，使用原生Javascipt及ES6的一些新特性，仿照目前国内非常流行的Vue框架的源码，开发构建一个属于你们自己的MVVM框架。让大家能够很清晰的学习及掌握，模板编译，数据绑定，响应式，文档碎片，观察者模式，发布订阅模式等等，这些Vue的核心知识点，都是怎么回事，它们之间有哪些关联，是如何进行双向数据绑定的等等。在使用vue2.x的核心Object.defineProperty构建完成框架后，大喵也会使用Vue3.0引入的数据劫持的Proxy新特性，来改造我们的MVVM框架，提升我们的框架性能。最终，大喵会手把手带着大家，从0开始配置webpack.config.js配置文件以及引入babel-loader，配置.babelrc文件，转换我们JS文件中的的ES6语法，最终压缩输出我们的MVVM框架库文件。课程目录01 手把手搭建MVVM框架 课程介绍、02 文件结构及基础类创建、03 入口类DamiaoMvvm的实现、04 模板编译、05 元素节点解析编译、06 v-model 数据绑定逻辑梳理、07 v-model 数据绑定实现、08 模板文本编译逻辑梳理、09 模板文本渲染绑定、10 观察者Wather逻辑梳理、11 Wather 逻辑实现、12 Object.defineProperty()、13 defineProperty 小案例、14 observer数据劫持梳理、15 defineProperty数据劫持实现、16 发布订阅类实现、17 Proxy 介绍与概述、18 使用Proxy改造MVVM框架、19 使用Proxy实现响应式、20 webpack 打包配置、21 babel 配置及文件输出、22 Mvvm Proxy 框架打包、23 Mvvm 框架搭建课程总结MVVM框架介绍MVVM是 Model-View-ViewModel 的缩写。mvvm是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。在MVVM架构模式下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
vue大括号里接受一个函数_vue源码探究（第四弹）
weixin_39797686的博客
12-12 177
vue源码探究（第四弹）结束了上一part的数据代理，这一部分主要讲讲vue的模板解析，感觉这个有点难理解，而且内容有点多，hhh。模板解析废话不多说，先从简单的入手。按照之前的套路，先举一个例子 ：<div id="test"> <p>{{name}}</p> </div> <script type="text/javascript" s...
手写一个MVVM
abc2346789的博客
07-29 272
最近看了珠峰的架构课——实现一个MVVM。 首先，我们来了解一下什么是MVVM。 MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的...
手写简易MVVM框架
hxy941025的博客
05-16 641
手写简易MVVM框架 参考视频：https://www.bilibili.com/video/BV1Ap411d7Ai?t=4815 demo文件夹下为视频版源码（根目录下为手写练习，可忽略） 实现结果：v-model双向数据绑定及{{}} 代码地址：https://github.com/hxy941025/-MVVM- 大体思路 主要分为模板编译、数据劫持、观察者（包含发布订阅）三个部分 模板编译：获取vm实例里html模板，针对其中的字符串模板{{}}及v-指令进行“翻译”，写出其底层相应操作 数
java mvvm_MVVM
06-12
MVVM是一种软件架构模式，它将应用程序分为三个主要组件：Model，View和ViewModel。在MVVM模式中，ViewModel充当View和Model之间的中介，使View和Model之间的耦合度降低，同时也使开发变得更加容易。 在Java中实现...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值