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 缩水版 双向绑定的更多相关文章

  1. Vue框架之双向绑定事件

    Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...

  2. 用ES6的class模仿Vue写一个双向绑定

    原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...

  3. 组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双向绑定数据

    组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...

  4. Vue的数据双向绑定和Object.defineProperty()

    Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

  5. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

  6. 对象的属性类型 和 VUE的数据双向绑定原理

    如[[Configurable]] 被两对儿中括号 括起来的表示 不可直接访问他们 修改属性类型:使用Object.defineProperty()  //IE9+  和标准浏览器  支持 查看属性的 ...

  7. vue中数据双向绑定注意点

    最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules=& ...

  8. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

  9. 剖析Vue原理&实现双向绑定MVVM

    转自:http://www.w3cmark.com/2016/496.html 本文能帮你做什么? 1.了解vue的双向数据绑定原理以及核心代码模块 2.缓解好奇心的同时了解如何实现双向绑定 为了便于 ...

随机推荐

  1. yii框架中使用gii的用法

    首先在config文件中的 main-local.php中添加一句 'allowedIPs' => ['*'],如下图所示:

  2. php 递归删除文件夹

    /*** 递归删除文件方法一 param $path 文件路径 **/ function delAll($path){ $path=str_replace('\\','/',$path);//去除反斜 ...

  3. 如何在mmseg3添加词库

      一.了解几个文件 ll /usr/local/mmseg/etc/mmseg.ini uni.lib 编译后的词库,给sphinx 用的unigram.txt 原词库给人看的, 在这里面人工添加自 ...

  4. 『Numpy』np.ravel()和np.flatten()

    What is the difference between flatten and ravel functions in numpy? 两者的功能是一致的,将多维数组降为一维,但是两者的区别是返回拷 ...

  5. 使用INTERSECT运算符

    显示符合以下条件的雇员的雇员ID 和职务ID:这些雇员的当前职务与以前的职务相同,也就是说这些雇员曾担任过别的职务,但现在又重新担任了以前的同一职务. hr@TEST0924> SELECT e ...

  6. python零碎知识点

    0.规范化 使用Ctrl+Alt+L可以将代码排列格式更加规范化 1.浮点数 1.23x109就是1.23e9或者12.3e8:0.000012可以写成1.2e-5 2.字符串 >>> ...

  7. HDFS shell操作及HDFS Java API编程

    HDFS shell操作及HDFS Java API编程 1.熟悉Hadoop文件结构. 2.进行HDFS shell操作. 3.掌握通过Hadoop Java API对HDFS操作. 4.了解Had ...

  8. 十七、Spring框架(IOC/DI)

    一.Spring框架 Spring是一个基于IOC和AOP的结构J2EE系统的框架. 1.IOC反转控制是Spring的基础(Inversion Of Control).也就是说创建对象由以前的程序员 ...

  9. dubbo 负载均衡

    在系统中可以启动多个 provider 实例,consumer 发起远程调用时,根据指定的负载均衡算法选择一个 provider. 在本机配置多个 provider,使用不同的端口: <dubb ...

  10. Linux pwn入门教程——CTF比赛

    Linux pwn入门教程(1)——栈溢出基础 from:https://zhuanlan.zhihu.com/p/38985585   0x00 函数的进入与返回 要想理解栈溢出,首先必须理解在汇编 ...