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 相关文章推荐
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 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缓存技术的多种方法小结
2012/08/14 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
跟老齐学Python之模块的加载
2014/10/24 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
使用Python更换外网IP的方法
2018/07/09 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
个人自我鉴定
2013/11/07 职场文书
海飞丝广告词
2014/03/20 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
2014年导购员工作总结
2014/11/18 职场文书
python办公自动化之excel的操作
2021/05/23 Python
KVM基础命令详解
2022/04/30 Servers
java实现面板之间切换功能
2022/06/10 Java/Android