ホームページ > 記事 > ウェブフロントエンド > AOP の JavaScript 実装例
AOP (アスペクト指向プログラミング) の主な機能は、コア ビジネス ロジック モジュールと関係のないいくつかの機能を抽出することです。これらのビジネス ロジックと関係のない機能には、通常、ログ統計、セキュリティ制御、例外処理、等これらの機能を抽出した後、「ダイナミック ウィービング」を通じてビジネス ロジック モジュールに組み込みます。この記事では、JavaScript で AOP を実装する方法 (アスペクト指向プログラミング、デコレータ パターン) を紹介します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。
AOP は私たちにどのようなメリットをもたらしますか?
AOP の利点は、第一に、ビジネス ロジック モジュールを純粋で高度に結合した状態に保つことができること、第二に、ログ統計などの機能モジュールを簡単に再利用できることです。
JavaScript で AOP を実装するというアイデアは?
通常、JavaScript で AOP を実装することは、関数を別の関数に「動的に織り込む」ことを意味します。以下では、これを行うために拡張された Function.prototype を使用します。以下のコードを見てください:
Function.prototype.before = function (beforefn) { var _self = this; //保存原函数引用 return function () { //返回包含了原函数和新函数的"代理函数" beforefn.apply(this, arguments); //执行新函数,修正this return _self.apply(this, arguments); //执行原函数 } }; Function.prototype.after = function (afterfn) { var _self = this; return function () { var ret = _self.apply(this, arguments); afterfn.apply(this, arguments); return ret; } }; var func = function () { console.log("2") } func = func.before(function () { console.log("1"); }).after(function () { console.log("3"); } ) func();
実行結果は次のとおりです:
数値 1 と数値 3 を出力する 2 つの関数を、AOP を通じて func 関数に動的に埋め込みます。上記のコードを実行すると、コンソールが実行結果 1、2、および 3 を正常に返していることがわかります。
AOP を使用して関数に責任を追加するこの方法も、JavaScript 言語のデコレーター パターンの非常に特殊で賢い実装です。次のコードを参照してください。 result:
document.getElementById() にいくつかの装飾を加えました。今後は、このメソッドを呼び出す前に、alert("1") ステートメントを実行することになりますが、このステートメントに注意してください。は document.getElementById() メソッドのソース コードには記述されませんが、その外側に装飾されるだけです。これの利点は、元のメソッドのソース コードを変更せずに新しいものを追加できることです。国際的な実践例:
私の同僚は現在時刻を出力できる関数を書きました。私の現在のニーズは、現在の天気を出力し、次に現在時刻を出力することです。 2 つの解決策があります:
(1) 従来の解決方法:同僚の関数を持ち込んで、時刻を出力するコードを見つけて、現在の天気を出力するコードをこれらのコードの前に追加します
(2) デコレーター パターンの解決策: 同僚の関数を持ち込んで、ソース コードを見ずに、そのまま渡します。この関数は Decorate 関数であり、その装飾は現在の天気を出力するコードです。
どちらの方法も問題を解決しますが、出発点はまったく異なります:
(1) 方法は元の関数の内部を変換するもので、ソース コードを理解してから変更を加える必要があります。
(2)の方法は元の関数にコートのレイヤーを追加するもので、元の関数の内部実装については全く気にする必要がありません。
今度は新しい要件があります。現在時刻を出力する前に、まず現在の温度
(1) メソッドを出力します。最初の要件では、同僚のコードが認識できないほど変更されており、再実行する必要があります。関数の内部を理解して、それを修正します(現在の天気を出力するコードを削除し、次に現在の気温を出力するコードを追加します)。
(2) の方法では、同僚の元の関数は変更されていません。今度は同僚の関数 (現在の温度を出力) を変更するだけです。
関連する推奨事項:
以上がAOP の JavaScript 実装例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。