vue实现动态数据绑定


Posted in Javascript onApril 28, 2017

实现的步骤:

1.监听对象属性的读取与变化

Object.defineProperty() 方法会直接在对象上定义一个新的的属性,或者已经存在的属性并且返回这个属性

语法是 Object.defineProperty(obj, prop, descript)

obj: 目标对象

prop: 需要定义或修改的属性的名字

descript: 将被定义或修改的属性的描述符

描述:

这个方法精确添加或修改对象的属性,我们添加的属性是可以枚举的属性(Object.keys()/ for...in)

对象里面存在是属性描述存在的形式是:

数据描述符:拥有可写入或不可以写入的属性(相当于口令密码)

存取描述符:由一对getter-setter 函数功能来描述的属性(方法)

注意:**描述符**必须是两种形式之一,不能同时是两者。

数据描述符和存取描述符均具有以下可选键值:

1.configurable:当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,也能够被删除。默认为 false

2.enumerable:当且仅当该属性的 enumerable 为 true 时,该属性才能够出现在对象的枚举属性中。默认为 false

数据描述符:

1.value:该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined。

2.writable:当且仅当该属性的 writable 为 true 时,该属性才能被赋值运算符改变。默认为 false。

存取描述符同时具有以下可选键值:

1.get:一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。

2.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;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 Javascript
Vue实现动态响应数据变化
Apr 28 #Javascript
解决浏览器会自动填充密码的问题
Apr 28 #Javascript
JS实现简单的天数计算器完整实例
Apr 28 #Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 #jQuery
js实现移动端编辑添加地址【模仿京东】
Apr 28 #Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 #Javascript
d3.js入门教程之数据绑定详解
Apr 28 #Javascript
You might like
php4的session功能评述(三)
2006/10/09 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
django 环境变量配置过程详解
2019/08/06 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
一道SQL存储过程面试题
2016/10/07 面试题
党员个人思想汇报
2013/12/28 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
三人合伙协议书范本
2014/10/29 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
小学副班长竞选稿
2015/11/21 职场文书
python字典的元素访问实例详解
2021/07/21 Python
Python 数据可视化之Matplotlib详解
2021/11/02 Python