一个利用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. React的setState如何实现同步处理数据

    React里面的使用setState来进行状态的更新,为了性能的提升,此时的过程是异步操作的,那我们如果在一个进程里面想同步操作改变了状态的值怎么办呢,这里需要使用回调函数了: this.setSta ...

  2. C++异常 返回错误码

    一种比异常终止更灵活的方法是,使用函数的返回值来指出问题.例如,ostream类的get(void)成员ASCII码,但到达文件尾时,将返回特殊值EOF.对hmean()来说,这种方法不管用.任何树脂 ...

  3. C++成员初始化列表的语法

    如果Classy是一个累,而mem1.mem2.mem3都是这个类的数据称源,则类构造函数可以使用如下的语法来初始化数据成员:Classy::Classy(int n, int m) : mem1(n ...

  4. iOS - UITableView滚动到指定的cell并且选中

    UITableView //项目中遇到的 - (void)selectRowAtIndexPath:(nullable NSIndexPath *)indexPath animated:(BOOL)a ...

  5. 谷歌Volley网络框架讲解——网络枢纽

    研究了这么久的Volley,愈来愈发现这个框架的精美和人性化.比起民间一些框架强很多,一开始总是盲人摸象找不到头绪,现在终于有些明朗了.Volley其实就是一个请求队列的代理类,我们看下UML. 这就 ...

  6. jquery类似方法的比较(三)

    属性选择器 1.$("div[class|='test']")可以选择 class为test的div 和 class以“test-”开头的div. 2.$("div[cl ...

  7. 安装Memcache的PHP扩展

    查看memcached是否启动 # ps -ef | grep memcached 安装Memcache的PHP扩展 1.在http://pecl.php.net/package/memcache 选 ...

  8. 12.文件系统fs

    文件系统fs ==> 提供文件的读取, 写入, 更名, 删除, 遍历目录, 链接等POSIX文件系统操作 1.fs.readFile(filename, [encoding], [callbac ...

  9. 170719、springboot编程之异步调用@Async

    1.在pom.xml中增加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artif ...

  10. mysql添加federated引擎实现dblink远程表访问

    查看mysql数据库federated引擎是否开启. show engines; 若没有开启federated则在mysql配置文件my.cnf中mysqld中添加federated. 在远程数据库中 ...