再一次,javascript设计模式与开发实践-装饰者模式

简述

在不改变对象自身的基础上,在程序运行期间给对象动态的添加功能。

很多时候我们不想去碰原函数,也许原函数是其他同事的,也可能是一个很古老的项目,现在可以通过装饰者模式在不改变原函数的情况下给函数增加功能。

使用场景

  • 统计
  • 表单验证
  • ..

案例

在项目开发中难免要加上很多统计代码,这些统计代码与业务代码并没有多大关系,那么使用装饰者模式再好不过了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Function.prototype.after = function (fn) {
    var that = this;

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

        fn.apply(this, arguments);

        return ret;
    };
};

Function.prototype.before = function (fn) {
    var that = this;

    return function () {
        fn.apply(this, arguments);

        return that.apply(this, arguments);
    };
};

var showLogin = function () {
    console.log('打开登陆框');
};

showLogin = showLogin.after(function () {
    console.log('上报登录统计');
});

showLogin();