zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    Form组件
    LAMP+Varnish的实现
    缓存反向代理-Varnish
    CDN初识
    HTTP缓存初探
    Keepalived搭建主从架构、主主架构实例
    实现高可用-Keepalived
    nginx负载均衡实例
    lvs集群实现lvs-dr模型和lvs-nat模型
    LVS介绍
  • 原文地址:https://www.cnblogs.com/threeyou/p/13449996.html
Copyright © 2011-2022 走看看