js シンプルで粗雑なパブリッシュとサブスクライブのサンプルコード

js シンプルで粗雑なパブリッシュとサブスクライブのサンプルコード

パブリッシュ/サブスクライブとは何ですか?

例を挙げてみましょう。あなたは服を買うために店に行きます。あなたと店長はお互いを知りません。店長は自分の服を売るだけで、誰が買うかは気にしません。あなたは欲しい服を買うだけで、どの店が売っているかは気にしません。この時点で、店とあなたはパブリッシュ/サブスクライブの関係を形成します。

店に服のスタイルが並べられたら、欲しい服を探しに行きます。見つかったら買います。見つからなければ、店を出ます。プロセス全体はそれほど簡単です。

使用シナリオ

非同期通信、複数のページ間の通信、ページAのメソッドはページBのメソッドが呼び出されたときに特定の時間にトリガーされる必要がある

コードに直接

クラス Publish {
 コンストラクタ() {
  このリストマップは {} です。
 }
	// サブスクライブ on(key, fn) {
  this.listMap[キー]
   ? this.listMap[キー].push(fn)
   : this.listMap[キー] = [fn];
   
		// サブスクリプションの添字を保存します fn const index = this.listMap[key].length - 1;
  
		// 購読解除関数を返す
  return () => this.clear(key, index);
 }
 
	// このキーへのすべてのサブスクリプションをキャンセルします off(key) {
  this.listMap[キー]を削除します。
 }
 
	// キーで指定されたサブスクリプションをキャンセルする clear(key, index) {
  インデックス === this.listMap[キー].長さ - 1
   ? this.listMap[キー].pop()
   : this.listMap[キー][インデックス] = null;
 }
 
	//一度購読し、トリガー後に自動的に購読を解除する once(key, fn) {
  this.on(キー、(...残り) => {
   fn(...残り);
   this.off(キー);
  });
 }

	// キーを公開
 トリガー(キー、...残り) {
 	if(this.listMapのキー) {
	 	this.listMap[キー].forEach(fn => {
	   fn(...残り);
	  });
 	}
 }
}

使い方

ob = new Publish();

//サブ1を購読する
定数sub1 = ob.on('sub1', (a, b) => {
 コンソールにログ出力します。
});

//サブ1を購読する
定数sub11 = ob.on('sub1', (a, b) => {
 コンソールにログ出力します。
});

ob.trigger('sub1', 2, 3);

// サブ1 から登録解除
サブ1();

// サブ11 から登録解除
サブ11();

//sub3 を購読する
ob.on('sub3', (a, b) => {
 コンソールにログ出力します。
});

//sub3 を購読する
ob.on('sub3', (a, b) => {
 コンソールにログ出力します。
});

ob.trigger('sub3', 6, 7);

// すべてのサブ3から登録解除
ob.off('sub3');

// 一度購読し、自動的に購読解除する ob.once('sub4', (a, b) => {
 コンソールにログ出力します。
});

ob.trigger('sub4', 8, 9);

要約する

js のシンプルで粗雑な公開と購読に関するこの記事はこれで終わりです。より関連性の高い js のシンプルな公開と購読のコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript デザイン パターン: オブザーバー パターン (パブリッシャー サブスクライバー パターン)
  • シンプルなサブスクライバーモードとパブリッシャーモードの完全な例の JS モード
  • JavaScript でのパブリッシュ/サブスクライブパターンの簡単な例
  • JavaScript イベント公開/購読モデルの原理と使用法の分析
  • JavaScript の実装とパブリッシュ/サブスクライブ モードの使用に関する詳細な説明
  • js パブリッシュ・サブスクライブモードの例の説明
  • js で実装されたサブスクリプション パブリッシャー モードの簡単な例
  • JavaScript デザインパターン オブザーバーモード(パブリッシュ アンド サブスクライブモード)の原理と実装方法の例
  • [JS マスターロード] デザインパターンシリーズコース - パブリッシャーとサブスクライバーの例 ショッピングカートのリファクタリング
  • js デザイン パターンにおけるプロキシ モードとサブスクリプション パブリッシング モードの詳細な例

<<:  Dockerのインストール方法とDockerの4つのネットワークモードの詳細説明

>>:  MySQL 5.7.10 インストール ドキュメント チュートリアル

推薦する

mysqlは、現在の時刻が開始時刻と終了時刻の間にあるかどうかを判断し、開始時刻と終了時刻が空であることが許可されます。

目次要件: 進行中のアクティビティ データを照会する次のSQLクエリは、上記の4つの要件を満たし、タ...

Dockerデータストレージの概要

この記事を読む前に、ボリューム、バインドマウント、tmpfs マウントの基本を理解しておいてください...

Vue はファジークエリを実装します - MySQL データベースデータ

目次1. 需要2. 実装3. 結果1. 需要入力ボックスにデータを入力し、入力結果に基づいてデータベ...

MySQLはbinlogを通じてデータを復元する

目次MySQL ログファイルバイナリログBinlogログがオンになっていますログ記録を有効にする方法...

Baotaパネルを再起動すると、「-ModuleNotFoundError: No module named 'geventwebsocket'」というメッセージが表示されます。

背景:サーバーがFlaskプロジェクトをデプロイし、python3をインストールしたため、再起動時に...

Zabbix WEB 監視実装プロセス図

Zabbix独自のWEBインターフェースを例に、Web監視の設定を行います。環境: zabbix4....

CSS 3D からソースコードによる空間座標軸へ

かつて、サイコロを振るゲームについて話しました。その時は、steps 属性 + スプライト画像を使用...

nginx における proxy_pass のさまざまな使用法の詳細な説明

目次プロキシ転送ルール最初のもの: 2番目のタイプ: 3番目のタイプ: 4番目のタイプ: 5番目:プ...

CentOS 6.2 に MySQL 5.7.28 をインストールするチュートリアル (mysql ノート)

1. 環境整備1.MySQLインストールパス: /usr/local 2. CentOS 6.2 ...

VMware 仮想マシンに Android x86 をインストールする方法

アプリをテストしたいが、それを携帯電話で実行したくない場合があります。この場合、仮想マシンを使用して...

MySQL で単一のフィールド内の複数の値を分割および結合する方法

複数の値を組み合わせて表示これで、図1から図2に示す要件が揃いました。 どうやってやるんですか?次の...

Windows 10 での MySQL 5.7.21 インストーラのインストール グラフィック チュートリアル

MySQLをインストールしてメモしておきます。うまくインストールできるか分かりませんが、試してみます...

Docker ベースの nginx ファイル サーバーを構築する方法と手順

1. このマシンに新しい設定ファイルdocker_nginx.confを作成します。 サーバー{ 7...

CSS設定div背景画像実装コード

コンポーネントに背景画像コントロールを追加するには、次の 2 つの手順だけが必要です。 <表示...

CentOS 7.2 は uniapp プロジェクトを展開するための nginx Web サーバーを構築します

Pantherは新人としてスタートし、今もまだ新人ですが、人々から学び、学んだことを時々皆さんと共有...