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 相关文章推荐
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 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
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
php在文件指定行中写入代码的方法
2012/05/23 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
关闭时刷新父窗口两种方法
2014/05/07 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
Python中的pack和unpack的使用
2018/03/12 Python
python如何使用unittest测试接口
2018/04/04 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
python 将Excel转Word的示例
2021/03/02 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
美国社交购物市场:MassGenie
2019/02/18 全球购物
高二政治教学反思
2014/02/01 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
计算机毕业生自荐信
2014/06/12 职场文书
2016年情人节问候语
2015/11/11 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android
基于Python实现股票收益率分析
2022/04/02 Python