每天一個(gè)設(shè)計(jì)模式之裝飾者模式

shleyZ 發(fā)布于2019-07-31 09:59 / 1721人閱讀

摘要：作者按每天一個(gè)設(shè)計(jì)模式旨在初步領(lǐng)會(huì)設(shè)計(jì)模式的精髓，目前采用和兩種語言實(shí)現(xiàn)。誠然，每種設(shè)計(jì)模式都有多種實(shí)現(xiàn)方式，但此小冊(cè)只記錄最直截了當(dāng)?shù)膶?shí)現(xiàn)方式原文地址是每天一個(gè)設(shè)計(jì)模式之裝飾者模式歡迎關(guān)注個(gè)人技術(shù)博客。

作者按：《每天一個(gè)設(shè)計(jì)模式》旨在初步領(lǐng)會(huì)設(shè)計(jì)模式的精髓，目前采用javascript和python兩種語言實(shí)現(xiàn)。誠然，每種設(shè)計(jì)模式都有多種實(shí)現(xiàn)方式，但此小冊(cè)只記錄最直截了當(dāng)?shù)膶?shí)現(xiàn)方式 :)

原文地址是：《每天一個(gè)設(shè)計(jì)模式之裝飾者模式》

歡迎關(guān)注個(gè)人技術(shù)博客：godbmw.com。每周 1 篇原創(chuàng)技術(shù)分享！開源教程(webpack、設(shè)計(jì)模式）、面試刷題（偏前端）、知識(shí)整理（每周零碎），歡迎長期關(guān)注！

如果您也想進(jìn)行知識(shí)整理 + 搭建功能完善/設(shè)計(jì)簡約/快速啟動(dòng)的個(gè)人博客，請(qǐng)直接戳theme-bmw

0. 項(xiàng)目地址

裝飾者模式·代碼

《每天一個(gè)設(shè)計(jì)模式》地址

1. 什么是“裝飾者模式”？

裝飾者模式：在不改變對(duì)象自身的基礎(chǔ)上，動(dòng)態(tài)地添加功能代碼。

根據(jù)描述，裝飾者顯然比繼承等方式更靈活，而且不污染原來的代碼，代碼邏輯松耦合。

2. 應(yīng)用場(chǎng)景

裝飾者模式由于松耦合，多用于一開始不確定對(duì)象的功能、或者對(duì)象功能經(jīng)常變動(dòng)的時(shí)候。
尤其是在參數(shù)檢查、參數(shù)攔截等場(chǎng)景。

3. 代碼實(shí)現(xiàn) 3.1 ES6 實(shí)現(xiàn)

ES6的裝飾器語法規(guī)范只是在“提案階段”，而且不能裝飾普通函數(shù)或者箭頭函數(shù)。

下面的代碼，addDecorator可以為指定函數(shù)增加裝飾器。

其中，裝飾器的觸發(fā)可以在函數(shù)運(yùn)行之前，也可以在函數(shù)運(yùn)行之后。

注意：裝飾器需要保存函數(shù)的運(yùn)行結(jié)果，并且返回。

const addDecorator = (fn, before, after) => {
  let isFn = fn => typeof fn === "function";

  if (!isFn(fn)) {
    return () => {};
  }

  return (...args) => {
    let result;
    // 按照順序執(zhí)行“裝飾函數(shù)”
    isFn(before) && before(...args);
    // 保存返回函數(shù)結(jié)果
    isFn(fn) && (result = fn(...args));
    isFn(after) && after(...args);
    // 最后返回結(jié)果
    return result;
  };
};

/******************以下是測(cè)試代碼******************/

const beforeHello = (...args) => {
  console.log(`Before Hello, args are ${args}`);
};

const hello = (name = "user") => {
  console.log(`Hello, ${name}`);
  return name;
};

const afterHello = (...args) => {
  console.log(`After Hello, args are ${args}`);
};

const wrappedHello = addDecorator(hello, beforeHello, afterHello);

let result = wrappedHello("godbmw.com");
console.log(result);

3.2 Python3 實(shí)現(xiàn)

python直接提供裝飾器的語法支持。用法如下：

# 不帶參數(shù)
def log_without_args(func):
    def inner(*args, **kw):
        print("args are %s, %s" % (args, kw))
        return func(*args, **kw)
    return inner

# 帶參數(shù)
def log_with_args(text):
    def decorator(func):
        def wrapper(*args, **kw):
            print("decorator"s arg is %s" % text)
            print("args are %s, %s" % (args, kw))
            return func(*args, **kw)
        return wrapper
    return decorator

@log_without_args
def now1():
    print("call function now without args")

@log_with_args("execute")
def now2():
    print("call function now2 with args")

if __name__ == "__main__":
    now1()
    now2()

其實(shí)python中的裝飾器的實(shí)現(xiàn)，也是通過“閉包”實(shí)現(xiàn)的。

以上述代碼中的now1函數(shù)為例，裝飾器與下列語法等價(jià)：

# ....
def now1():
    print("call function now without args")
# ... 
now_without_args = log_without_args(now1) # 返回被裝飾后的 now1 函數(shù)
now_without_args() # 輸出與前面代碼相同

4. 參考

JavaScript Decorators: What They Are and When to Use Them

《阮一峰ES6-Decorator》

《廖雪峰python-Decorator》