IFE_02_dynamicDataBinding_01

最新推荐文章于 2017-03-21 17:22:11 发布

原创最新推荐文章于 2017-03-21 17:22:11 发布 · 410 阅读

0 ·

CC 4.0 BY-SA版权

IFE 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用Object.defineProperty实现的数据观察者模式。该模式允许开发者创建一个对象实例，通过该实例可以观察并响应数据变化。当访问或修改数据时，会触发预定义的行为，如打印日志。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结

主要利用Object.defineProperty 、Object.keys 遍历等。

代码

<!DOCTYPE html>
<html>
<head>
    <title>dymanic_data_binding_01</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
    <style type="text/css">
    </style>
</head>
<body>
    <ol>要求：
        <li>传入参数只考虑对象，不考虑数组</li>
        <li>new Observer返回一个对象，其data属性要能够访问到传递进去的对象</li>
        <li>通过data访问属性和设置属性的时候，均能打印出对应的信息</li>
    </ol>
    <pre><code>
        let app1 = new Observer({
            name: 'youngwind',
            age: 25
        });

        let app2 = new Observer({
            university: 'bupt',
            major: 'computer'
        });

        app1.data.name // 你访问了 name
        app1.data.age = 100; // 你设置了 age，新的值为 100
        app2.data.university // 你访问了 university
        app2.data.major = 'science'; // 你设置了 major，新的值为 science
    </code></pre>
</body>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script type="text/javascript">
    hljs.initHighlightingOnLoad();

    function Observer (data) {
        if (_getType(data) !== 'object') throw 'wrong data type';

        this.data = {};

        Object.keys(data).forEach(function (v, i) {
            Object.defineProperty(this.data, v, {
                get: function () {
                    console.log(`你访问了 ${v}`);
                    return data;
                },
                set: function (value) {
                    console.log(`你设置了 ${v}，新的值为 ${value}`);
                    data = value;
                }
            });
        }, this);

    }

    function _getType (obj) {
        return Object.prototype.toString.call(obj).match(/ .+(?=\])/)[0].trim().toLowerCase();
    }
</script>
</html>