1、Object.defineProperty方法

   Object.defineProperty(obj, prop, descriptor); 

(1)参数:

    obj:目标对象

  prop:需要定义的属性或方法的名字。

  descriptor:目标属性所拥有的特性。

(2)可配置属性(descriptor):

  • value      属性的值
  • writable            是否可改写,如果为false,就为只读,不能重新赋值,和const差不多
  • enumerable     能否枚举,如果设置为false则不能在for……in中出现  
  • configurable   ’配置‘,顾名思义,一旦为false,就不能再设置他的(value,writable,configurable)
  • ---------在 descriptor 中不能 同时设置访问器 (get 和 set) 和 wriable 或 value,否则会错,就是说想用(get 和 set),就不能用(wriable 或 value中的任何一个)------
  • get  读取时调用这个方法
  • set  赋值时调用这个方法

2、双向绑定的实现

data为与界面绑定的数据

var data={
name:'张三',
age:23,
sex:'male'
};

.view中为绑定的html

<div class="view">
<input type="text" bind="name">
<p bind="name"></p>
<p bind="age"></p>
<p bind="sex"></p>
</div>

(1)数据 ---> 视图

遍历data,对其每个属性在set方法中添加页面元素(视图)改变的方法;

$.each(data,function(key,value){
var val=data[key];
var $ele=$('.view').find('*');
Object.defineProperty(_data,key,{
set:function(v){
//console.log('设置值'+key+'为:'+v);
val=v;
$ele.each(function(index, el) {
var _this=$(this);
if(_this.attr('bind')===key){ //是否为绑定值
if(el.tagName==='INPUT'){ //是否为input标签
_this.val(val);
}else{
_this.html(val);
}
}
});
},
get:function(){
//console.log('获取值'+key);
return val;
}
})
})

(2)视图 ---> 数据

为输入框绑定input事件,视图数据发生变化时,修改data对应属性值

$('.view')find('input').on('input',function(){
var _this=$(this);
var key=_this.attr('bind');
data[key]=_this.val();
})

Object.defineProperty实现数据绑定的更多相关文章

  1. Object.defineProperty 与数据绑定的简单实现

    对象是一个属性集合,对象的基本特征是属性名(name)和属性值(value).ES5 增加了属性描述符,包括数据属性描述符(configurable enumerable writable value ...

  2. vue 数据绑定实现的核心 Object.defineProperty()

    vue深入响应式原理 现在是时候深入一下了!Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简 ...

  3. JavaScript使用Object.defineProperty方法实现双数据绑定

    Object.defineProperty这个方法非常值得学习,很多mvc框架中的双向数据绑定就是通过它来实现的. 本着互联网分享精神,今天我就将我自己的见解分享给大家,希望能有所帮助. 开始使用 O ...

  4. 双向数据绑定实现之Object.defineProperty

    vue.js利用的是es5的 defineproperty 特性实现的双向数据绑定,了解一下基本原理. 举例 var person= {}; Object.defineProperty(person, ...

  5. vue双向数据绑定的原理-object.defineProperty() 用法

    有关双向数据绑定的原理 关于数据双向绑定的理解:利用了 Object.defineProperty() 这个方法重新给对象定义了新属性,在操作新属性分别为为获取属性值(调用get方法)和设置属性值(调 ...

  6. 17: VUE数据绑定 与 Object.defineProperty

    VUE数据绑定原理:https://segmentfault.com/a/1190000006599500?utm_source=tag-newest Object.defineProperty(): ...

  7. 16、前端知识点--Object.defineProperty 的用法+双向数据绑定原理解析

    一.Object.defineProperty 的用法 Object.defineProperty 可以用于给对象添加更新属性. <script> // Object.defineProp ...

  8. Vue 双向数据绑定原理分析 以及 Object.defineproperty语法

    第三方精简版实现 https://github.com/luobotang/simply-vue Object.defineProperty 学习,打开控制台分别输入以下内容调试结果 userInfo ...

  9. vue实现双向数据绑定之Object.defineProperty()篇

    前言 vue.js中使用ES5的Object.defineProperty()实现数据的双向绑定 Object.defineProperty()原理 Object.defineProperty()可以 ...

随机推荐

  1. linux 安全基本防护 用户提权 ssh访问控制

    linu安全应用 信息安全分类: 物理安全:主机/机房环境 系统安全:操作系统 应用安全:各种网络服务,应用程序 网络安全:网络访问控制,防火墙规则 数据安全:信息的备份与恢复,加密解密 管理安全:保 ...

  2. shell脚本 awk工具

    awk工具概述awk编程语言/数据处理引擎基于模式匹配检查输入文本,逐行处理并输出通常在shell脚本中,或取指定的数据单独用时,可对文本数据做统计 命令格式格式一:awk [选项] '[条件]{编辑 ...

  3. mysql常用基础操作语法(六)--对数据排序和限制结果数量的条件查询【命令行模式】

    1.使用order by对查询的结果进行排序,asc升序,desc降序: 也可以在order by后指定多个字段名和排序方式进行多级排序: 2.使用limit限制查询结果的数量: 上图中的0,代表查询 ...

  4. ROM型启动方式概述

    ROM 型启动方式概述 所有的VxWorks 内核映像类型中,只有VxWorks 类型使用的bootrom 引导程序进行启动,此时VxWorks 内核映像放置在主机端,由目标板bootrom 完成Vx ...

  5. Java序列化机制和原理及自己的理解

    Java序列化算法透析 Serialization(序列化)是一种将对象以一连串的字节描述的过程:反序列化deserialization是一种将这些字节重建成一个对象的过程.Java序列化API提供一 ...

  6. 一:学习Linux前准备工作

    1:虚拟机,网站上有很多种类的虚拟机,找一款适合自己用的.我这里使用的是 Virtual Box 下载地址:https://www.virtualbox.org/ 安装虚拟机 一路 Next 就可以. ...

  7. JavaScript设计模式(8)-装饰者模式

    装饰者模式 1. 作用: 可用来透明地把对象包装在具有同样接口的另一对象之中,这样可以给一个方法添加一些行为,然后将方法调用传递给原始对象. 可用于为对象增加功能,用来代替大量子类. 装饰者对其组件进 ...

  8. Python Web-第四周-Programs that Surf the Web(Using Python to Access Web Data)

    1.Understanding HTML 1.最简单的爬虫 import urllib fhand=urllib.urlopen('http://www.dr-chuck.com/page1.htm' ...

  9. java 的八大排序

    import java.util.Arrays;import java.util.*; public class Sort { /** * 插入排序 */ public static void ins ...

  10. ES6常用知识点小结

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准. 因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015(简称ES2015).虽然浏览器在不 ...