您的位置：首页 > 移动开发 > Objective-C

关于js的Object.defineProperty方法的使用

2019-03-19 14:00 274 查看

一、关于Object.defineProperty

Object.defineProperty()是直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象，一共有三个参数。

Object.defineProperty(object, propertyname, descriptor);

  • object：必须，要在其上添加或修改属性的对象。
  • propertyname：必需。 一个包含属性名称的字符串。
  • descriptor：属性描述符。 它可以针对数据属性或访问器属性。

descriptor：有以下参数值

  • value: 属性的值，默认为 undefined。 writable: 该属性是否可写，如果设置成
    false，则任何对该属性改写的操作都无效（但不会报错,但是在严格模式下会报错。），对于像前面例子中直接在对象上定义的属性，这个属性该特性默认值为为
    true。
  • configurable:总开关，一旦为false，就不能再设置他的（value，writable，configurable）
  • enumerable:定义了对象的属性是否可以在 for…in 循环和 Object.keys() 中被枚举。
  • get: 对定义的属性取值的时候会触发get 对应的函数,并且返回结果，默认返回undefined。
  • set: 对定义的属性赋值的时候会触发set 对应的函数

二、 使用Object.defineProperty实现简单的双向数据绑定mvvm

双向数据绑定的原理是：
mvvm 分为model(模型) view(视图) viewModel(视图模型)

  • model 用来存储数据
  • view 用来展示数据
  • ViewModel 关联数据,和model实现双向绑定。

将对象的属性绑定到view，具体的说，我们有一个对象，该对象有一个name属性，当我们给这个对象name属性赋新值的时候，新值在view上也会得到更新。同样的道理，当我们有一个输入框或者textarea的时候，我们输入一个新值的时候，也会在该对象的name属性得到更新。

下面是一个通过 Object.defineProperty 来实现一个简单的数据双向绑定。通过该方法来监听属性的变化。
实现的简单效果如下：
页面上有一个input输入框和h5显示框，在input输入框输入值，按下enter键时，h5也会显示对应的值，可以简单的理解为 模型-> 视图的 改变，以及 视图 -> 模型的改变。如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h5 id="txtShow"></h5>
<input type="text" id="txt">
</div>
<script>
var model = {}
var v = ''
Object.defineProperty(model, 'txt', {
// 设置属性值
set: function(val) {
v = val
txtShow.innerHTML = this.txt;
},
// 获取属性值
get: function () {
return v
}
})
var txtShow = document.getElementById('txtShow'),
txt = document.getElementById('txt');
txt.onkeyup = function() {
if (event.keyCode == 13) {
model.txt = txt.value;
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航