Proxy应用场景

stay calm~

已于 2022-08-25 22:02:32 修改

阅读量653

点赞数 1

分类专栏： h5 文章标签： javascript 前端 proxy

于 2022-08-25 22:00:47 首次发布

本文链接：https://blog.csdn.net/qq_50352386/article/details/126532668

版权

h5 专栏收录该内容

34 篇文章 5 订阅

订阅专栏

场景一属性校验

场景二实现vue3的响应式原理

场景三 proxy实现私有属性

场景一属性校验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        class Person{
            constructor(){
                this.name=''
                this.age=12
                return validator(this,personValidator)
            }
        }
        const personValidator = {
            name(val){
                 return typeof val==='string'
            },
            age(val){
                return typeof val==='number' && val>18
            }
        }

        function validator(target,validator){
            return new Proxy(target, {
                validator1:validator,
                set(target,key,value){
                    if(target.hasOwnProperty(key)){
                        let v=this.validator1[key]
                        if(v(value)){
                            return Reflect.set(target,key,value)
                        }else{
                            throw new Error(`不能设置${key}属性值为${value}`)
                        }
                    }else{
                        throw new Error(`不存在${key}属性`)
                    }
                }
            })
        }
        let p1 = new Person()
        p1.name='橘子'
        // p1.sex='msafd'
        p1.age=24
        console.log(p1);
    </script>
</body>
</html>

设置不存在属性

设置年龄小于18岁

场景二实现vue3的响应式原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <p></p>
    <script>
        let inpDom =document.querySelector('input')
        let pDom =document.querySelector('p')
        let obj={
            text:''
        }
        let newObj = new Proxy(obj,{
            set:function(target,key,value){
                if(target.hasOwnProperty(key)){
                    pDom.innerHTML=value
                    /* 解决直接在控制台改变文本框属性值 */
                    inpDom.value=value
                }
            }
        })
        inpDom.addEventListener('keyup',function(e){
            /* 获取文本框输入值 */
              newObj.text = e.target.value
        })
    </script>
</body>
</html>

场景三 proxy实现私有属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
       const userInfo={
        /* 私有属性通常一—_开头 */
        _id:123,
        getAllUsers:function(){
            console.log("获取所有用户信息");
        }
       }
       const proxy = new Proxy(userInfo,{
        get:function(target,property){
            if(property[0]=='_'){
                return undefined
            }
            return target[property]
        },
        set:function(target,key,value){
            if(key[0]!=='_'){
                target[key]=value
            }
        }
       })
       console.log(proxy._id);
    //    proxy._id=33
    </script>
</body>
</html>