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 相关文章推荐
判断ie的两种简单方法
Aug 12 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
vue实现在线翻译功能
Sep 27 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
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
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
Python实现模拟时钟代码推荐
2015/11/08 Python
python之Socket网络编程详解
2016/09/29 Python
python运行其他程序的实现方法
2017/07/14 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
Python count函数使用方法实例解析
2020/03/23 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
Python 如何测试文件是否存在
2020/07/31 Python
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
请介绍一下WSDL的文档结构
2013/03/17 面试题
应届生英语教师求职信
2013/11/05 职场文书
自我评价200字分享
2013/12/17 职场文书
国贸专业个人求职信范文
2014/01/08 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
庆祝教师节标语
2014/10/09 职场文书
一般纳税人申请报告
2015/05/18 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
学生会自荐信
2019/05/16 职场文书
创业计划书之物流运送
2019/09/17 职场文书
MyBatis 动态SQL全面详解
2021/10/05 MySQL