实现vue中的MVVM原理

最新推荐文章于 2022-02-09 20:12:22 发布
最新推荐文章于 2022-02-09 20:12:22 发布
阅读量94 收藏
点赞数
文章标签： javascript 人工智能 ViewUI
原文链接：https://segmentfault.com/a/1190000018370768
版权

现成MVVM

菜单教程

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="message">
        <p>{{ message }}</p>
    </div>

    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!'
            }
        })
    </script>
</body>

</html>

视图影响数据

clipboard.png

数据影响视图

clipboard.png

项目构架

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="./js/mvvm.js"></script>
    <script src="./js/compile.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="message">
        <div>{{message}}</div>
        <ul>
            <li></li>
        </ul>
        {{message}}
    </div>

    <script>
        let vm = new MVVM({
            el: '#app',
            data: {
                message: 'Hello Vue.js!'
            }
        })
    </script>
</body>

</html>

mvvm.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="./js/mvvm.js"></script>
    <script src="./js/compile.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="message">
        <div>{{message}}</div>
        <ul>
            <li></li>
        </ul>
        {{message}}
    </div>

    <script>
        let vm = new MVVM({
            el: '#app',
            data: {
                message: 'Hello Vue.js!'
            }
        })
    </script>
</body>

</html>

mvvm.js

class MVVM {
    constructor(options) {
        this.$el = options.el;
        this.$data = options.data;

        if (this.$el) {
            new Compile(this.$el);
        }

    }
}

compile

把dom节点，放在内存中操作(到35分钟)

class Compile {
    constructor(el, vm) {
        this.el = this.isElementNode(el) ? el : document.querySelector(el);
        this.vm = vm;
        if (this.el) {
            let fragment = this.node2frament(this.el);
            this.compile(fragment);
        }
    }

    //辅助方法
    isElementNode(node) {
        return node.nodeType === 1;
    }

    //核心方法
    compile(fragment) {
        let childNodes = fragment.childNodes;
        console.log(childNodes)
    }
    node2frament(el) {
        let fragment = document.createDocumentFragment();
        let firstChild;
        while (firstChild = el.firstChild) {
            fragment.appendChild(firstChild);
        }
        return fragment
    }
}

分类元素节点和文本节点(52分钟)

class Compile {
    constructor(el, vm) {
        this.el = this.isElementNode(el) ? el : document.querySelector(el);
        this.vm = vm;
        if (this.el) {
            let fragment = this.node2frament(this.el);
            this.compile(fragment);
        }
    }

    //辅助方法
    isElementNode(node) {
        return node.nodeType === 1;
    }
    isDirective(name) {
        return name.includes('v-')
    }

    //核心方法
    compileElement(node) {
        let attrs = node.attributes;
        Array.from(attrs).forEach(arrt => {
            let attrName = attr.name;
            if (this.isDirective(attrName)) {
                let expr = attr.value;
            }
        })
    }
    compileText(node) {
        let text = node.textContent;
        let reg = /\{\{([^}]+)\}\}/g;
        if (reg.test(text)) {

        }
    }
    compile(fragment) {
        let childNodes = fragment.childNodes;
        Array.from(childNodes).forEach(node => {
            if (this.isElementNode(node)) {
                this.compile(node)
            } else {
                console.log('text', node)
            }
        })
    }
    node2frament(el) {
        let fragment = document.createDocumentFragment();
        let firstChild;
        while (firstChild = el.firstChild) {
            fragment.appendChild(firstChild);
        }
        return fragment
    }
}

元素节点

clipboard.png

文本节点

clipboard.png

把data中的数据，显示在视图上(到1:16分)

class Compile {
    constructor(el, vm) {
        this.el = this.isElementNode(el) ? el : document.querySelector(el);
        this.vm = vm;
        if (this.el) {
            let fragment = this.node2frament(this.el);
            this.compile(fragment);
            this.el.appendChild(fragment)
        }
    }

    //辅助方法
    isElementNode(node) {
        return node.nodeType === 1;
    }
    isDirective(name) {
        return name.includes('v-')
    }

    //核心方法
    compileElement(node) {
        let attrs = node.attributes;
        Array.from(attrs).forEach(attr => {
            let attrName = attr.name;
            if (this.isDirective(attrName)) {
                let expr = attr.value;
                let [, type] = attrName.split('-');
                CompileUtil[type](node, this.vm, expr)
            }
        })
    }
    compileText(node) {
        console.log(node)
        let expr = node.textContent;
        let reg = /\{\{([^}]+)\}\}/g;
        if (reg.test(expr)) {
            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)
            }
        })
    }
    node2frament(el) {
        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) { // 获取编译文本后的结果
        return expr.replace(/\{\{([^}]+)\}\}/g, (...arguments) => {
            return this.getVal(vm, arguments[1]);
        })
    },
    text(node, vm, expr) { //文本处理
        let updateFn = this.updater['textUpdater'];
        let value = this.getTextVal(vm, expr);
        updateFn && updateFn(node, value)
    },

    model(node, vm, expr) {
        let updateFn = this.updater['modelUpdater'];
        updateFn && updateFn(node, this.getVal(vm, expr));
    },
    updater: {
        textUpdater(node, value) {
            node.textContent = value;
        },
        modelUpdater(node, value) {
            node.value = value;
        }
    }
}

v-model类型

        modelUpdater(node, value) {
            node.value = value;
            console.log(node)
            console.log(value)
            console.log(node.value)
        }

clipboard.png

weixin_34409357
关注
vue mvvm 原理
LikY03321的博客
09-30 879
mvvmMVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。要实现一个mvvm的库，我们首先要理解清楚其实现的整体思路。先看看下图的流程：1.实现compile,进行模板的编译，包括编译元素（指令）、编译文本等，达到初始化视图的目的，并且还需要绑定好更新函数；2.实现Observe,监听所有的数据，并对变化数据发布通知；
Vue的MVVM实现原理
z2428478096的博客
11-21 1284
vue是采用数据劫持配合发布者-订阅者模式的方式，通过object.definerProperty()来劫持各个属性的setter和gettter，在数据变动时，发布消息给依赖收集器，去通知观察者，做出对应的回调函数，去更新视图。 MVVM作为绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听model数据变化表，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer，Compile之间的通信桥梁，达到...
vue中MVVM实现原理
danniyedan的博客
09-15 363
vue中MVVM实现原理 - 知乎
Vue的MVVM原理
qq_39540493的博客
02-09 728
MVC：传统的MVC是指用户的操作会调用服务器接口，服务器将处理结果返回给前端Model，然后页面进行重新渲染。 MVVM：MVVM模型则是指ViewModel通过Data Bindings绑定数据来监听数据的变化，从而更新页面的DOM，ViewModel还通过DOM Listeners来监听DOM的变化从而去改变Model。 ...
手写实现vue中mvvm原理
08-14
本篇文章将深入探讨如何手写实现Vue中的MVVM原理，帮助你更深入理解这个框架的工作机制。 MVVM模式源于微软的WPF（Windows Presentation Foundation）框架，它的主要目的是在视图（View）和模型（Model）之间建立一...
详解Vue中的MVVM原理和实现方法
01-19
下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现，这篇文章大家可以学习到： 1.Vue数据双向绑定核心代码模块以及实现原理 2.订阅者-发布者模式是如何做到让数据驱动视图、视图驱动数据再驱动视图 3.如何对元素...
vue中MVVM原理及其实现
illion booked
05-23 587
要实现一个mvvm的库，我们首先要理解清楚其实现的整体思路。先看看下图的流程： 1.实现compile,进行模板的编译，包括编译元素（指令）、编译文本等，达到初始化视图的目的，并且还需要绑定好更新函数； 2.实现Observe,监听所有的数据，并对变化数据发布通知； 3.实现watcher,作为一个中枢，接收到observe发来的通知，并执行compile中相应的更新方法。 4.结合上述方法，向外暴露mvvm方法。 二. 实现方法 首先编辑一个html文件，如下： <!DOCTYPE html&gt
Vue中的MVVM原理解析和实现
leeta的博客
08-12 1136
下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现，这篇文章大家可以学习到： 1.Vue数据双向绑定核心代码模块以及实现原理 2.订阅者-发布者模式是如何做到让数据驱动视图、视图驱动数据再驱动视图 3.如何对元素节点上的指令进行解析并且关联订阅者实现视图更新 1、思路整理 实现的流程图： 我们要实现一个类MVVM简单版本的Vue框架,就需要实现以下几点： 1、实现一个数据监听Observer，对数据对象的所有属性进行监听，数据发生变化可以获取到最新值通知订阅者。 2、.
vue实现MVVM
IT教育任姐姐的博客
12-13 1131
js创建对象的两种方式： //第一种 varperson=newObject(); person.name="Nicholas"; person.age=29; person.job="SoftwareEngineer"; person.sayName=function(){ alert(this.name); } //第二种 varperson={ name:"Nicholas", age:29, job:"SoftwareEngineer", s...
浅谈vue中的MVVM实现原理
明月如霜丶
04-03 645
现成MVVM 菜单教程 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://unpkg.com/vue/dist/vue.j...
vue之MVVM实现原理
weixin_34278190的博客
11-17 106
2019独角兽企业重金招聘Python工程师标准>>> ...
vue源码解析之MVVM原理实现
浮生离梦的博客
02-02 371
一、MVVM的原理分析 Observer对象 用来对 data 所有属性数据进行劫持的构造函数 给 data 中所有属性重新定义属性描述(get/set) 为 data 中的每个属性创建对应的 dep 对象 Dep(Depend)对象 data 中的每个属性(所有层次)都对应一个 dep 对象 创建的时机: 在初始化 define data 中各个属性时创建对应的dep对象 在 d...
vue mvvm原理
weixin_46396187的博客
07-20 404
vue mvvm原理： m相当于数据层，vm视图层，v是之间的调用者，主要实现流程如下： 通过js原生的方法Object.defineProperty()来劫持各个属性的setter，getter，在属性对应数据改变时，发布消息给订阅者，然后触发相应的监听回调，达到视图更新的目的。 具体流程内容： 1：observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter getter。 2：实现数据劫持后，接下来的任务怎么通知订阅者了，我们需要在监听数据时实现一个消息订阅器，具体的方法是：定义一
Vue-MVVM原理
weixin_34381687的博客
01-29 147
1.完整示例 1.1引入vue的cdn <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <s...
理解Vue：MVVM原理与实现细节解析
"本文详细解析了Vue中的MVVM原理和实现方法，包括数据双向绑定的核心代码模块、订阅者-发布者模式在数据驱动视图中的应用，以及如何解析元素节点指令来实现视图更新。通过理解MVVM，我们可以更好地掌握Vue框架的工作...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值