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 インスタンスを単純に実装しました。具体的なコードは次のとおりです:
``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 構文シュガーを使用してプロパティを読み取り専用 (読み取り専用) に変更します
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 {}
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 およびその他のツール クラスなどのコードの保守性が確保されます。したがって、今後の作業でさらに試すことができます。
Es7 JavaScript デコレータ
デコレータ仕様
EcmaScript デコレータの探索
Object.defineProperty
Babel Legacy Decorator プラグイン
core-decorators
上記の内容は Decorator と関連チュートリアルの紹介であり、皆様のお役に立てれば幸いです。
最初にお勧め:
以上がDecorator の概要と関連チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。