JavaScript で AOP を実装する方法

ここで、JavaScript で AOP を実装する方法 (アスペクト指向プログラミング、デコレータ パターン) を共有します。これは良い参考値であり、皆さんの役に立つことを願っています。

AOPとは何ですか?

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 言語のデコレーター パターンの非常に特殊で賢い実装でもあります。次のコードを参照してください。Function.prototype.before を試してみましょう。

実行結果:

今後は、このメソッドを呼び出す前に毎回alert("1")ステートメントを実行するようにdocument.getElementById()にいくつかの装飾を加えました。これの利点は、元のメソッドのソース コードを変更せずに実行できることです。彼はいくつかの新しい動作を追加します。国際的な実践例:

私の同僚は現在時刻を出力できる関数を書きました。私の現在のニーズは、現在の天気を出力し、次に現在時刻を出力することです。 2 つの解決策があります:

(1) 従来の解決方法:同僚の関数を持ち込んで、時刻を出力するコードを見つけて、現在の天気を出力するコードをこれらのコードの前に追加します

(2) デコレーター パターンの解決策: 同僚の関数を持ち込んで、ソース コードを見ずに、そのまま渡します。 to Decorate 彼の関数。装飾は現在の天気を出力するコードです。

どちらの方法も問題を解決しますが、出発点はまったく異なります:

(1) この方法は元の関数の内部を変換することであり、ソースコードを理解してから変更を加える必要があります。

(2)の方法は元の関数にコートのレイヤーを追加するもので、元の関数の内部実装については全く気にする必要がありません。

今度は新しい要件があります: 現在時刻を出力する前に、まず現在の温度を出力してください

(1) 方法、最初の要件では、同僚のコードを認識できないほど変更しました。関数の内部を再理解して修正する必要があります（現在の天気を出力するコードを削除し、次に現在の気温を出力するコードを追加します）。

(2) の方法では、同僚の元の関数は変更されていません。今度は同僚の関数 (現在の温度を出力) を変更するだけです。

上記は私があなたのためにまとめたものです。

関連記事:

JSを使った九九の書き方

Angular4でHTML属性バインディングを実装する方法

Nodejsを使ってmysqlに接続して基本的な操作を実装する

やり方vue のスキャフォールディングで Sass を構成する

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