一个利用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. Open vSwitch 工作原理

    概念 Open vSwitch中许多网络上的概念与平时接触到的不同,这里介绍一下Open vSwitch中用到的一些名词及概念. Packet (数据包) 网络转发的最小数据单元,每个包都来自某个端口 ...

  2. Shell主要逻辑源码级分析(1)——SHELL运行流程

    版权声明:本文由李航原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/109 来源:腾云阁 https://www.qclou ...

  3. flash 逐字，逐行歌词实现，添加伪3D效果

    项目结构: 效果如图: 项目为公司项目,下载人员禁止用于商业项目中. 项目开发工具:FlashDevelop 点击下载

  4. maven安装和与IDE集成

    第一部分:maven的基本信息和安装,配置  maven是一个项目构建和管理的工具,提供了帮助管理 构建.文档.报告.依赖.scms.发布.分发的方法.可以方便的编译代码.进行依赖管理.管理二进制库等 ...

  5. 【git】------git的基本命令------【巷子】

    001.初始化仓库,创建git仓库 git init 002.配置个人信息 git config --global user.name <名字> --------->:配置用户名 g ...

  6. hello gradle

    首先下载和安装gradle可以参考官网下载地址,建议下载带有源码和文档的,以便后期查阅. 下载完以后打开终端输入gradle -v有如下信息输出,表示安装成功: bogon:gradle scott$ ...

  7. Oracle数据类型之nchar

    nchar(size)  nvarchar2(size) n 代表的意思是编码格式为unicode编码,无论中文或者英文都以一个字符来存放数据. 举例: 比如“a” ,占用一个字符 比如“月”,占用一 ...

  8. 怎么将Android的API demo导入到Eclipse工作区中

    File ->New Android Project 选择Create project from existing sample (不同Android版本有对应的ApiDemo示例).

  9. Git 基本操作(二)

    1. 分支操作 1.1 Fast-forward 当被合并分支(C4)位于合并分支(C2)的历史线上,此时的合并称为"fast-forward"; // hotfix 被合并到 m ...

  10. 广通软件荣获“2016年度ITSS优秀会员”称号

    1月12日,为了表彰在IT服务标准研制和应用推广工作中所做出的贡献,中国电子工业标准化技术协会信息技术服务分会(以下称ITSS分会)在北京召开“2016年度ITSS优秀会员”专家评选活动,广通软件获得 ...