javascript用defineProperty实现简单的双向绑定方法


Posted in Javascript onApril 03, 2020

defineProperty

Object提供的方法,用于给对象添加自定义属性具体用法如下:

const obj = { _value: 1 };

Object.defineProperty(obj, 'value', {
  get: function() {
    console.log('get方法执行');
    return this._value;
  },
  set: function(a) {
    console.log('set方法执行');
    this._value = a;
  }
})
obj.value = 3;
console.log(obj.value);
console.log(obj._value);

在node中执行结果如下:

javascript用defineProperty实现简单的双向绑定方法

下面来分析一下代码
首先定一个对象,并对对象添加一个自定义属性value,同时添加了getter,setter两个函数用来分别控制value属性的修改和获取,
当执行obj.value = 3;时,会自动调属性的setter方法,将value的修改同步到_value属性上,当执行obj.value语句获取属性值时,会自动调用getter方法获取方法的返回值;

总结 (参考MDN)
该方法接收三个参数
obj:要添加属性的对象
prop: 要定义的属性
descriptor:要定义或者修改的属性描述符
其中描述符包含以下几种

1.configurable:布尔值,控制属性是否能改变(除了value,writable)及删除
2.enumerable: 布尔值,控制属性是否可枚举,即通过for in循环或者Object.keys访问
3.value:属性值,可以时任何有效JavaScript值
4.writable 布尔值,属性可否通过赋值修改
5.get:属性getter函数,执行时传入this,this值取决于调用者
6.set:属性setter函数,赋值时执行,并传入this

双向绑定

由此可以设计一下数据双向绑定的简单实现:
在数据对象内定义属性,通过对dom绑定事件监听dom内值的变化,并赋值给数据对象,数据对象的改动会调用自身的setter方法,在方法内在动态修改dom内容。

代码如下:

<!-- 简单数据双向绑定实现 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="root">
      <button id='btn'>请求数据</button>
    </div>
  </body>
  <script>
    const root = document.getElementById('root');
    const btn = document.getElementById('btn');
    const input = document.createElement('input');
    const model = document.createElement('p');
    const dataModel = {
      _value:0,
    }
    Object.defineProperty(dataModel, 'value', {
      configurable: true,
      set:function(value){
        this._value = value;
        input.value = value;
        model.innerHTML = `<span>数据模型:</sapn> ${value}`;
      },
      get:function(){
        return this._value;
      }
    })

    btn.addEventListener('click', () => {
      const range = Math.floor(Math.random(0, 1) * 100);
      dataModel.value = range;
    })

    input.addEventListener('input',(ev) => {
      dataModel.value = ev.target.value;
    })

    const initPage = () => {
      dataModel.value = 100;
    }
    initPage();
    root.append(input);
    root.append(model);
  </script>
</html>

描述有点乱,看实现代码更清晰一点,有问题欢迎指正

到此这篇关于javascript用defineProperty实现简单的双向绑定方法的文章就介绍到这了,更多相关javascript defineProperty双向绑定内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
jQuery中even选择器的定义和用法
Dec 23 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 #Javascript
JS内置对象和Math对象知识点详解
Apr 03 #Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 #Javascript
JavaScript鼠标拖拽事件详解
Apr 03 #Javascript
Javascript组合继承方法代码实例解析
Apr 02 #Javascript
Javascript异步编程async实现过程详解
Apr 02 #Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 #Javascript
You might like
[转帖]PHP世纪万年历
2006/12/06 PHP
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
PHP在线书签系统分享
2016/01/04 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
Python操作串口的方法
2015/06/17 Python
Django URL传递参数的方法总结
2016/08/28 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
阿里云:Aliyun.com
2017/02/15 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
车间班长岗位职责
2013/11/30 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
小学新学期寄语
2014/04/02 职场文书
运动员获奖感言
2014/08/15 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
东京审判观后感
2015/06/01 职场文书
小学语文国培研修日志
2015/11/13 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
java版 简单三子棋游戏
2022/05/04 Java/Android