vue 缩水版 双向绑定
function Observer(obj, key, value){
var dep = new Dep();
if (Object.prototype.toString.call(value) == '[object Object]') {
Object.keys(value).forEach(function(key){
new Observer(value,key,value[key])
})
};
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function(){
if (Dep.target) {
dep.addSub(Dep.target);
};
return value;
},
set: function(newVal){
value = newVal;
dep.notify();
}
})
}
function Watcher(fn){
this.update = function(){
Dep.target = this;
fn();
Dep.target = null;
}
this.update();
}
function Dep(){
this.subs = [];
this.addSub = function (watcher) {
this.subs.push(watcher);
}
this.notify = function(){
this.subs.forEach(function(watcher){
watcher.update();
});
}
}
<div id="test"></div>
var obj = {
a: 1,
b: 2,
c: 3
}
Object.keys(obj).forEach(function(key){
new Observer(obj, key, obj[key])
});
new Watcher(function(){
document.querySelector("#test").innerHTML = obj.a;
})
function Observer(obj, key, value){
//这里会生成4个dep对象； 分别对应的是属性 a , b, b.b1, c 的派系; 如果一个数据total的计算需要 a的值, 就在第一个dep中添加第三个watcher，
// 这样obj.a改变， 就会触发第三个watcher的回调， 来更新页面; obj.c的改变也会触发第三个watcher
var dep = new Dep();
if (Object.prototype.toString.call(value) == '[object Object]') {
Object.keys(value).forEach(function(key){
new Observer(value,key,value[key])
})
};
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function(){
if (Dep.target) {
dep.addSub(Dep.target);
};
return value;
},
set: function(newVal){
value = newVal;
dep.notify();
}
})
}
function Watcher(fn){
this.update = function(){
Dep.target = this;
this.callback();
Dep.target = null;
}
this.callback = fn;
this.update();
}
function Dep(){
this.subs = [];
this.addSub = function (watcher) {
this.subs.push(watcher);
}
this.notify = function(){
this.subs.forEach(function(watcher){
watcher.update();
});
}
}
var obj = {
a: 1,
b: {
b1: 33
},
c: 3
}
Object.keys(obj).forEach(function(key){
new Observer(obj, key, obj[key])
});
new Watcher(function(){
document.querySelector("#app").innerHTML = obj.a; //执行到这里， 有一个取值的操作， 会进入obj对象a属性的get方法
})
new Watcher(function(){
document.querySelector("#test").innerHTML = obj.b.b1; //执行到这里， 也有取值的操作， 先取obj.b, 第一次进入b属性的get方法， 第二次进入b1的get方法
})
new Watcher(function(){
document.querySelector("#test").innerHTML = obj.a + obj.c;
})
obj.a = 100; //进入ojb属性a的set方法
function Observer(obj, key, value){
//这里注册被订阅主体
var dep = new Dep();
if (Object.prototype.toString.call(value) == '[object Object]') {
Object.keys(value).forEach(function(key){
new Observer(value,key,value[key])
})
};
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function(){
if (Dep.target) {
dep.addSub(Dep.target);
};
return value;
},
set: function(newVal){
value = newVal;
dep.notify();
}
})
}
//Watcher， 其实就是订阅者， 这个函数是面向页面更新操作
function Watcher(fn){
this.update = function(firstDef){
this.callback();
}
this.callback = fn; //这里其实可以放入多个回调，一个watcher存放多个回调函数，
Dep.target = this;
this.callback(); //先执行一次，来触发obj.a 的get方法; 从而a的dep收集这个watcher, 并且给页面赋值;
Dep.target = null;
}
//这是发布订阅系统， 这个东西是面向对象obj的属性的。 每个属性再defineProperty的时候， 新增了一个dep， 它可以被一个页面多个地方更新依赖，使用;
function Dep(){
this.subs = [];
this.addSub = function (watcher) {
this.subs.push(watcher);
}
this.notify = function(){
this.subs.forEach(function(watcher){
watcher.update();
});
}
}
var obj = {
a: 1,
b: {
b1: 33
},
c: 3
}
Object.keys(obj).forEach(function(key){
new Observer(obj, key, obj[key])
});
new Watcher(function(){
//这里就是收集依赖的过程, obj.a会触发get方法, 这样a属性的dep就添加了这个函数为回调的watcher, 作为依赖一
document.querySelector("#app").innerHTML = obj.a;
})
new Watcher(function(){
//这里再次收集依赖, obj.a会触发get方法, 这样a属性的dep就 又添加 添加了一个函数watcher, 作为依赖二, 这样
// a属性的dep就有了两个依赖, 在设置a属性的时候, 就会触发这两个依赖函数.
document.querySelector("#test").innerHTML = obj.a;
})
new Watcher(function(){
document.querySelector("#test").innerHTML = obj.a + obj.c;
})
obj.a = 3;
function Observer(obj, key, value){
//这里注册被订阅主体
var dep = new Dep();
if (Object.prototype.toString.call(value) == '[object Object]') {
Object.keys(value).forEach(function(key){
new Observer(value,key,value[key])
})
};
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function(){
if (Dep.target) {
dep.addSub(Dep.target);
};
return value;
},
set: function(newVal){
value = newVal;
dep.notify();
}
})
}
//Watcher， 其实就是订阅者， 这个函数是面向页面更新操作
function Watcher(fn){
this.update = function(firstDef){
this.callback();
}
this.callback = fn; //这里其实可以放入多个回调，一个watcher存放多个回调函数，
Dep.target = this;
this.callback(); //先执行一次，来触发obj.a 的get方法; 从而a的dep收集这个watcher, 并且给页面赋值;
Dep.target = null;
}
//这是发布订阅系统， 这个东西是面向对象obj的属性的。 每个属性再defineProperty的时候， 新增了一个dep， 它可以被一个页面多个地方更新依赖，使用;
function Dep(){
this.subs = [];
this.addSub = function (watcher) {
this.subs.push(watcher);
}
this.notify = function(){
this.subs.forEach(function(watcher){
watcher.update();
});
}
}
var obj = {
a: 1,
b: {
b1: 33
},
c: 3
}
Object.keys(obj).forEach(function(key){
new Observer(obj, key, obj[key])
});
new Watcher(function(){
document.querySelector("#app").innerHTML = obj.a;
})
new Watcher(function(){
document.querySelector("#test").innerHTML = obj.b.b1;
})
new Watcher(function(){
document.querySelector("#test").innerHTML = obj.a + obj.c;
})
obj.a = 3;
function Observer(obj, key, value){
var dep = new Dep();
if (Object.prototype.toString.call(value) == '[object Object]') {
Object.keys(value).forEach(function(key){
new Observer(value,key,value[key])
})
};
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function(){
if (Dep.target) {
dep.addSub(Dep.target);
};
return value;
},
set: function(newVal){
value = newVal;
dep.notify();
}
})
}
function Watcher(fn){
this.update = function(firstDef){
if(firstDef){
Dep.target = this;
}
this.callback();
Dep.target = null;
}
this.callback = fn;
this.update(true);
}
function Dep(){
this.subs = [];
this.addSub = function (watcher) {
this.subs.push(watcher);
}
this.notify = function(){
this.subs.forEach(function(watcher){
watcher.update();
});
}
}
var obj = {
a: 1,
b: {
b1: 33
},
c: 3
}
Object.keys(obj).forEach(function(key){
new Observer(obj, key, obj[key])
});
new Watcher(function(){
document.querySelector("#app").innerHTML = obj.a;
})
new Watcher(function(){
document.querySelector("#test").innerHTML = obj.b.b1;
})
new Watcher(function(){
document.querySelector("#test").innerHTML = obj.a + obj.c;
})
obj.a = 3;
vue 缩水版 双向绑定的更多相关文章
- Vue框架之双向绑定事件
Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...
- 用ES6的class模仿Vue写一个双向绑定
原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...
- 组件的通信 ：provide / inject 对象进入后，就等于不用props，然后内部对象，直接复制可以接受数组，属性不能直接复制，可以用Object.assgin覆盖对象，或者Vue的set 双向绑定数据
组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...
- Vue的数据双向绑定和Object.defineProperty()
Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...
- 原生js实现 vue的数据双向绑定
原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...
- 对象的属性类型 和 VUE的数据双向绑定原理
如[[Configurable]] 被两对儿中括号 括起来的表示 不可直接访问他们 修改属性类型:使用Object.defineProperty() //IE9+ 和标准浏览器 支持 查看属性的 ...
- vue中数据双向绑定注意点
最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules=& ...
- vue中数据双向绑定的实现原理
vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...
- 剖析Vue原理&实现双向绑定MVVM
转自:http://www.w3cmark.com/2016/496.html 本文能帮你做什么? 1.了解vue的双向数据绑定原理以及核心代码模块 2.缓解好奇心的同时了解如何实现双向绑定 为了便于 ...
随机推荐
- linux中用composer安装yii框架
我的服务器是安装的是lanmp环境 如果环境版本比较低的话,建议升级一下版本 升级版本命令:./lanmp.sh cus 全都选择最高的.完成之后: curl -sS https://getcompo ...
- 正睿 2018 提高组十连测 Day2 T2 B
题目链接 http://www.zhengruioi.com/contest/84/problem/318 题解写的比较清楚,直接扒过来了. B 算法 1 直接按题意枚举,动态规划或是记忆化搜索. 时 ...
- 【洛谷p1258】小车问题
(……吓人,心有余悸) 小车问题[传送门] 洛谷算法标签:: (行吧它居然是个二分[解方程的我抖抖发瑟]) 作为一个写了一页演草纸才解出来的方程,显然我要好好写一写(希望不会半途而废) 思路: 先把其 ...
- DVWA-CSRF
Low等级 image 抓包 image 正常跳转 image image 在这里我们把密码改为qwer image image image image image ...
- hadoop常见面试题
Q1.什么是 Hadoop? Hadoop 是一个开源软件框架,用于存储大量数据,并发处理/查询在具有多个商用硬件(即低成本硬件)节点的集群上的那些数据.总之,Hadoop 包括以下内容: HDFS( ...
- Oracle 基本操作--数据类型、修改和删除表、增删改查和复制表
一.Oracle基础数据类型:数据类型: 创建数据表时,设计数据表的结构问题,也就是设计及确定数据表中各个列的数据类型,是数值.字符.日期还是图像等其他类型. 因为只有设计好数据表结构,系统才会在磁盘 ...
- chrome 浏览器去掉输入框背景透明色
chrome浏览器选择记住密码的账号,输入框会自动加上黄色的背景,有些设计输入框是透明背景的,需要去除掉这个黄色的背景: 这个黄色背景是谷歌浏览器默认的样式 user agent stylesheet ...
- java集合类整理
LinkedList 优点:插入删除迅速 缺点:不适合随机访问 List<String> staff = new LinkedList<String>(); staff.add ...
- PostgreSQL常用函数
1.系统信息函数 1.会话信息函数 edbstore=# select current_catalog; #查询当前数据库名称 current_database ------------------ ...
- Linux -- 之HDFS实现自动切换HA（全新HDFS）
Linux -- 之HDFS实现自动切换HA(全新HDFS) JDK规划 1.7及以上 https://blog.csdn.net/meiLin_Ya/article/details/8065094 ...