zoukankan      html  css  js  c++  java
  • js实现一个简单的响应式双向数据绑定

    一,基本原理  

      我们这里使用了对象中的一个特殊属性:访问器属性,这个属性不能在对象中设置,而是必须通过defineProperty()方法单独定义。

      我们首先定义一个函数:

        var obj = { };

      其次,为obj对象定义一个test的访问器属性:

        Object.defineProperty(obj, 'test', {

            get: ()=>{console.log('get被调用了')},

            set: ()=>{console.log('set被调用了')}

        })

      可以像普通属性一样读取访问器属性,但是当读取或设置访问器属性的时候,调用其内部特性:get和set函数。get和set方法内部的this都指向obj,这意味着get和set可以操作对象内部的值。另外访问器属性会被优先调用,与其同名的普通属性则会被忽略。

      obj.test //读取属性,调用get函数

      obj.test = 'abcd' //为属性赋值,调用set函数

    二,举个栗子

      我们要的效果是:随着输入框文字的变化,span中会同步显示相同的文字内容;或者在js或控制台修改obj.test的值,视图也会更新,这样就实现了model到view以及view到model的双向数据绑定。

      首先有一个input和span。

    <input type="text" id="input_1">
    <span id="span_1"></span>

    var obj = {};
    Object.defineProperty(obj, 'test', {
      set: (newVal)=>{
        document.getElementById('input_1').value = newVal;
        document.getElementById('span_1').innerHTML = newVal;
      }
    });
    document.addEventListener('keyup', (e)=>{
      obj.test = e.target.value;
    })

      效果图:

  • 相关阅读:
    我的插件框架·前传
    在OpenSUSE中听歌
    ASP.NET MVC 3.0 源码阅读手记(1)
    Mono on Linux 开发与实践札记(1)
    探讨对Web控件的异常处理
    进销存管理中负库存产生的原因以及对应措施
    看了一篇不错的文章 使用 UTF8 对 XML 文档进行编码
    进销存管理中对红冲处理的误区
    Ajax学习笔记(2) 一定要用XML吗?
    打造自己的Html文本编辑控件
  • 原文地址:https://www.cnblogs.com/tianhaining/p/8425345.html
Copyright © 2011-2022 走看看