Javascript デザインパターン プロトタイプ モードの詳細

Javascript デザインパターン プロトタイプ モードの詳細

1. プロトタイプモード

プロトタイプ パターンは、オブジェクトの作成時にオブジェクト プロトタイプのプロパティとメソッドを共有することで、パフォーマンスを向上させ、メモリ使用量を削減し、コードを再利用するために使用されます。

例1

関数 Person(名前) {
  this.name = 名前;

  この.config = {
    a: "1",
    b: "2",
  };

  this.hello = 関数(){
    console.info("こんにちは");
  };
}

上記のコードを使用して 100 個のインスタンスを作成する必要がある場合は、 100 個のconfigと 100 個のhelloを作成する必要がありますが、これら 2 つは各インスタンスでまったく同じです。

そのため、共通コードを抽出することでオイルの最適化を行うことができます。

定数設定 = {
  a: "1",
  b: "2",
};
const hello = 関数() {
  console.info("こんにちは");
};
関数 Person(名前) {
  this.name = 名前;

  this.config = 設定;

  this.hello = こんにちは
}

この方法では、Person オブジェクトがいくつ作成されても、1 つのconfigと 1 つのhelloのみを作成する必要があります。 しかし、グローバル変数が汚染されたり、誤ってconfigが変更されたり、 Person他のコードと高度に結合したり、コードの拡張やメンテナンスが困難になったりするなどの問題がまだ残っています。

したがって、プロトタイピングを通じて最適化を行うことができます。

関数 Person() {}
var p = new Person();


インスタンスを作成するときのこの関数のプロトタイプ図は次のとおりです。

例2

関数 Person(名前) {
  this.name = 名前;

  この.config = {
    a: "1",
    b: "2",
  };

  this.hello = 関数(){
    console.info("こんにちは");
  };
}

// このメソッドはプロトタイプを書き換え、コンストラクターが失われて Object() になります。
//Person.prototype.xx=yy を使って記述するか、Person.prototype.constructor=Person を再指定することができます。
Person.プロトタイプ = {
  バージョン: 1.0,
  言う: 関数 (arg) {
    console.info(`${this.name} は ${arg} と言います`);
  },
  コンストラクタ: Person,
};
var p1 = 新しい Person("p1");
var p2 = 新しい Person("p2");

console.info(p1.config == p2.config); // 偽
console.info(p1.hello == p2.hello); // 偽
console.info(p1.say === p2.say); //true
p1.say("qq");
p2.say("qq");
console.info(p1.version === p2.version); //true
コンソール.info(p1.バージョン);

インスタンスを作成するときのこの関数のプロトタイプ図は次のとおりです。

例3

関数 Person(名前) {
  this.name = 名前;

  この.config = {
    a: "1",
    b: "2",
  };

  this.hello = 関数(){
    console.info("こんにちは");
  };
}

//このメソッドはプロトタイプを書き換え、コンストラクタが失われて Object() になります
Person.プロトタイプ = {
  バージョン: 1.0,
  言う: 関数 (arg) {
    console.info(`${this.name} は ${arg} と言います`);
  },
};

関数 PersonA(名前) {
  Person.call(これ、名前);
}
PersonA のプロトタイプ = Person.プロトタイプ;

関数 PersonB(名前) {
  Person.call(これ、名前);
}
PersonB のプロトタイプ = Person.プロトタイプ;
var pA = new PersonA("pa");
var pB = new PersonB("pb");

console.info(pA.config == pB.config); // 内部プロパティの比較が誤っています console.info(pA.hello == pB.hello); // 内部プロパティの比較が誤っています console.info(pA.say === pB.say); // プロトタイプ メソッドの共有が誤っています pA.say("qq");
pB.say("qq");
console.info(pA.version === pB.version); // 真のプロトタイププロパティの共有 console.info(pA.version); // 1.0
Person.prototype.version = 2.0; //プロトタイプの共有プロパティを変更する console.info(pB.version); //2.0
console.info(新しいPerson().バージョン); //2.0

//プロトタイプ共有メソッドを変更する PersonB.prototype.say = function (arg) {
  console.info(`v2--- ${this.name} は ${arg} と言います`);
};
pB.say("qq");
新しい Person("Person").say("ww");

要約:

js はメモリを多く消費し、オブジェクトの作成に時間がかかります。内部属性の作成を減らすことで、メモリ使用量を削減できます。

プロトタイプ モードでは、 javascript言語のプロトタイプ機能を使用して同じプロパティを共有し、メモリ使用量を削減してオブジェクト作成の効率を向上させます。

2. オブザーバーパターン

オブザーバー パターンは、イベント サブスクリプションとイベント パブリッシングの統一されたパターンを提供することで、モジュールとコンポーネント間の通信に使用されます。これにより、モジュールとコンポーネント間の分離が実現され、コードの保守性が向上します。

モジュールとコンポーネント間の通信方法

モジュールとコンポーネント間で直接参照通信が使用される

定数モジュールA = {
  言う: 関数 (メッセージ) {
    console.info("A は " + msg と言います);
  },

  letBrun: 関数() {
    //モジュールBを直接参照
    モジュールBを実行します。
  },
};

定数モジュールB = {
  実行: 関数 () {
    console.info("B 実行 ");
  },

  letAsay: 関数() {
    // moduleAを直接参照する
    moduleA.say("hello");
  },
};

moduleA.letBrun(); //B 実行
moduleB.letAsay(); //Aが挨拶する

親コンポーネント通信はモジュールとコンポーネント間で使用されます

定数モジュールA = {
  言う: 関数 (メッセージ) {
    console.info("A は " + msg と言います);
  },
};

定数モジュールB = {
  実行: 関数 () {
    console.info("B 実行 ");
  },
};

const 親モジュール = {
  モジュールA、
  モジュールB、

  letBrun: 関数() {
    this.moduleB.run();
  },

  letAsay: 関数() {
    this.moduleA.say("hello");
  },
};

parentModule.letBrun(); //B 実行
parentModule.letAsay(); //A がこんにちはと言う

イベントモジュールが通信を実現

関数エミッター() {
  イベントを次のように記述します。
  this.res_oldアクション = {}
  this.res_action_events = {}
}

//リソースをサブスクライブEmitter.prototype.subscribe = function (res, action, fn) {
  if(!this.res_oldAction[res.name]){
 this.res_oldAction[res.name] = res[アクション]
 res[アクション] = (データ) => {
      this.res_oldAction[res.name](データ)
   const fns = this.res_action_events[res.name].action;
      (i = 0 とします; i < fns.length; i++) {
        fns[i](データ);
      }
    }
  }
  
  if(!this.res_action_events[res.name]){
 this.res_action_events[res.name] = {}
  }
  
  if(!this.res_action_events[res.name][action]){
 this.res_action_events[res.name][アクション] = []
  }
  
  this.res_action_events[res.name].action.push(fn)
}

//購読解除 resourcesEmitter.prototype.unsubscribe = function (res, action, fn) {
  const fns = this.res_action_events[res.name].action;
  (i = 0 とします; i < fns.length; i++) {
 もし(fns[i] === fn) {
   fns.splice(i, 1);
   私 - ;
 }
  }
}

Emitter.prototype.on = 関数 (名前、関数) {
  if (!this.events[名前]) {
    this.events[名前] = [];
  }

  this.events[名前].push(fn);
};

Emitter.prototype.remove = 関数 (名前、関数) {
  if (!this.events[名前]) {
    戻る;
  }

  const fns = this.events[名前];

  (i = 0 とします; i < fns.length; i++) {
    もし(fns[i] === fn) {
      fns.splice(i, 1);
      私 - ;
    }
  }
};

Emitter.prototype.fire = 関数 (名前、データ) {
  if (!this.events[名前]) {
    戻る;
  }

  const fns = this.events[名前];

  (i = 0 とします; i < fns.length; i++) {
    fns[i](データ);
  }
};

const エミッター = 新しい Emitter();

//モジュールAにイベントを登録する const methodA = (data) => {
  console.info("モジュールAが食品メッセージを受信しました:");
  console.info(データ);
};

エミッターをオン("食べ物", メソッドA);

//モジュールBにイベントを登録する const methodB = (data) => {
  console.info("モジュール B は food メッセージを受信します:");
  console.info(データ);
};
エミッターをオン("食べ物", メソッドB);

//モジュール C でイベントをトリガーする emitting diode.fire("food", "Rice is coming");

//モジュール B からイベントを削除します。emitter.remove("food", methodB);

//モジュール C でイベントを再度トリガーします。emitter.fire("food", "Rice is here again");

実行結果は次のとおりです。

モジュール A は食品メッセージを受信します。

食事が来ました

モジュール B は食品メッセージを受信します。

食事が来ました

モジュール A は食品メッセージを受信します。

食事がまた来る

要約:

一般的に、js コンポーネント モジュールが通信する方法は 3 つあります (直接通信、親コンポーネントを介した通信、イベント モジュールを介した通信)。オブザーバー パターンは、モジュールとコンポーネント間の通信に使用されます。イベント サブスクリプションとイベント パブリッシュの統一されたパターンを提供することで、モジュールとコンポーネントを分離し、コードの保守性を向上させます。

これで、Javascript デザイン パターンのプロトタイプ パターンに関する詳細な記事は終了です。Javascript プロトタイプ パターンに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScriptプロトタイプと例の詳細な説明
  • JavaScript プロトタイプチェーンを理解するための 2 つの図
  • JavaScript プロトタイプの詳細
  • JavaScriptプロトタイプチェーンの詳細な説明
  • JavaScript プロトタイプとプロトタイプチェーンの詳細
  • JavaScript プロトタイプとは何かご存知ですか?

<<:  Docker Hubの動作原理と実装プロセスの分析

>>:  Navicat Premium が MySQL 8.0 に接続してエラー「1251」を報告する問題を解決する方法の分析

推薦する

NginxはGzipアルゴリズムを使用してメッセージを圧縮します

HTTP圧縮とは場合によっては、比較的大きなメッセージ データがクライアントとサーバー間で送信され、...

チェックボックスの選択またはキャンセルを実装するJavaScript

この記事では、すべてのチェックボックスを選択または解除するためのJavaScriptの具体的なコード...

WMLタグの概要

構造関連タグ--------------------------------------------...

フロントエンド開発一般マニュアル(ツール、Webサイト、経験などを含む)

今日は何もすることがなかったので、いくつかのツール(オンラインとクライアント)、よく使用する URL...

角度付き双方向バインディングの詳細な説明

目次双方向バインディングの原理ngモデルレンダリングカスタム双方向バインディングプロパティコンポーネ...

回転灯効果を実現するWeChatアプレットの例

序文日常の開発では、テキストの水平スクロール効果(一般にカルーセルと呼ばれる)によく遭遇します。これ...

スライドドアを実装するための CSS サンプルコード

いわゆるスライディングドアテクノロジーとは、さまざまな長さのテキストに合わせてボックスの背景を自動的...

MySQLの通常インデックスとユニークインデックスの違いの詳しい説明

目次1 概念上の区別2 事例紹介3 クエリパフォーマンス4 アップデートのパフォーマンス4.1 記憶...

proxy_pass を設定した後に Nginx が 404 を返す問題を解決する

目次1. proxy_pass を設定した後に Nginx が 404 を返す問題のトラブルシューテ...

MySQLストレージエンジンについて学びましょう

目次序文1. MySQL メインストレージエンジン: 2. さまざまなストレージエンジンがテーブルを...

MySQLファイルストレージの詳細な説明

ファイルシステムとは何かInnoDB や MyIASM などのストレージ エンジンはテーブルをディス...

Linux (Ubuntu) での MySQL 5.7.17 のインストールと設定のチュートリアル

序文以前、MySQL 5.6 をインストールしました。3 か月後、開発者から MySQL で JSO...

検証コード干渉を実装する js (動的)

この記事の例では、検証コードの動的干渉を実装するためのjsの具体的なコードを共有しています。具体的な...

更新とデータ整合性処理のためのMySQLトランザクション選択の説明

MySQL のトランザクションはデフォルトで自動的にコミットされます (autocommit = 1...

div+cssとウェブ標準ページの利点

div 要素は、HTML ドキュメント内のブロックレベル コンテンツの構造と背景を提供するために使用...