【学习笔记70】数据劫持

一、 数据驱动视图

• 多次渲染页面，多的时候，比较麻烦和繁琐

        const box = document.querySelector('.box')
        const obj = {
            name: 'QF666',
            age: 18
        }
        box.innerHTML = `名字: ${obj.name};    年龄: ${obj.age}`;
 
        obj.age = 99;
        box.innerHTML = `名字: ${obj.name};    年龄: ${obj.age}`;
 
 
        obj.name = 'QF999';
        box.innerHTML = `名字: ${obj.name};    年龄: ${obj.age}`;
        console.log(obj);

二、数据劫持

• 将原始数据，劫持出一份一摸一样, 听起来有点像浅拷贝
• 劫持出来的数据, 默认是不可以修改的

语法: Object.defineProperty(那个对象, '对象的key', {配置项})
    配置项:
    1. value        访问这个值 之后, 得到结果
    2. writable     决定当前这个属性能否被修改, 默认是 false
    3. enumerable   决定当前这个属性能否被枚举, 决定当前这个属性能否被遍历到
    4. getter       是一个函数, 是一个获取器, 当访问这个属性时, 会执行这个函数
                    getter不能和value、writable一起使用
 
    5. setter      是一个函数, 是一个设置器, 当设置这个属性是, 会执行这个函数

1、初级版 

        const obj = {}
        obj.name = 'QF666'
        console.log(obj)
 
        // Object.defineProperty(obj, str, {配置项})
        Object.defineProperty(obj, 'age', {
            // value: 'QF999',
            // writable: true,
            enumerable: true,
            get() {
                // console.log('你当前访问了这个age属性, 触发了get函数')
                return 'qwerty'
            },
            set(val) {
                console.log('你当前想要修改这个age属性, 修改的值是: ', val)
            }
        })
        obj.age = 999
        console.log(obj.age)

2、升级版

    
"box">
    <script>
        // 实现数据劫持
        const box = document.querySelector('#box')
        const obj = {
            name: 'QF666',
            age: 18
        }
        console.log('原始对象obj:', obj)
        const res = {}
 
        Object.defineProperty(res, 'name', {
            get() {
                return obj.name
            },
            set(val) {
                // console.log('你想要修改这个属性的值, 新值为: ', val)
                obj.name = val
                box.innerHTML = `名字: ${res.name}; 年龄: ${res.age}`
            }
        })
 
        Object.defineProperty(res, 'age', {
            get() {
                return obj.age
            },
            set(val) {
                // console.log('你想要修改这个属性的值, 新值为: ', val)
                obj.age = val
                box.innerHTML = `名字: ${res.name}; 年龄: ${res.age}`
            }
        })
        box.innerHTML = `名字: ${res.name}; 年龄: ${res.age}`
        res.age = 100;
    script>

 三、封装数据劫持

    <input type="text" name="" id="inp">
    <div id="box">div>

函数的封装 ：

        const box = document.querySelector('#box')
        const obj = {
            name: 'QF666',
            age: 18
        }
        function observer(origin, callback) {
            const target = {}
 
            for (let k in origin) {
                Object.defineProperty(target, k, {
                    get() {
                        return origin[k]
                    },
                    set(val) {
                        // console.log('你现在想要修改的key是' , k, '修改的值为', val)
                        origin[k] = val
                        callback(target)
                    }
                })
            }
            callback(target)
            return target
        }

调用的 

        function fn(res) {
            box.innerHTML = `名字: ${res.name}; 年龄: ${res.age}`
        }
 
        const app = observer(obj, fn)
 
 
        document.querySelector('#inp').oninput = function (e) {
            app.age = e.target.value
        }

四、封装数据劫持+渲染

• 模拟一个其他人写的代码, 框架的源码
• 把需要渲染的代码, 都放到HTML 中, 然后由我这段代码帮助我们去渲染

    
"app">
        <h1> {{msg}} h1>
        <h1> {{ name }} h1>
        <h1> {{ age }} h1>
        <h1> {{ abc }} h1>