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 相关文章推荐
jquery获取input的value问题说明
Aug 19 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
Js实现自定义右键行为
Mar 26 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
Angular实现form自动布局
Jan 28 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
对angular 实时更新模板视图的方法$apply详解
Oct 09 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生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
php把session写入数据库示例
2014/02/26 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
Android中的jQuery:AQuery简介
2014/05/06 Javascript
javascript数组详解
2014/10/22 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
jquery实现的分页显示功能示例
2019/08/23 jQuery
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现八大排序算法
2016/08/13 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
python Django的web开发实例(入门)
2019/07/31 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
python实现同一局域网下传输图片
2020/03/20 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
ORACLE第二个十问
2013/12/14 面试题
喝酒检查书范文
2014/02/23 职场文书
小学家长学校培训材料
2014/08/24 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
Python3接口性能测试实例代码
2021/06/20 Python