Javascript设计模式-17-装饰者模式

Javascript 设计模式 - 17 - 装饰者模式

简介

装饰者模式可以动态的给某个对象添加一些额外的职责，而不会影响从这个类中派生出的其他对象

优势

• 传统的面向对象语言中，给对象添加功能常常使用继承的方式，但是继承的方式并不灵活，还会带来许多问题：一方面导致超类和子类之间存在强耦合性，当超类改变时，子类页随之改变；另一方面，继承方式中，超类的内部细节对子类式可见的，破坏了封装性

• 装饰者模式能够在不改变对象自身的基础上，在程序运行的期间给对象动态添加职责，跟继承相比，装饰者模式是一种轻便灵活的做法，是一种 ‘即用即付’ 的方式

装饰函数的实现

    // 给 Function 构造函数添加 before 和 after 两个方法
    Function.prototype.before = function (beforeFn) {
        // 保存原函数的引用
        var _self = this;
        // 返回包含了原函数和新函数的‘代理函数’
        return function () {
            beforeFn.apply(this, arguments);

            // 执行原函数并返回原函数的执行结果
            return _self.apply(this, arguments);
        }
    }

    // 与 before 的区别是新旧函数的执行顺序
    Function.prototype.after = function (afterFn) {
        var _self = this;

        return function () {
            var ret = __self.apply( this, arguments ); 

            afterfn.apply( this, arguments ); 
            return ret;
        }
    }

    // 使用
    var ajax = function (type, url, param) {
        console.log('发送 ajax 请求 ', param);
    }

    var getToken = function () {
        return 'Token';
    }

    // 装饰
    ajax = ajax.before(function (type, url, param) {
        param.Token = getToken();
    });

    ajax('get', 'http://xxx.com', {name: 'ajax'}); // 发送 ajax 请求  {name: "ajax", Token: "Token"}

装饰者模式与代理模式

• 代理模式的目的是，当直接访问本体不方便或者不符合需要时，这个本体提供一个替代者，本体提供了关键功能，而代理提供或拒绝访问，或者访问前做额外的事

• 装饰者模式作用就是为对象动态加入行为

• 代理模式通常只有一层代理-本体的引用，而装饰者模式经常会形成一条长长的装饰链

装饰者模式与外观模式

• 外观模式，是对一系列操作的封装，并对外提供接口

• 装饰者模式，是对某一个对象进行内容附加，提供额外的行为，扩展功能

文章列表

1. javascript设计模式 – 设计原则
2. JavaScript设计模式–高阶函数
3. Javascript 设计模式 - 01 - 原型模式
4. Javascript 设计模式 - 02 - 单例模式
5. Javascript 设计模式 - 03 - 建造者模式
6. Javascript 设计模式 - 04 - 工厂模式
7. Javascript 设计模式 - 05 - 外观模式
8. Javascript 设计模式 - 06 - 代理模式
9. Javascript 设计模式 - 07 - 观察者模式（发布订阅模式）
10. Javascript 设计模式 - 08 - 策略模式
11. Javascript 设计模式 - 09 - 命令模式
12. Javascript 设计模式 - 10 - 迭代器模式
13. Javascript 设计模式 - 11 - 职责链模式
14. Javascript 设计模式 - 12 - 适配器模式
15. Javascript 设计模式 - 13 - 模板方法
16. Javascript 设计模式 - 14 - 组合模式
17. Javascript 设计模式 - 15 - 享元模式
18. Javascript 设计模式 - 16 - 中介者模式
19. Javascript 设计模式 - 17 - 装饰者模式
20. Javascript 设计模式 - 18 - 状态模式