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 相关文章推荐
javascript JSON操作入门实例
Apr 16 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
各种常用的JS函数整理
Oct 25 Javascript
七个很有意思的PHP函数
May 12 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
跟混乱的页面弹窗说再见
Apr 11 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
微信公众号网页分享功能开发的示例代码
May 27 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
安装APACHE
2007/01/15 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
python实现马耳可夫链算法实例分析
2015/05/20 Python
在Mac OS上搭建Python的开发环境
2015/12/24 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
农民入党思想汇报
2014/01/03 职场文书
教育技术职业规划范文
2014/03/04 职场文书
品质主管岗位职责
2014/03/16 职场文书
数学系毕业生求职信
2014/05/29 职场文书
股东合作协议书
2014/09/12 职场文书
店铺转让协议书
2015/01/29 职场文书
合作意向书范本
2019/04/17 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL