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 同样也是在原有的函数的基础上进行封装，但是封装后的函数在原有函数的基础上新增一些其他的功能。