一个利用defineProperty实现的MVVM双向数据绑

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Vue-MVVM</title>

    </head>

    <body>

        <input type="text" id="input1" value="" oninput="myFun()" />

        <input type="text" id="input2" />

    </body>

    <script>

        function myFun() {

            o._data.test = document.getElementById('input1').value

        }

        /* 这个函数用来模拟视图更新 */

        function cb(val) {

            console.log('试图更新啦~~');

            document.getElementById('input2').value = val

        }

        /* 遍历所有属性的方式对该对象的每一个属性都通过 defineReactive  */

        function observer(value) {

            if (!value || (typeof value !== 'object')) {

                return;

            }

            Object.keys(value).forEach((key) => {

                defineReactive(value, key, value[key]);

            })

        }

        /* 实现对对象的「响应式」 */

        function defineReactive(obj, key, val) {

            Object.defineProperty(obj, key, {

                enumerable: true,        // 能否被遍历，比如 for in，默认值为 false

                configurable: true,        // 描述该属性的描述符能否被改变，默认值为 false

                get: function reactiveGetter() {        // 取值的时候调用，默认值为 false

                    return val;

                },

                set: function reactiveSetter(newVal) {        // 设置值的时候使用

                    if (newVal === val) return;

                    cb(newVal);

                }

            });

        }

        /* 声明类 */

        class Vue {

            constructor(options) {

                this._data = options.data;

                observer(this._data)

            }

        }

        /* 创建实例 */

        var o = new Vue({

            data: {

                test: ""

            }

        })

    </script>

</html>

实现Vue-MVVM-step1的更多相关文章

  1. 直播课（1）如何通过数据劫持实现Vue(mvvm)框架

    19.6.28更新: 这篇博客比较完善:将每一部分都分装在单独的js文件中: 剖析Vue原理&实现双向绑定MVVM 半个月前看的直播课,现在才自己敲了一遍,罪过罪过 预览: 思路: 简单实现V ...

  2. vue mvvm原理与简单实现 -- 上篇

    Object.defineProperty介绍-- let obj = {}; Object.defineProperty(obj,'school',{ configurable : true, // ...

  3. Vue - MVVM模式及优点

    MVVM模式 视图层和数据层的双向绑定,让我们无需再去关心DOM操作的事情,更多的精力放在数据和业务逻辑上去 MVVM是Model-View-ViewModel的缩写.MVVM是一种设计思想. Mod ...

  4. Vue MVVM模型原理

    最近反思了下自己,觉得自己很急躁,学技术总是觉得能用就行了,其实这样很不好,总是这样,就永远只能当用轮子的人.好了,废话不多说,转入正题: 要理解MVVM的原理,首先要理解它是什么,怎么运作起来的: ...

  5. WPF之MVVM(Step1)——自己实现ICommand接口

    开发WPF应用程序,就不得不提MVVM.下面偶将展示MVVM中简单的实现,其中主要在于ICommand的实现上,不过这种实现方式,应该不会有多少人在开发中使用,在此仅作学习使用. 准备: 界面绘制,简 ...

  6. 通过TodoList案例对比Vue.js的MVVM设计模式与JQuery的MVP设计模式

    Vue MVVM设计模式: 在使用vue进行编程时,不会再涉及到DOM的操作,取而代之的是修改数据层,当把数据进行变更的时候,vue之中它的底层会自动的根据数据的不同帮助我们去重新渲染页面. 编码时不 ...

  7. Vue中MVVM模式的双向绑定原理 和 代码的实现

      今天带大家简单的实现MVVM模式,Object.defineProperty代理(proxy)数据   MVVM的实现方式: 模板编译(Compile) 数据劫持(Observer) Object ...

  8. 剖析手写Vue，你也可以手写一个MVVM框架

    剖析手写Vue,你也可以手写一个MVVM框架# 邮箱:563995050@qq.com github: https://github.com/xiaoqiuxiong 作者:肖秋雄(eddy) 温馨提 ...

  9. vue框架入门和ES6介绍

    vue框架入门和ES6介绍 vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等. https://cn.vuejs.org/ 源码:https://g ...

  10. mvvm模式和mvc模式 概述总结对比

    1.mvc模式简介: MVC的全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,是一种软件设计典范.例如: angular ...

随机推荐

  1. console.log篇

    前言: 从接触变成开始,就用到了神奇的“console.log”,原来其中还有很多不为自己知道的“小秘密”,今天就深入研究一下吧 1.可以F12打开控制台,输入console.log(xxx),就可以 ...

  2. vue2.0+element-ui(01简单点的单页面)

    前言: 在<Vue.js权威指南>刚出版的时候,自己就作为一名前端粉捧了一把场,可是真是应了那句“出来混,总是要还的“这句话了,那时候信心满满的买来书想要认真研究,最终却还是把它搁浅了.直 ...

  3. Effective C++ —— 构造/析构/赋值运算（二）

    条款05 : 了解C++默默编写并调用哪些函数 编译器可以暗自为class创建default构造函数.copy构造函数.copy assignment操作符,以及析构函数. 1. default构造函 ...

  4. UIBarButtonItem

    1.UINavigationController导航控制器如何使用 UINavigationController可以翻译为导航控制器,在IOS里经常用到. 我们看看它的如何使用: 下面的图显示了导航控 ...

  5. ExtJS6的中sencha cmd中自动创建案例项目代码分析

    在之前的博文中,我们按照sencha cmd的指点,在自己win7虚拟机上创建了一个案例项目,相当于创建了一个固定格式的文档目录结构,然后里面自动创建了一系列js代码.这是使用sencha cmd自动 ...

  6. 【转载】为ASP.NET MVC及WebApi添加路由优先级

    路由方面的: 转载地址:http://www.jb51.net/article/73417.htm Author:lijiao 这是一个对Asp.Net Mvc的一个很小的功能拓展,小项目可能不太需要 ...

  7. deferred对象（摘自别人的文章）

    对jQuery中的deferred对象的整体认识: Deferred是个工厂类,返回的是内部构建的deferred对象 tuples 创建三个$.Callbacks对象,分别表示成功,失败,处理中三种 ...

  8. Excel 2010 最熟悉的陌生功能：筛选器(将当前所选内容添加到筛选器)

    使用excel2010版的同学,在进行筛选时,肯定都对这句话很熟悉:将当前所选内容添加到筛选器.但很多同学天天看到,却不知道什么是筛选器?它有什么作用. 其实,这里所指的筛选器就是储存筛选结果的一个虚 ...

  9. sencha touch 入门系列 （九）sencha touch 视图组件简介

    对于一个普通用户来说,你的项目就是一组简单的视图集合,用户直接通过跟视图进行交互来操作你的应用,对于一个开发人员来说,视图是一个项目的入口,虽然大部分时候最有价值的部分是在model层和control ...

  10. poj2096 Collecting Bugs[期望dp]

    Collecting Bugs Time Limit: 10000MS   Memory Limit: 64000K Total Submissions: 5394   Accepted: 2670 ...