【JS】裝飾器讓你的程式碼更簡潔

繆宇發表於2017-10-11
JS

當我們在使用JavaScript時，有時需要用到setTimeout函式來強制程式碼延遲執行。比如：

setTimeout(() => {
  ...程式碼...
  // 這裡的程式碼將延遲執行
}, 0);複製程式碼

我很討厭這樣寫程式碼，我希望它變得簡潔，所以我們可以把setTimeout函式抽象成裝飾器。

首先建立一個timeout生成裝飾器方法來簡化我們的程式碼（TypeScript）：

function  timeout( milliseconds:  number  =  0 ) {

    return  function( target, key, descriptor ) {

        var originalMethod =  descriptor.value;

        descriptor.value  =  function (...args) {

            setTimeout(() => {

                originalMethod.apply(this, args);

            }, milliseconds);

        };

        return descriptor;

    }

}複製程式碼

在 typescript 或者 babel 中裝飾函式需要傳三個引數：

target:

要麼是被裝飾函式的類的建構函式，要麼是被裝飾函式的例項原型

key:

被裝飾函式的名稱

descriptor:

被裝飾函式的所有屬性

這裡我們需要傳入一個數值作為引數（預設為0），所以我們需要使用裝飾器工廠模式。

裝飾器工廠模式就是一個普通的函式，這個函式執行時會返回裝飾器的函式表示式。

接下來，我們得到被裝飾的函式，然後重寫它，創造一個包裹setTimeout的新函式。

好了，我現在可以這樣使用裝飾器了：

class  DemoComponent {

    constructor() {}

    @timeout()
    demoMethod() {
    // 這裡的程式碼會延遲執行
    }

    // 傳入數值
    @timeout(2000)
    demoMethod() {
        // 這裡的程式碼會延遲執行
    }

}

new  DemoComponent().demoMethod();複製程式碼

這程式碼看起來是不是灰常簡潔！ ?.

結論:

裝飾器非常強大，它不僅僅適用於各種框架也適用於各種類庫，所以在你的程式碼中試試吧。

原文：medium.com/front-end-h…

相關文章