JavaScript デコレータとオートアクセサ-jsチュートリアル-php.cn

JavaScript デコレータとオートアクセサ

王林

リリース： 2024-07-17 12:50:36

オリジナル

919 人が閲覧しました

JavaScript Decorators and Auto-Accessors

JavaScript デコレーターの作成方法と、自動アクセサーの使用が開発者のエクスペリエンス向上にどのように役立つかについてのチュートリアル。

コンテキストと仕様

GitHub の Decorators Proposal は、デコレータの基本的なユースケースを詳しく説明するという素晴らしい仕事をすでに行っています。私の目標は、これらの例をそこで再作成することではなく、あまり知られていない機能や相互作用に焦点を当てることです。さらに、このシリーズの次の記事では、単一のクラスプロパティで複数のデコレータを構成またはチェーンする方法について説明します。

序文

各コードサンプルにはインタラクティブな Babel REPL プレイグラウンドへのリンクが付属しているため、ポリフィルを設定したりリポジトリをスピンアップしたりせずに、自分で試すことができます。すべての例では、左上 ([設定] の下) にある [評価] オプションをオンにする必要があります。これは、コードを表示し、編集し、ブラウザーの開発コンソールを開いて、そこでログ/結果を確認できることを意味します。

デコレータのポリフィルを詳しく調べたくない場合を除き、Babel REPL の右側にあるトランスパイルされたコードに注意を払う必要はありません。 Babel REPL の左側では、コードを編集して作成して自分で試すことができます。

強調しておきますが、開発者ツールのコンソールにはコンソールログが表示される必要があります。そうでない場合は、左上の「評価」がチェックされていることを確認してください。

オートアクセサ

デコレーター仕様の重要な機能は自動アクセサーです。まず、それらが何であるか、そして自動アクセサーを使用するとデコレーターの作成がどのように簡単になるかを学びます。

Decorators の提案では、自動アクセサの概要がここに示されています。しかし、結局のところ、それは単純な機能です。基本的な動作例を見てみましょう: Babel REPL.

class MyClass {
  accessor myBoolean = false
}

ログイン後にコピー

このクラス定義では、アクセサーキーワードがプロパティ名の前に置かれます。ただし、このプロパティに関してはまだ実際には何も変わっていません。次に、自動アクセサーがデコレーターと組み合わせたときにどのように役立つかを見ていきます。

(静的アクセサー myBoolean = false など、自動アクセサーで static を使用することもできることに注意してください)

デコレータの作成

自動アクセサーを使用する理由をよりよく理解するために、いくつかのデコレーターを構築してみましょう。

シンプルなデコレータ

まず、構文を理解するために、自動アクセサーと実際にはあまり機能しないデコレーターを組み合わせます。

これは、内部変数を保持し、クラスのプロパティを通じてその変数を取得および設定できるようにする関数デコレーターです: Babel REPL

function simpleDecorator(value, context) {
  let internalValue = false
  return {
    get() {
      return internalValue
    },
    set(val) {
      internalValue = val
      return internalValue
    }
  }
}

class MyClass {
  @simpleDecorator
  accessor myBoolean
}

ログイン後にコピー

このデコレーターは、get() と set() の 2 つのメソッドを含むオブジェクトを返します。これは、自動アクセサーのデコレーターがプロパティのセッターとゲッターの両方を 1 つの場所で「装飾」またはラップする方法です。 simpleGetterDecorator と simpleSetterDecorator を作成する必要はありません。代わりに、自動アクセサーを使用してそれらを 1 つの定義に結合しました。これにより、より簡単になりました。

結局のところ、これは今のところかなり普通の関数のように見えます。これは入門として最適です!

デコレータを使用した検証

記事の残りの部分を準備するために、実際に何らかの検証を行うようにデコレーターを更新しましょう。偶数のみを設定し、それ以外は何も設定できないデコレーターを作成します。これは次のようになります: Babel REPL

function onlyEvenNumbers(value, context) {
  let internalNumber = 0
  return {
    get() {
      return internalNumber
    },
    set(val) {
      const num = Number(val)
      if(isNaN(num)) {
        // don't set the value if it's not a number or coerced to a number
        return internalNumber
      }
      if(num % 2 !== 0) {
        // don't allow odd numbers
        return internalNumber
      }
      internalNumber = val
      return internalNumber
    }
  }
}

class MyClass {
  @onlyEvenNumbers
  accessor myEvenNumber
}

ログイン後にコピー

そこで、set() メソッドにロジックを追加すると、クラスに myEvenNumber プロパティを設定しようとする人は誰でもその検証ロジックを通過するようになります。いいですね。

デコレータのオプション

これで、偶数のみの優れたデコレーターが完成しました。次に、必要な数値のタイプを構成するオプションを使用して、偶数と奇数の両方を処理できるようにしましょう!

幸いなことに、ここで書いているのはごく普通の JavaScript なので、このように動作するように設定するのはそれほど難しくありません。元のデコレータをオプションを受け取る関数でラップし、デコレータを返します。バベルREPL

function evensOrOdds(onlyEvens = true) {
  return function decorator(value, context) {
    let internalNumber = 0
    return {
      get() {
        return internalNumber
      },
      set(val) {
        const num = Number(val)
        if(isNaN(num)) {
            // don't set the value if it's not a number
            return internalNumber
        }
        if(num % 2 !== (onlyEvens ? 0 : 1)) {
            return internalNumber
        }
        internalNumber = val
        return internalNumber
      }
    }
  }
}

class MyClass {
  @evensOrOdds(true)
  accessor myEvenNumber

  @evensOrOdds(false)
  accessor myOddNumber
}

ログイン後にコピー

これで、デコレーターが任意のオプションを受け入れるように構成されました。これにより、デコレーターのユーザーがその動作をカスタマイズできるようになります。やったー