【学习笔记70】数据劫持

最新推荐文章于 2024-08-15 11:51:07 发布
最新推荐文章于 2024-08-15 11:51:07 发布
阅读量618 收藏
点赞数 1
分类专栏： JavaScript 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58190023/article/details/128055507
版权
本文探讨了数据驱动视图的渲染优化，包括直接操作DOM和利用数据劫持技术（如Object.defineProperty）来创建不可变对象。接着介绍了如何封装数据劫持，并结合输入事件实现实时渲染，最后展示了更高级的数据劫持策略，如对象深度劫持。
摘要由CSDN通过智能技术生成

一、 数据驱动视图

  • 多次渲染页面，多的时候，比较麻烦和繁琐
        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、升级版

    <div id="box"></div>
    <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 中, 然后由我这段代码帮助我们去渲染
    <div id="app">
        <h1> {{msg}} </h1>
        <h1> {{ name }} </h1>
        <h1> {{ age }} </h1>
        <h1> {{ abc }} </h1>
    </div>

封装的

    <script>
        function observer(options) {
            // 1. 验证root有没有传递
            if (options.root === undefined) {
                // console.log('您没有传递root属性, 请重新传递')
                // 手动返回一个错误
                throw new Error('您没有传递root属性, 请重新传递') 
            }

            // 2. 验证root能否正确获取到节点
            const rootHtml = document.querySelector(options.root)
            if (rootHtml == null) {
                // 手动返回一个错误
                throw new Error('您传递 root 的属性, 有问题, 请检查后重新传递') 
            }

            // 3. 验证是否传递data
            if (options.data == undefined) {
                throw new Error('您没有传递 data 属性, 请重新传递')
            }

            // 4. 验证data是否为一个对象
            if (options.data.constructor !== Object) {
                throw new Error('您传递的 data 不是一个对象, 请重新传递')
            }

            // 5. 数据劫持
            // 存储一份最初的html文本
            const rootHtmlStr = rootHtml.innerHTML
            //  这里存储最开始的具有{{}}的HTML文本,
            //  如果不写, 第一次渲染完毕, HTML中就没有花括号, 第二次渲染正则没有办法正确匹配
            const _data = {}
            for (let k in options.data) {
                Object.defineProperty(_data, k, {
                    get() {
                        return options.data[k]
                    },
                    set(val) {
                        options.data[k] = val
                        // 5.2 数据更新后, 重新渲染页面
                        randers(rootHtml, _data, rootHtmlStr)
                    }
                })
            }

            // 5.1 首次执行, 渲染页面
            randers(rootHtml, _data, rootHtmlStr)

            // 6. 返回一个劫持后的数据
            return _data
        }

        function randers(root, _data, str) {
            // 准备一个正则
            const reg = /{{ *(\w+) *}}/g

            // 匹配到节点中所有的花括号, 存放在一个数组中
            const res = str.match(reg)

            // 遍历数组, 拿到每一个花括号
            res.forEach(item => {

                // 拿到花括号内的文本, 因为这是对象中的 key
                const key = reg.exec(str)[1]

                // 将原本花括号与内部文本, 全部替换为对象中实际的值
                str = str.replace(/{{ *(\w+) *}}/, _data[key])
            })

            // 重新将修改完毕的字符串, 渲染到页面
            root.innerHTML = str
        }
    </script>

调用的

    <script>
        // 我们后续使用, 就在这里
        const app = observer({
            root: '#app',
            data: {
                msg: '你好',
                name: 'QF001',
                age: 18,
                abc: '醒醒, 别睡了, 说你呢, 还睡'
            }
        })
    </script>

 五、数据劫持升级

    <div id="root"></div>

1、基本写法

        const obj = {
            name: 'QF001',
            age: 18
        }
        const res = {}
        Object.defineProperty(res, 'name', {
            get() {
                return obj.name;
            },
            set(val) {
                obj.name = val;
            }
        })

        obj.newName = 'QF999';
        console.log(obj);

        document.querySelector('#root').innerHTML = `name: ${obj.name}`;

2、升级版

语法: Object.defineProperties(到那个对象, {

        属性1: 配置项,

        属性2: 配置项

  })

        const obj = {
            name: 'QF001',
            age: 18
        }
        const res = {}
        Object.defineProperties(res, {
            name: {
                get() {
                    return obj.name
                },
                set(val) {
                    obj.name = val
                }
            },
            age: {
                get() {
                    return obj.age
                },
                set(val) {
                    obj.age = val
                }
            }
        })

        obj.newName = 'QF999';
        console.log(obj);
        document.querySelector('#root').innerHTML = `name: ${obj.name}`;

3、升级版(plus) 

        const obj = {
            name: 'QF001',
            age: 18
        }
        const res = {};
        // 升级版(plus)
        for (let k in obj) {
            // k === 'name'    2. k === age
            console.log(k);
            Object.defineProperties(res, {
                // 对象内部直接写 k 会帮当成字符串, 所以可以写成 [k], 将他识别为变量
                [k]: {
                    get() {
                        return obj[k];
                    },
                    set(val) {
                        obj[k] = val;
                    }
                },
            })
        }

        obj.newName = 'QF999';
        console.log(obj);
        document.querySelector('#root').innerHTML = `name: ${obj.name}`;

3、升级版(super plus),   自己劫持自己

        const obj = {
            name: 'QF001',
            age: 18
        }
   
        for (let k in obj) {
            Object.defineProperties(obj, {
                ['_' + k]: {    
                    // 我在我这个对象内把所有属性复制一份, 放在自己这个对象内部
                    value: obj[k],
                    writable: true
                },
                [k]: {
                    get () {
                        return obj['_' + k]
                    },
                    set(val) {
                        obj['_' + k] = val

                        document.querySelector('#root').innerHTML = `name: ${obj.name}`
                    }
                }
            })
        }
        obj.newName = 'QF999'
        console.log(obj)

        document.querySelector('#root').innerHTML = `name: ${obj.name}`

0yizhiyang
关注
专栏目录
vue.js动态数据绑定学习笔记
12-11
在实际运行中，当`new Hue`后，先执行`Observer`对数据的劫持，然后`Compile`解析DOM并添加 Watcher。之后，数据的任何改变都会触发上述流程，实现数据和视图的同步更新。 总的来说，Vue.js 的动态数据绑定通过 ...
数据劫持基础
weixin_36723038的博客
12-28 2704
数据劫持，指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。
第二十七章 数据劫持
Girasoles的博客
12-12 864
第二十七章 数据劫持
【网络安全】七个最常见的黑客攻击技术，98%的人都遇到过（通俗易懂版）
最新发布
韩束一叶子
08-15 958
在世界人口近80亿的地球上，每天尚且发生数以百万计的抢劫打架斗殴事件，网络更是如此，网络攻防战几乎每时每刻都在发生。如果说打架斗殴枪击事件离我们还很远，那网络攻防战在你打开手机的时候就开始了！博主能力有限，暂不谈网络攻防具体操作实现过程，我们用通俗易懂的语言一块聊聊——神秘的“网络攻防”每当听到“网络攻防”这个名词，有没有一瞬间觉得很神秘？脑海中是否下意识的出现身穿黑色连衣帽的黑客中黑入某机构网站的场景？其实它并没有想象中的那么神秘，接下来我们一块唠唠常见的几种常见的网络攻防技术。
数据劫持的两个方式
qq_55910048的博客
09-14 1163
数据劫持
数据劫持详解(JavaScript)
qq_37704442的博客
02-11 774
数据劫持详解
浅谈---数据劫持
weixin_45119815的博客
04-12 409
初步了解数据劫持
Webgoat学习笔记.zip
03-12
【WebGoat学习笔记】 WebGoat是一款由OWASP（开放网络应用安全项目）开发的在线教学平台，专门用于教授和实践网络安全中的Web应用程序漏洞。它是一个故意设计有漏洞的Web应用，帮助学习者了解并熟悉各种攻击手段，...
安全测试学习笔记.pdf
05-28
安全测试是IT领域中至关重要的一个环节，它旨在确保软件或系统在运行过程中免受恶意攻击，保护用户数据和系统安全。以下是一些关键的安全测试知识点： 1. **SQL注入**： SQL注入是一种常见的安全漏洞，攻击者通过...
Vue学习笔记
04-29
Vue的学习笔记通常会包含以下核心知识点： 1. **基础概念**：Vue的核心特性包括数据绑定、指令系统、组件化、生命周期、虚拟DOM等。数据绑定允许开发者用双大括号`{{ }}`在HTML中直接展示Vue实例中的数据。指令系统...
数据劫持(一)由浅入深理解Object.defineProperty
陈小陈的博客
03-09 3234
Object.defineProperty 文章目录Object.defineProperty理解数据劫持了解Object.defineProperty() 方法添加对象属性通过数据描述符创建通过存取描述符修改修改对象属性值通过数据描述符修改writable通过存取描述符修改配置对象属性configurableenumerable数据描述符中的属性默认值问题自定义一个getters和settersObject.defineProperty的应用监听对象上的多个属性深度监听一个对象Object.defineP
Vue的双向绑定（数据劫持）
weixin_42274805的博客
01-09 1210
介绍Vue2.0和3.0的双向绑定原理
【JavaScript】数据劫持(代理)详解
浅陌繁星的博客
02-01 1572
所谓数据代理（也叫数据劫持），指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。当访问或者修改对象的某个属性的时候，通过 getter setter 拦截这个行为，进行额外的操作。包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。当然今天主要讲述的JS和ES中的数据劫持，vue中的小编后续会安排上。value：设置属性名对应的属性值。
VUE中实现数据代理和数据劫持(Vue原理之步骤二)，2024年最新金九银十后面接一句
m0_74931199的博客
04-11 851
除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！一个人可以走的很快，但一群人才能走的更远。
【Vue】Vue 数据劫持
cannotbecounted的博客
12-12 1791
Vue 数据劫持
数据劫持 _ 简述版
Mr.小灰狼_随笔
08-15 1232
数据劫持 + 是一种给对象添加成员的方式 + 语法 : Object.defineProperty( 给哪一个对象定义属性 , '键名' , { value: '值' } ) const obj = {} // 没有被劫持的数据, 你可以随心所欲的想干啥干啥 // 你想添加就添加, 想改就改, 想删就删, 想访问就访问 obj.age = 18 // 给 obj 这个对象添加一个叫做 gender 的成员 Object.defineProperty(obj, 'gender', { // .
Vue 核心之数据劫持，CSS四种定位方式的详解
2301_76379381的博客
04-04 797
enumerable: true,//可枚举configurable: true,//可修改getter.call(obj) : val//先调用默认的get方法取值//这里就劫持了get方法，也是作者一个巧妙设计，在创建watcher实例的时候，通过调用对象的get方法往订阅器dep上添加这个创建的watcher实例return value//返回属性值},getter.call(obj) : val//先取旧值return//这个是用来判断生产环境的，可以无视} else {
数据劫持--Object.definePropertie
a99101的博客
04-10 381
是JavaScript中的一个方法，它用于直接在对象上定义新属性，或者修改一个对象的现有属性，并返回这个对象。数据劫持：把一个对象里的属性进行可配置可写 可枚举，通过get set方法对取值 存取值进行逻辑上的扩展。数据描述符是一个具有值的属性，该值可能是可写的，也可能不是。取一个值的时候 先走get方法 当设置一个值的时候先看set方法的逻辑。1、什么是Object.definePropertie。vue2采用的就是这种进行响应式处理。
JS 中的数据代理
qq_53742640的博客
02-13 1381
所谓数据代理（也叫数据劫持），指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。比较典型的是和 ES2015 中新增的Proxy对象。另外还有已经被废弃的，废弃的原因正是Proxy的出现，因此这里我们就不继续讨论这个已经被浏览器删除的方法了。数据劫持最著名的应用当属双向绑定，这也是一个已经被讨论烂了的面试必考题。例如 Vue 2.x 使用的是(Vue 在 3.x 版本之后改用Proxy进行实现)。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值