一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第28天，点击查看活动详情。

前言

今天是更文挑战的最后一天，就再来写一写设计模式吧，往后不会更新这么频繁了，每篇内容也不会太过于短小。话不多说，来看看今天的主角代理模式吧。

代理模式

代理模式（英语：Proxy Pattern）是程序设计中的一种设计模式。所谓的代理者是指一个类别可以作为其它东西的接口。代理者可以作任何东西的接口：网上连接、存储器中的大对象、文件或其它昂贵或无法复制的资源。——百度百科

其实在前端中，我们每个人都接触过代理模式。是什么呢？答案是跨域的处理。

可能我们听过各种名词，正向代理，反向代理，JSONP，iframe等，没错，他们都可以解决跨域，本质上也是运用代理模式来进行处理的。

就比如常见的nginx反向代理，他便是通过nginx配置一个代理服务器做跳板机，反向代理访问服务器信息。

具体跨域实现本文不多做赘述。再来看看今天的第二个主角，装饰者模式吧。

装饰者模式

装饰模式指的是在不必改变原类文件和使用继承的情况下，动态地扩展一个对象的功能。它是通过创建一个包装对象，也就是装饰来包裹真实的对象。——百度百科

来看看具体使用场景吧。有一个注册登陆表单，要求其内部每个输入框在用户点击时都得显示对应的提示信息。

const decorator = function(input, fn) {
    const input = document.getElementById(input);
    // 若已绑定过事件
    if (typeof input.onclick === 'function') {
        const oldClick = input.onclick;
        input.onclick = function() {
            oldClick();
            fn();
        }
    }
    else{
        input.onclick = fn;
    }
    ...
}

通过装饰者模式，我们可以轻松的完成需求，不需要了解对象原有功能，是一种良性拓展，是对原有功能的一种保护。那再联想一下为什么不适用适配器模式，使用适配器模式，我们增加方法需了解原有方法的逻辑，在此基础上去进行开发，会破坏原有逻辑，可能会造成一些意想不到的错误。

总结

本次我们学习了两种新的设计模式，代理模式与装饰者模式。代理模式通常我们会用在解决跨域问题上面，而装饰者模式我们通常会使用在不改变类的原有逻辑，去扩展新的功能。