设计模式---代理模式

2019-07-16  本文已影响0人  noyanse
/**
 * @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, '广告')

上一篇下一篇

猜你喜欢

热点阅读