zoukankan html css js c++ java

使用defineProperty进行双向绑定的原理

<!DOCTYPE html>
<html>

<head>
    <title>defineProperty</title>
</head>

<body>
    name:<input type="text" id="name">
    age:<input type="number" id="age">
    <br />
    <br />
    name:<span id="namep"></span>
    <br />
    age:<span id="agep"></span>

    <script type="text/javascript">
    function Obj() {

    }
    Obj.prototype.data = {
        name: "mvvm",
        age: 18
    }

    let dataObj = new Obj();

    Object.keys(dataObj.data).forEach(key => {
        Object.defineProperty(dataObj, key, {
            get: function() {
                return dataObj[key];
            },
            set: function(newValue) {
                document.getElementById(`${key}p`).innerHTML = newValue;
                dataObj.data[key] = newValue;
            }
        });
    });

    document.getElementById("name").addEventListener('keyup', function(e) {
        dataObj["name"] = e.target.value;
    });

    document.getElementById("age").addEventListener('keyup', function(e) {
        dataObj["age"] = e.target.value;
    });
    </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <title>KOA</title>
</head>

<body>
    <input type="text" k-value="value" id="input" />
    <div k-text="value" id="el"></div>
    <script type="text/javascript">
    /**基本思路是使用Object.defineProperty对数据对象做属性get和set的监听，当有数据读取和赋值操作时则调用节点的指令，这样使用最通用的=等号赋值就可以了。*/
    var elems = [document.getElementById('el'), document.getElementById('input')];
    var data = {
        value: "hello"
    };

    var command = {
        text: function(str) {
            this.innerHTML = str;
        },
        value: function(str) {
            this.setAttribute('value', str);
        }
    }

    let scan = function() {
        for (let i = 0, len = elems.length; i < len; i++) {
            let elem = elems[i];
            elem.command = [];
            for (let j = 0, len1 = elem.attributes.length; j < len1; j++) {
                let attr = elem.attributes[j];
                if (attr.nodeName.indexOf('k-') >= 0) {
                    //调用属性指令
                    command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]);
                    elem.command.push(attr.nodeName.slice(2));
                }
            }
        }
    }

    let bValue;

    /**
     * 定义属性劫持
     */
    let defineGetAndSet = function(obj, propName) {
        try {
            Object.defineProperty(obj, propName, {
                get: function() {
                    return bValue;
                },
                set: function(newValue) {
                    bValue = newValue;
                    scan();
                },
                enumerable: true,
                configurable: true
            });
        } catch (err) {
            console.log("browser not supported");
        }
    }

    //初始化数据
    scan();

    defineGetAndSet(data, 'value');

    if (document.addEventListener) {
        elems[1].addEventListener('keyup', function(e) {
            data.value = e.target.value;
        }, false);
    } else {
        elems[1].attachEvent('onkeyup', function(e) {
            data.value = e.target.value;
        }, false);
    }

    setTimeout(function(){
        data.value = 'hello kruce';
    }, 2000)
    </script>
</body>

</html>

查看全文

相关阅读:
18 | 案例篇：内存泄漏了，我该如何定位和处理？
17 | 案例篇：如何利用系统缓存优化程序的运行效率？
16 | 基础篇：怎么理解内存中的Buffer和Cache？
Scrapyd 改进第一步: Web Interface 添加 charset=UTF-8, 避免查看 log 出现中文乱码
 scrapy_redis 相关: 将 jobdir 保存的爬虫进度转移到 Redis
lxml.etree.HTML(text) 解析HTML文档
 CSS/Xpath 选择器第几个子节点/父节点/兄弟节点
 scrapy_redis 相关: 查看保存的数据
 scrapy 通过FormRequest模拟登录再继续
 python2 python3 转换，兼容

原文地址：https://www.cnblogs.com/KruceCoder/p/10554062.html