vue 动态数据绑定
动态数据绑定(一)
我的github iSAM2016
实现的步骤:
1.监听对象属性的读取与变化
Object.defineProperty() 方法会直接在对象上定义一个新的的属性,或者已经存在的属性
并且返回这个属性
语法是 Object.defineProperty(obj, prop, descript)
obj: 目标对象
prop: 需要定义或修改的属性的名字
descript: 将被定义或修改的属性的描述符
描述:
这个方法精确添加或修改对象的属性,我们添加的属性是可以枚举的属性(Object.keys()/ for...in)
对象里面存在是属性描述存在的形式是:
数据描述符:拥有可写入或不可以写入的属性(相当于口令密码)
存取描述符:由一对getter-setter 函数功能来描述的属性(方法)
注意:**描述符**必须是两种形式之一,不能同时是两者。
数据描述符和存取描述符均具有以下可选键值:
- configurable:当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,也能够被删除。默认为 false
- enumerable:当且仅当该属性的 enumerable 为 true 时,该属性才能够出现在对象的枚举属性中。默认为 false
数据描述符:
- value:该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined。
- writable:当且仅当该属性的 writable 为 true 时,该属性才能被赋值运算符改变。默认为 false。
存取描述符同时具有以下可选键值:
- get:一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。
- set:一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认为 undefined。
示例:
创建属性
var o = {};
Object.defineProperty(o, "a", {value : 37,
writable : true,
enumerable : true,
configurable : true});
console.log(o.a);
Object.defineProperty(o, "b", {get : function(){ /*console.log( bValue)*/ return value },
set : function(newValue){ bValue = newValue; },
enumerable : true,
configurable : true});
o.b = 38;
修改属性
当属性特性(property attribute) writable 设置为false时,表示 non-writable,属性不能被修改。
var o = {}; // 创建一个新对象
Object.defineProperty(o, "a", { value : 37,
writable : false });
console.log(o.a); // 打印 37
o.a = 25; // 没有错误抛出(在严格模式下会抛出,即使之前已经有相同的值)
console.log(o.a); // 打印 37, 赋值不起作用。
一般的setter 和 getters
var pattern = {
get: function () {
return 'I alway return this string,whatever you have assigned';
},
set: function () {
this.myname = 'this is my name string';
}
};
function TestDefineSetAndGet() {
Object.defineProperty(this, 'myproperty', pattern);
}
var instance = new TestDefineSetAndGet();
instance.myproperty = 'test';
// 'I alway return this string,whatever you have assigned'
console.log(instance.myproperty);
// 'this is my name string'
console.log(instance.myname);
解题
function Observer(property) {
this.data = {};
this.recursion(data);
}
Observer.prototype.recursion = function(obj) {
var val = null;
for (key in obj) {
if(obj.hasOwnProperty(key)) {
val = obj[val];
if(typeof val === 'object' && !!val) {
new Observer(val);
}
this.access(key, val);
}
}
}
Observer.prototype.access = function(key, val) {
Object.defineProperty(this.data, key, {
enumerable: true,
configurable: true,
get: function () {
console.log('你访问了' + key);
return val
},
set: function (newVal) {
console.log('你设置了' + key);
console.log('新的' + key + ' = ' + newVal)
if (newVal === val) return;
val = newVal
}
})
}
let app1 = new Observer({
name: 'youngwind',
age: 25
});
let app2 = new Observer({
university: 'bupt',
major: 'computer'
});
// 要实现的结果如下:
app1.data.name // 你访问了 name
app1.data.age = 100; // 你设置了 age,新的值为100
app2.data.university // 你访问了 university
app2.data.major = 'science' // 你设置了 major,新的值为 science
多层级对象
当传入的对象是
let app1 = new Observer({
user: {
name: "liangshaofeng",
age: "24"
},
address: {
city: "beijing"
}
});
递归解决问题!!
function Observer(data) {
this.data = data;
this.recursion(this.data);
}
Observer.prototype.recursion = function(obj) {
var val = null;
for (key in obj) {
if(obj.hasOwnProperty(key)) {
val = obj[key];
if(typeof val === 'object' && !!val) {
new Observer(val);
}
this.access(key, val);
}
}
}
Observer.prototype.access = function(key, val) {
Object.defineProperty(this.data, key, {
enumerable: true,
configurable: true,
get: function () {
console.log('你访问了' + key);
return val
},
set: function (newVal) {
console.log('你设置了' + key);
console.log('新的' + key + ' = ' + newVal)
if (newVal === val) return;
val = newVal
}
})
}
let app1 = new Observer({
user: {
name: "liangshaofeng",
age: "24"
},
address: {
city: "beijing"
}
});
app1.data.user.name // 你访问了 name
app1.data.user.age = 100; // 你设置了 age,新的值为100
增加事件系统
// 事件系统
function Event() {
this.events = {};
}
Event.prototype.emit = function(attr, val, newVal) {
this.events[attr] && this.events[attr].forEach(function(item){
item(val, newVal)
})
}
Event.prototype.on = function(attr, callback){
if(this.events[attr]){
this.events[attr].push(callback);
}else{
this.events[attr] = [callback];
}
}
function Observer(data) {
this.data = data;
this.recursion(this.data);
this.eventsBus = new Event();
}
Observer.prototype.recursion = function(obj) {
var val = null;
for (key in obj) {
if(obj.hasOwnProperty(key)) {
val = obj[key];
if(typeof val === 'object' && !!val) {
new Observer(val);
}
this.access(key, val);
}
}
}
Observer.prototype.access = function(key, val) {
var self = this;
Object.defineProperty(this.data, key, {
enumerable: true,
configurable: true,
get: function () {
console.log('你访问了' + key);
return val
},
set: function (newVal) {
if (typeof newVal === 'object' && !!newVal) {
new Observer(newVal);
}
console.log('你设置了' + key);
console.log('新的' + key + ' = ' + newVal)
self.eventsBus.emit(key, val, newVal);
if (newVal === val) return;
val = newVal
}
})
}
Observer.prototype.$watch = function(attr, callback){
this.eventsBus.on(attr, callback);
}
let app1 = new Observer({
user: {
name: "liangshaofeng",
age: "24"
},
address: {
city: "beijing"
}
});
app1.data.user.name // 你访问了 name
app1.data.user.age = 100; // 你设置了 age,新的值为100
app1.data.user.name = {
lastName: 'liang',
firstName: 'shaofeng'
};
app1.data.user.name.lastName;
// 这里还需要输出 '你访问了 lastName '
app1.data.user.name.firstName = 'lalala';
// 这里还需要输出 '你设置了firstName, 新的值为 lalala'
var app1 = new Observer({
name: 'liujianhuan',
age: 25,
company: 'Qihoo 360',
address: 'Chaoyang, Beijing'
})
app1.$watch('age', function(oldVal, newVal){
console.log(`我的年龄变了,原来是: ${oldVal}岁,现在是:${newVal}岁了`)
})
app1.$watch('age', function(oldVal, newVal){
console.log(`我的年龄真的变了诶,竟然年轻了${oldVal - newVal}岁`)
})
app1.data.age = 20;
vue 动态数据绑定的更多相关文章
- Vue.js 数据绑定语法详解
Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...
- Vue动态添加v-model绑定及获取其返回数据
从数据库拿到的动态数据绑定到页面对应的v-model或者v-bind上,并且根据对页的操作获取到返回的值: 1.首先在data里定义一个数据 timeTip 为一个空数组 data () { retu ...
- RDLC报表系列(一) 简单的动态数据绑定和配置
RDLC系列链接 RDLC报表系列(一) 简单的动态数据绑定和配置 RDLC报表系列(二) 行分组 RDLC报表系列(三) 总计和折叠 RDLC报表系列(四) 矩阵 RDLC报表系列(五) 简单的图 ...
- Vue动态组件
前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...
- vue 双向数据绑定的实现学习(二)- 监听器的实现
废话:上一篇https://www.cnblogs.com/adouwt/p/9928278.html 提到了vue实现的基本实现原理:Object.defineProperty() -数据劫持 和 ...
- vue 双向数据绑定的实现学习(一)
前言:本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么,如下动图: ...
- vue双向数据绑定的简单实现
vue双向数据绑定的简单实现 参考教程:链接 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- vue动态class——实现tag的选中状态
vue动态class——实现tag的选中状态 <template> <div class="common-nav"> <div class=" ...
- Vue双向数据绑定原理分析(转)
add by zhj: 目前组里使用的是前端技术是jQuery + Bootstrap,后端使用的Django,Flask等,模板是在后端渲染的.前后端没有分离,这种做法有几个缺点 1. 模板一般是由 ...
随机推荐
- 使用uEdit时,在线管理图片功能不可用
把所有的配置文件都配置好了,uedit的在线管理功能图片还是不可用,看了一下源码: 是的,它在img的src属性后边的图片上加上了参数,那肯定不能用啊,所以修改源文件image.js.直接搜索noCa ...
- 单元测试框架Uinttest一文详解
一谈及unittest,大家都知道,unittest是Python中自带的单元测试框架,它里面封装好了一些校验返回的结果方法和一些用例执行前的初始化操作.unittest单元测试框架不仅可以适用于单元 ...
- .Net Reactor混淆导致匿名类处理出现的问题处理分析
.Net Reactor 是一款比较不错的混淆工具,比VS自带的那个好用很多,一直以来也陪伴着我们的成长,虽然没有完美的混淆工具,不过也算还是不错的,至少能在一定程度上对DLL进行一定的保护处理. 不 ...
- 【django】form
form 组件组要功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 1.创建Form类时,主要涉及到 [字段] 和 [插件],字段用于 ...
- FP-Tree算法详细过程(Java实现)
我就不说FP-Tree的作用.优点什么的了,直接用例子来解释构建FP-Tree和找出所有频繁项集,第一次写博客,不对之处还请指出. 输入文件: testInput.txt T1 T2 T3 T4 T5 ...
- Spring 梳理-webApplicationContext 与servletContext
1.WebApplicationContext的研究 ApplicationContext是spring的核心,Context通常解释为上下文环境,用“容器”来表述更容易理解一些,Applicatio ...
- pip换源
PIP 下载慢,给你Python3的pip换个源 一键换源 文章来源:企鹅号 - 从零开始学习python 要实现一键换源需要安装一个模块 pip install pqi PQI相关命令 PQI获取当 ...
- ng-cli新建项目
tip:所有的命令是红色标签 , 链接为蓝色标签 使用ng-cli创建新的项目一般需要安装一些新的东西后才可以进行创建成功 1.需要先安装node.js 链接: https://nodejs.org ...
- 写了那么多年 Java 代码,终于 debug 到 JVM 了
继上篇文章 原创 | 全网最新最简单的 openjdk13 代码编译 之后,我们有了自己编译后的 jdk 和 hotspot,如下图所示.接下来就来干一番事情. 搭建调试环境 1.下载 CLion 软 ...
- 关于ajax提交表单的一些实例及遇到的问题和解决办法
ajax提交的表单有两种情况: 第一种:input type类型没有file上传文件类型的表单 第二种:input type类型有file上传文件类型的表单 之所以分为两种:是因为原生ajax是不能提 ...