Decorate和Proxy模式

Decorate模式

Decorate模式的几个常见的应用场景:

• throttle(函数节流)

• debounce(函数防抖)

• AOP

装饰者模式基本的套路就是在不改变原有的函数提供的功能的情况下，再次封装提供额外的功能

函数防抖即在一定的时间间隔s秒内重复触发某个动作的话，这个动作都会被延迟执行，只有等到这s秒没有再触发这个动作的时候再去执行.例如在使用input标签进行实时搜索的时候，如果不加函数防抖时，那么每次你输入一个字符，或者是按下一次键盘就会发送一次，这样对于网络请求的消耗比较大，所以对你所监听的字符长度或者键盘事件的回调函数再用debounce进行封装一次，在规定的时间范围里不重复触发，只有到规定的时间范围里面没有再次触发这个动作的时候再去执行回调函数:

    function debounce (fn, dur) {
        let timer = null
        return function (...args) {
            clearTimer(timer)
            timer = setTimeout(() => {
                timer = null
                fn.apply(this, args)
            }, dur)
        }
    }

关于AOP的例子，可戳我&version=12010310&nettype=WIFI&fontScale=100&pass_ticket=Rxc3/D6oYRoNUmB+eyGQ8y1V5O76bWdXCv0Un4GOeFw=)

proxy 模式

proxy模式和decorate模式在代码组织的套路上有点相似，但是二者的功能及侧重点有些差别:

proxy模式在不改变原有函数的功能上，去改变最后的执行过程和结果。比如大家可能使用过的mockjs.

在你开发环境当中，引入这个库，事实上在mockjs将整个xhr的事件和方法等都模拟了一遍，核心的套路就是对外暴露和原生的xhr一致的对象和方法,但是在开发环境下，如果你的请求地址和你在mockjs中定义的需要拦截的地址能匹配上，那么会调用mockjs中重写的xhr的方法，你会发现你的请求没有发出去，而是被mockjs拦截了。但是如果请求地址没有和mockjs中定义的地址匹配上，那么这个时候就会调用原生的xhr去发送这个请求。

具体的实现请戳我

总结

proxy模式是在原有的函数的基础上进行一次封装，将本体封装为proxy去供外部调用，封装后的函数向外提供的API方法和原有的函数保持一致，但是在封装函数内部做出一些额外的处理。比如上面提到的mockjs，当没有匹配到定义的路径后，会使用原生的xhr去发送这个请求.

因此你使用的时候访问顺序是： proxy -->> 本体

decorate同样也是在原有的函数的基础上进行封装，但是封装后的函数在原有函数的基础上新增一些其他的功能。比如express中间件的实现.