一个利用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. 说说SPI协议

    SPI,是英语Serial Peripheral Interface 的缩写,顾名思义就是串行外围设备接口.SPI,是一种高速的,全双工,同步的通信总线,并且在芯片的管脚上只占用四根线,节约了芯片的管 ...

  2. Android 使用WebView显示网页

    构建WebView就可以显示Web信息.因为我觉得这里会讲述很多方式来实现WebView,所以我决定为每一种方式创建一个对应的Activity,MainActivity通过Button可以点击进入对应 ...

  3. shiro-filter执行流程

    web中 在xml中配置 <filter> <filter-name>shiroFilter</filter-name> <filter-class>o ...

  4. django实现瀑布流、组合搜索、阶梯评论、验证码

    django实现图片瀑布流布局 我们在一些图片网站上经常会看到,满屏都是图片,而且图片都大小不一,却可以按空间排列.默认一个div是占用一行,当想把div里的图片并排显示的时候,只能使用float属性 ...

  5. poj_1236 强连通分支

    题目大意 有N个学校,这些学校之间用一些单向边连接,若学校A连接到学校B(B不一定连接到A),那么给学校A发一套软件,则学校B也可以获得.现给出学校之间的连接关系,求出至少给几个学校分发软件,才能使得 ...

  6. 网络虚拟化技术（一）: Linux网络虚拟化

    创建虚拟网络环境 使用命令 $ ip netns add net0 可以创建一个完全隔离的新网络环境,这个环境包括一个独立的网卡空间,路由表,ARP表,ip地址表,iptables,ebtables, ...

  7. LeetCode——Add and Search Word - Data structure design

    Description: Design a data structure that supports the following two operations: void addWord(word) ...

  8. Weinre 远程调试移动端手机web页面

    调试场景 1.调试页面在手机上.2.调试工具在PC的chrome3.手机跟pc要在同一个网络环境下,也就是都使用一个wifi 一.安装 Weinre 1.Weinre是基于nodejs实现的,所以使用 ...

  9. AStar A* A星 算法TypeScript版本

    一 演示效果 二  参考教程 <ActionScript3.0 高级动画教程> + 源码 http://download.csdn.net/download/zhengchengpeng/ ...

  10. 【BZOJ1045】[HAOI2008] 糖果传递 贪心

    [BZOJ1045][HAOI2008] 糖果传递 Description 有n个小朋友坐成一圈,每人有ai个糖果.每人只能给左右两人传递糖果.每人每次传递一个糖果代价为1. Input 第一行一个正 ...