【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…