博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【一窥究竟系列】Wue实现数据双向绑定原理
阅读量:6856 次
发布时间:2019-06-26

本文共 1784 字,大约阅读时间需要 5 分钟。

hot3.png

一、认识Object.defineProperty()

语法:

Object.defineProperty(obj, prop, descriptor)

参数说明:

obj:必需。目标对象 

prop:必需。需定义或修改的属性的名字
descriptor:必需。目标属性所拥有的特性

返回值:

传入函数的对象。即第一个参数obj

给对象的属性添加特性描述,目前提供两种形式:数据描述和存取器描述。

A.数据描述

当修改或定义对象的某个属性的时候,给这个属性添加一些特性:

var obj = {    test:"hello"}//对象已有的属性添加特性描述Object.defineProperty(obj,"test",{    configurable:true | false,    enumerable:true | false,    value:任意类型的值,    writable:true | false});//对象新添加的属性的特性描述Object.defineProperty(obj,"newKey",{    configurable:true | false,    enumerable:true | false,    value:任意类型的值,    writable:true | false});

数据描述中的属性都是可选的,来看一下设置每一个属性的作用。

设置的特性总结:

value: 设置属性的值

writable: 值是否可以重写。true | false
enumerable: 目标属性是否可以被枚举。true | false
configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false

B.存取器描述

当使用存取器描述属性的特性的时候,允许设置以下特性属性:

var obj = {};Object.defineProperty(obj,"newKey",{    get:function (){} | undefined,    set:function (value){} | undefined    configurable: true | false    enumerable: true | false});

注意:当使用了getter或setter方法,不允许使用writable和value这两个属性getter/setter

当设置或获取对象的某个属性的值的时候,可以提供getter/setter方法。

  • getter 是一种获得属性值的方法

  • setter是一种设置属性值的方法。

在特性中使用get/set属性来定义对应的方法。

var obj = {};var initValue = 'hello';Object.defineProperty(obj,"newKey",{    get:function (){        //当获取值的时候触发的函数        return initValue;        },    set:function (value){        //当设置值的时候触发的函数,设置的新值通过参数value拿到        initValue = value;    }});//获取值console.log( obj.newKey );  //hello//设置值obj.newKey = 'change value';console.log( obj.newKey ); //change value

注意:get或set不是必须成对出现,任写其一就可以。如果不设置方法,则get和set的默认值为undefined;configurable和enumerable同上面的用法。

C.兼容性

在ie8下只能在DOM对象上使用,尝试在原生的对象使用 Object.defineProperty()会报错。

二、基本实例

简单的demo,很遗憾,暂未实现{

{ message }}模板解析

  
Wue 双向绑定实现原理

我会改变:message

 

转载于:https://my.oschina.net/weijuer/blog/1796687

你可能感兴趣的文章
Nova官方资料入口处
查看>>
通过GeoIP2分析访问者IP获取地理位置信息
查看>>
20个大背景风格网页设计作品欣赏
查看>>
Google-Authenticator
查看>>
Android开发指南(37) —— Data Backup
查看>>
【VLC-Android】LibVLC API简介(相当于VLC的MediaPlayer)
查看>>
分享一个收集到的文件和目录操作类FileSystemObject
查看>>
团队建设的小技巧
查看>>
laravel 基础知识总结
查看>>
第八次会
查看>>
利用脚本打包的动态库 在打包发布时出现得问题解析 ERROR ITMS-90362等
查看>>
Tomcat安全配置规范
查看>>
Configure Dynamics 365 and Azure Service Bus Integration (using OneWay relay and listener)
查看>>
必须掌握的30种SQL语句优化
查看>>
day14-css边框以及其他常用样式
查看>>
还原数据库 提示数据在访问中,无法独占访问
查看>>
【其他】Xshell秘钥方式登陆服务器
查看>>
Codeforces 405C
查看>>
Tomcat之catalina.out日志分割
查看>>
Ubuntu下安装Matplotlib和basemap
查看>>