Decorate和Proxy模式

Chaz 发布于2019-08-20 16:12 / 818人阅读

摘要：但是如果请求地址没有和中定义的地址匹配上，那么这个时候就会调用原生的去发送这个请求。比如中间件的实现

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中间件的实现.

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82782.html

用ES6重写《JavaScript Patterns》中的设计模式

摘要：所以自己动手用重新实现了一遍里面的设计模式，算是对其的巩固，也算是与大家一起来研究探讨语法的一些最佳实践。前言最近在回顾设计模式方式的知识，重新翻阅了《JavaScript模式》（个人感觉也算是一本小有名气的书了哈）一书，读时总有感触：在即将到来的ES6的大潮下，书中的许多模式的代码可用ES6的语法更为优雅简洁的实现，而另一些模式，则已经被ES6原生支持，如模块模式（99页）。所...

taohonghui 2019-08-22 11:50 评论0 收藏0
Python装饰器

摘要：一引用书流畅的书二基本概念问题装饰器是什么解答严格来说，装饰器只是语法糖，装饰器是可调用的对象，可以像常规的可调用对象那样调用，特殊的地方是装饰器的参数是一个函数问题装饰器有什么特性解答装饰器有个特性，一是可以把被装饰的函数替换成其他函数，一, 引用 [书] 流畅的Python [书] Effective Python 二, 基本概念 showImg(https://segme...

aisuhua 2019-07-30 14:33 评论0 收藏0
PHP中的设计模式 <持续更新中...>

摘要：工厂模式工厂模式代码片段访问静态属性要加符静态方法生成实例对象，作为函数的参数工厂就是负责生成对象的类或方法工厂模式，是把创造者类和要生产的类分开，创建者是个工厂类，定义了用于生产产品对象的方法行程特殊的代码重复，不必要的子类话，为了工工厂模式 /* 工厂模式代码片段*/ class Employee{ private static $type = array(minio...

mgckid 2019-07-01 12:13 评论0 收藏0
《JavaScript 模式》知识点小抄本（上）

摘要：单体模式有以下优点用来划分命名空间，减少全局变量数量。通常我们使用操作符创建单体模式的三种选择，让构造函数总返回最初的对象使用全局对象来存储该实例不推荐，容易全局污染。实现该工厂模式并不困难，主要是要找到能够穿件所需类型对象的构造函数。介绍最近开始给自己每周订个学习任务，学习结果反馈为一篇文章的输出，做好学习记录。这一周(02.25-03.03)我定的目标是《JavaScri...

didikee 2019-08-23 15:37 评论0 收藏0
FE.BASE-前端设计模式、编码与重构笔记

摘要：高质量特性面向对象，无类，原型可维护的代码可读一致可预测看起来像是同一个人写的文档减少全局对象，传参访问全局对象单模式，忘记时的副作用显式声明的全局变量无法用删除不扩充内置原型模式每个和对齐这里不考虑花括号相关的缩进规则每个中的代码整齐缩进高质量Javascript Javascript特性：面向对象，无类，原型可维护的代码(可读;一致;可预测;看起来像是同一个人写的;文档) 减...

SmallBoyO 2019-08-26 18:27 评论0 收藏0