IFE_02_dynamicDataBinding_01

来源：互联网发布：成都php培训学费编辑：程序博客网时间：2024/05/18 02:25

总结

主要利用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>

0 0