ホームページ  >  記事  >  ウェブフロントエンド  >  AOP の JavaScript 実装例

AOP の JavaScript 実装例

小云云
小云云オリジナル
2017-12-20 09:20:481943ブラウズ

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) の方法では、同僚の元の関数は変更されていません。今度は同僚の関数 (現在の温度を出力) を変更するだけです。

関連する推奨事項:


Spring で AOP を実装する方法のアノテーションの例

AOP を使用する理由

Javascript での AOP プログラミングについて話しましょう

以上がAOP の JavaScript 実装例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。