js手写简单双向绑定

什么是双向绑定

1.当一个对象(或变量)的属性改变,那么调用这个属性地方也应该改变,模型到视图(model => view)
2.当调用属性的这个地方改变了这个属性(通常是一个表单元素),那么这个对象(或变量)的属性也随之改变,即视图到模型(view => model)

如何实现(怎么知道对象的属性变了)

Object.defineProperty 设置对象属性的描述字段里面有两个属性set(设置属性时被调用)和get(获取属性时被调用)
input检测属性值的改变,触发后对应修改对应的对象(或变量)
例:

<body>
    手写一个简单双向绑定<br/>
    <input type="text" id="model"><br/>
    <div id="modelText"></div>
</body>
<script>
    var user = {
      name: '希染'
    };
    var defaultName = '希染'

    var input = document.querySelector("#model");
    var text = document.querySelector("#modelText");

    input.value = user.name;
    text.textContent = user.name;

    // 数据到视图 model => view
    Object.defineProperty(user,"name",{
      get:function(){
        console.log('获取user')
      },
      set:function(val){
        console.log('修改user')
        input.value = val;
        text.textContent = val;
      }
    })

    // 视图到数据 view => model
    input.addEventListener('input',function(val){
      user.name = input.value;
    })
<script>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容