Decorator の概要と関連チュートリアル-PHPチュートリアル-php.cn

Decorator の概要と関連チュートリアル

小云云

リリース： 2023-03-17 18:56:01

オリジナル

1480 人が閲覧しました

Decorator の概要

Decorator は、式に注釈を付けることでクラスまたはメソッドを拡張できる関数です。デコレータは任意のクラスまたはプロパティに適用できます。例:

@myDecorator class A {} // 作用class

@myDecorator
doSomething() {}  // 作用表达式

ログイン後にコピー

Javascript Decorator はまだ ES7 提案ステータスにあり、この機能の詳細な進捗状況については、proposal-decorators にアクセスしてご覧ください。

デコレーターの原則

オブジェクトのプロパティやメソッドを変更する場合、誰もが間違いなく Object.defineProperty(obj, prop, descriptor) メソッドを思い浮かべるでしょう。このメソッドを使用すると、動作や動作を簡単に変更または書き換えることができます。 Vue で説明されている双方向バインディングは、set メソッドと get メソッドをオーバーライドすることで実現されます。したがって、Decorator を正式に使用する前に、Object.defineProperty メソッドを使用してそれを実現します。まず、このメソッドを簡単に理解しましょう:

/**

obj: 属性を変更する必要があるオブジェクト
prop: 変更する必要があるオブジェクトの属性名
descriptor: 属性の特定の動作を定義するために使用される説明オブジェクト
**/
Object.defineProperty(obj, prop, descriptor)

descriptor プロパティの説明

configurable: プロパティオブジェクトを構成できるかどうかを定義します。つまり、 false の場合、変更を定義する記述操作 (writeable、get など) は無効です
enumerable: for-in または Object.keys 列挙を介してトラバースできるかどうか
value: オブジェクトの value 属性を定義します。値には、数値、オブジェクト、関数などを指定できます。
writable: 値を上書きできるかどうかを定義します。
get: value 属性にアクセスするときにトリガーされる関数オブジェクト
set: a value 属性を設定するときにトリガーされる関数オブジェクト

プロパティを readonly に変更します

Object.defineProperty の基本構文を理解した後、まずそれを介して readonly インスタンスを単純に実装しました。具体的なコードは次のとおりです:

Decorator の基本構文と使用法

``javascript
# 定义
function myDecoration(target, name, descriptor) {}

# 对property使用
 class A {
 @myDecorator
 test() {}
 }

 # 对class使用
 @myDecorator
 class A {}

 # 带参数
 function myDescorator(a) {
 return function (target, name, descriptor) {
 console.llog('params:', a)
 }
 }
 @myDescorator(a) 
 class A {}

 # 时使用多个装饰器（Decorator)
 @myDecorator1
 @myDecorator2
 class A {}

ログイン後にコピー

Decorator 構文シュガーを使用してプロパティを読み取り専用 (読み取り専用) に変更します

Decorator を使用して PureRender for React コンポーネントをカプセル化します

React ライフサイクル shouldComponentUpdate メソッドがあります。このメソッドは、コンポーネントが true または false を返すことによってコンポーネントを再レンダリングするかどうかを決定します。言い換えれば、この方法を通じて一部の無効なデータレンダリングイベントを除外できるため、パフォーマンスが向上します。たとえば、props によって渡されたデータオブジェクトを比較します。props オブジェクトの属性と値が変更されていない場合は、render メソッドを実行する必要はありません。

明らかに、props の下のデータオブジェクトのプロパティと値が変更されたかどうかを比較することで、各コンポーネントで個別に shouldComponentUpdate メソッドを繰り返し記述する代わりに、このロジックを再利用できます。コンポーネントオブジェクトのメソッドの動作の変更について言えば、ここでは明らかに

Decorator 機能を使用してこれを行うことができます。つまり、Decorator オブジェクトの shouldComponentUpdate をオーバーライドします。 props オブジェクトのプロパティと値を調べて、古い props のプロパティと値と比較することにより、再レンダリングが必要かどうかが判断されます。具体的なコードは次のとおりです。

function isEqual(a, b) {
  for (const key in a) {
    if ({}.hasOwnProperty.call(a, key) &&
      (!{}.hasOwnProperty.call(b, key) || a[key] !== b[key])) {
      return false;
    }
  }
  for (const key in b) {
    if ({}.hasOwnProperty.call(b, key) && !{}.hasOwnProperty.call(a, key)) {
      return false;
    }
  }
  return true;
}

export default function pureRender(targetComponent) {
  targetComponent.prototype.shouldComponentUpdate = function (props, state) {
    return !isEqual(this.state, state) || !isEqual(this.props, props)
  }
}

// 使用
@pureRender
class ComponentA extends React.Component {}

ログイン後にコピー

Babel を介して Decorator を使用する

Decorator は ES7 のドラフトであるため、Bable を介して使用する必要があります。使用方法は次のとおりです。

インストール

npm install --save-dev babel-plugin-transform-decorators

Use

方法1、.babelrc

{
  "plugins": ["transform-decorators"]
}

ログイン後にコピー

方法2を設定することで、 CLI

babel --pluginstransform-decorators script.js

方法 3. ノード API を通じて

require("babel-core").transform("code", {
  plugins: ["transform-decorators"]
});

ログイン後にコピー

概要

Decorator を使用すると、追加のロジックをオブジェクトまたはメソッドに直接記述する必要がなく、次のことができます。オブジェクトやメソッドを簡単に拡張できるため、機能要件を満たすだけでなく、コードが簡素化され、すでに一般的な @log、@test、@mixin およびその他のツールクラスなどのコードの保守性が確保されます。したがって、今後の作業でさらに試すことができます。