【JavaScript学习笔记】自己实现双向绑定

本文详细介绍了JavaScript实现双向绑定的原理,包括通过Object.defineProperty()劫持属性读写,简单双向绑定的实现,以及逐步完善的过程,如model=>view和view=>model的绑定。最后,文章探讨了使用订阅/发布模式解决无限循环问题,确保数据和视图的同步更新。
摘要由CSDN通过智能技术生成

参考:剖析Vue原理&实现双向绑定MVVMVue.js双向绑定的实现原理

1、通过Object.defineProperty(obj, prop, descriptor)劫持对象的属性读写,其中obj是要在上面定义属性的对象,prop是要定义或修改的属性名称,descriptor是属性的描述符。描述符中可选get和set键值。get是属性的getter方法,返回属性值;set为setter方法,接受唯一参数,并将该参数的值赋值给属性,get和set的默认值均为undefined。

2、双向绑定的简单实现。

    <input type="input" id="input">
    <span id="show"></span>
    <script>
        var obj = {};
        Object.defineProperty(obj, 'txt', {
            get: function () {
                return obj;
            },
            set: function (newValue) {
                document.getElementById('input').value = newValue;
                document.getElementById('show').innerHTML = newValue;
            }
        });
        document.getElementById('input').addEventListener('keyup', function (e) {
            obj.txt = e.target.value;
        });
    </script>

当通过input进行输入时,obj.txt的值会相应更新;当通过控制台改变obj.txt的值时,setter会改变view,从而实现了view=>model,model=>view的双向绑定。不过这种简单绑定不会真正执行obj.txt = e.target.value,obj永远为{},如果在set方法中赋值obj.txt = e.target.value,则会造成无限循环。为解决这个问题,将Object.defineProperty()封装为一个函数,即可在其中保存状态obj.txt,修改如下:

<input type="text" id="input">
<div id="show"></div>
<script>
    function defineProperty(obj, attr){
        var val;
        Object.defineProperty(obj, attr, {
            get: function () {
                return val;
            },
            set: function (newValue) {
                if (newValue === val){
                    return;
                }
                val = newValue;
                document.getElementById("input").value = newValue;
                document.getElementById("show").innerHTML = newValue;
            }
        });
    }

    var obj = {};
    defineProperty(obj, "txt");
    document
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值