Proxy(代理)例子

//总结 Proxy传入两个参数第一个是一个对象实例 一个是对象（里面定义get set方法）
使用时proxy的实例加.调用，这会触发第二个对象实参里的get方法
 get有两个参数  get(target,attr) target是这个proxy的实例 也就是本身this
attr是实例调用.之后的属性，
dom.div({},,,)传入的实参传给了get方法里的回调函数

        <script type="text/javascript">
            var user = {
                name:"小明",
                age:16
            }
            
            //设置代理对象
            var pUser = new Proxy(user,{
                //代理获取属性事件
                get(target,attr){
                    //console.log(target)
                    //console.log(attr)
                    return target[attr]
                },
                set(target,attr,value){
                    // console.log(target)
                    // console.log(attr)
                    // console.log(value)
                    if(value>=0&&value<150){
                        target[attr] = value;
                    }else{
                        console.warn("不能设置超出范围的年龄，范围是（0-150）")
                    }
                    
                }
            })
            
            var age = pUser.age  //16
            
        </script>

 

proxy应用

<script type="text/javascript">
            /* 
            DOM.div({id:"d1",'class':"redBg"},"helloworld","你好")
            DOM.ul({id:"ul",'data-index':"abc"})
            DOM.img({src:"1.jpg"})
            DOM.h1({'class':"blueBg"},"hello")
             */
            let DOM = new Proxy({},{
                get(target,attr){
                    //console.log(123)
                    var domObj = document.createElement(attr);
                    return function(attrs,...children){
                        for(key in attrs){
                            domObj.setAttribute(key,attrs[key]) 
                        }
                        
                        for(let i = 0;i<children.length;i++){
                            if(typeof children[i] == 'string'){
                                children[i] = document.createTextNode(children[i])
                            }
                            domObj.appendChild(children[i])
                        }
                        return domObj;
                    }
                }
            })
            var d1 = DOM.div({id:"d1",'class':"redBg"},"helloworld","你好");
            document.body.appendChild(d1);
            
            var ul = DOM.ul(
                        {id:"liebiao",'class':"redBg"},
                        DOM.li({'class':"li"},"列表1"),
                        DOM.li({'class':"li"},"列表2"),
                        DOM.li({'class':"li"},"列表3"),
                        DOM.li({'class':"li"},"列表4"),
                    );
                    
                    
                
            document.body.appendChild(ul);
            
            
            var img = DOM.img({src:"img/ty.png"});
            document.body.appendChild(img)
            
            
        </script>