美文网首页
设计模式---代理模式

设计模式---代理模式

作者: noyanse | 来源:发表于2019-07-16 23:19 被阅读0次
    /**
     * @description 代理模式,又称为委托模式,他为目标对象创造了一个代理对象,以控制对目标对象的访问
     * Visitor -----------> Proxy --------------> Target
     * Visitor <----------- Proxy <-------------- Target
     * 如 axios 拦截器, 代理模式和装饰者模式很像,但是代理模式是会对目标对象的访问进行控制,axios拦截器可以取消
     * 请求,而装饰者模式是在目标对象上添加新的功能
     * 
     * vue2.x 通过劫持各个属性的 getter 和 setter ,在数据变化时,通过发布订阅模式发布消息给订阅者
     * 触发相应的监听回调,实现数据响应式
     * vu2.x 的缺点: 
     * 1. 无法监听利用索引直接设置数组的项
     * 2. 无法监听数组的长度变化
     * 3. 无法监听ES6的 Set, WeakSet, Map, WeakMap 的变化
     * 4. 无法监听Class 类型的数据
     * 5. 无法监听对象属性的新增或者删除
     */
    
    //  const proxy = new Proxy(target, handler)
    const SuperStar = {
        name: '小仙女',
        scheduleFlag: false, // 档期标识 默认没空
        playAdvertisement(ad) {
            console.log(ad)
        }
    }
    
    const ProxyAssistant = {
        name: '经纪人',
        scheduleTime(ad) {
            const schedule = new Proxy(SuperStar, {
                set(obj, prop, val) {
                    if (prop !== prop.scheduleFlag) return
                    if (!obj.scheduleFlag && val) {
                        obj.scheduleFlag = true
                        obj.playAdvertisement(ad) // 安排
                    }
                }
            })
    
            setTimeout(() => {
                console.log('小仙女有空了')
                schedule.scheduleFlag = true
            }, 2000)
        },
    
        playAdvertisement(reward, ad) {
            if (reward > 1000000) {
                console.log('没问题')
                ProxyAssistant.scheduleTime(ad)
            } else {
                console.log('没空')
            }
        }
    }
    
    ProxyAssistant.playAdvertisement(10000, '广告')
    
    

    相关文章

      网友评论

          本文标题:设计模式---代理模式

          本文链接:https://www.haomeiwen.com/subject/vjpvkctx.html