JSアプリケーションのスキルセット

ディレクトリ

1. デコレーター

1、デコレータ

/ **

著者：sh22n
リンク：https://juejin.im/post/5e7822c3e51d4526f23a45ae
出典：ナゲッツ

* /

クラスのデコレータ

場合装飾、デコレータ方法は、一般的に、パラメータとして特定のタイプを受信します。ここでは、ターゲットクラス高めるため静的プロパティである  test 例は：

CONST decoratorClass =（targetClass）=> { 
    targetClass.test = '123' 
} 
@decoratorClass 
クラステスト{} 
Test.test。// '123'

また、デコレータにパラメータを渡すことができるプロパティを使用して高次関数は、パラメータは、処理のどのクラスを決定します。

CONST withLanguage =（言語）=>（targetClass）=> { 
    targetClass.prototype.language = 言語。
} 
@withLanguage（ '中国' ）
クラスの学生{ 
} 
constの学生 = 新学生（）; 
student.language; // 「中国」

クラスはデコレータ属性

クラス属性は、クラス、メソッド、プロパティの装飾に使用することができるget/set 機能、典型的には3つのパラメータ：

1. ターゲット：修正クラス
2. 名前のクラスのメンバーの名前：
3. 記述：属性記述子には、オブジェクトは、このパラメータを渡します Object.defineProperty

装飾的な組み合わせ

あなたが複数のデコレータを使用したい場合は、どのようにそれを行うには？デコレータは、順次に装飾的/属性からの距離に応じて行われ、重ね合わせることができます。

クラス人{ 
    @time 
    @log 
    言います（）{} 
}

例：画像安定化とスロットル

CONSTスロットル=（時間）=> { 
    PREVせ = 新しい日付（）;
    リターン（ターゲット、名前、記述）=> { 
        CONST FUNC = descriptor.value。
        もし（typeof演算 FUNC === '関数' ）{ 
            descriptor.value = 関数（... argsを）{ 
                constの今 = 新しい日付（）;
                もし（今- PREV> 待機）{ 
                    fn.apply（この、引数）; 
                    PREV = 新しい日付（）;
                } 
            } 
        } 
    } 
} 

クラスアプリReact.Component {延び
    componentDidMount（）{ 
        window.addEveneListener（ 'スクロール'、この.scroll）を、
    } 
    componentWillUnmount（）{ 
        window.removeEveneListener（ 'スクロール'、この.scroll）。
    } 
    @throttle（ 50 ）
    スクロール（）{} 
}

CONSTデバウンス=（時間）=> { 
    タイマーをさせ、
    リターン（ターゲット、名前、記述）=> { 
        CONST FUNC = descriptor.value。
        もし（typeof演算 FUNC === '関数' ）{ 
            descriptor.value = 関数（...引数）{
                 場合（タイマー）てclearTimeout（タイマ）
                タイマ =のsetTimeout（（）=> { 
                    fn.apply（この、引数）
                } 、待機）
            } 
        } 
    } 
}