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. BGP华为、思科选路规则

    选路规则 华为BGP选路规则 思科BGP选路规则 第0条 下一跳是否可达,如果不可达则不参与选路 BGP 向IBGP对等体发布import引入的IGP路由时, 将下一跳属性改为自身的接口地址,而非IG ...

  2. CentOS7 添加开机启动项

     centos6 加入开机启动:   vim /etc/rc.d/rc.local 注意命令不要出错,重启后生效   或者   centos 7 下: vim /lib/systemd/system/ ...

  3. 完整的Django入门指南学习笔记2

    part2: 前沿 在第一节中,我们安装了项目所需要的一切:Python3.6以及在虚拟环境中运行的Django2.0,这部分教程继续在项目上编写代码. 开始写代码前,先讨论下项目的相关背景知识,然后 ...

  4. java解析前端请求接口的全部入参

    第一种: public static String getRequestInput(HttpServletRequest request) { StringBuilder sb = new Strin ...

  5. Oracle控制文件

    一.Oracle 控制文件 为二进制文件,初始化大小由CREATE DATABASE指定,可以使用RMAN备份 记录了当前数据库的结构信息,同时也包含数据文件及日志文件的信息以及相关的状态,归档信息等 ...

  6. Hadoop---日志服务器

    Hadoop---日志服务器 1.历史服务器: 启动: 1)测试使用: 1.做一个任务: 2.接受任务: 3.执行任务: 4.执行任务完成: 2)日志文件产生: 成功后:   失败后: 点击进入His ...

  7. java项目中登陆时记住密码

    1.在登陆的时候记住密码,不知自动登陆: 2.登陆页面,填写用户名,密码,点击记住密码,下次进入登陆页面的时候,填写同样的用户名,密码自动填充(在不一次会话的情况下也就是说在不关闭浏览器的情况下): ...

  8. Mybatis中,当插入数据后,返回最新主键id的几种方法,及具体用法

    insert元素 属性详解 其属性如下: parameterType ,入参的全限定类名或类型别名 keyColumn ,设置数据表自动生成的主键名.对特定数据库(如PostgreSQL),若自动生成 ...

  9. 【转】Vue 2.0封装axios笔记

    前言 单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染.Ajax.websocket等),今天我们主要讲解Ajax部分. 最近团队讨论了一下,Ajax 本身跟 V ...

  10. absolute 导致点击事件无效

    方案一: 添加层数 z-index 方案二: 背景的透明度为0 background-color:#000; filter:alpha(opacity=0); opacity:0;