JavaScriptの設計パターン：オブザーバーパターン

javascriptオブザーバーパターンの重要なポイント

JavaScriptのオブザーバーパターンは、要素間の1対多くのデータバインドを可能にします。これは、同じデータと同期した複数の要素を保つのに特に役立ちます。
オブザーバーパターンには、3つの主要な方法が含まれています：
• （新しい観測可能なイベントを追加）、subscribe（バインドされたデータを使用してすべてのイベントを削除します）。 unsubscribe クラス、矢印関数、定数などのES6機能を使用すると、オブザーバーパターンを効果的に実装でき、コードをより簡単に再利用しやすくします。 broadcast
オブザーバーモードを使用して、各キーストロークのブログ投稿でワードカウントを更新するなど、JavaScriptの実用的な問題を解決することができ、新しい機能を構築するためにさらに強化できます。
• JavaScriptでは、多くの場合問題があります。特定のイベントに応じてページの一部を更新し、それらのイベントが提供するデータを使用する方法が必要です。たとえば、ユーザーは入力して、1つ以上のコンポーネントに投影します。これにより、コード内の多くのプッシュおよびプル操作がすべてを同期させます。これは、オブザーバーの設計パターンが役立つ場所です - 要素間の1対多くのデータバインディングを実装します。この一元配置データバインディングは、イベント駆動型にすることができます。このパターンを使用すると、特定のニーズに対応するために再利用可能なコードを構築できます。この記事では、オブザーバーのデザインパターンを探りたいと思います。クライアントスクリプトでよく遭遇する一般的な問題を解決するのに役立ちます。これは、1対多、一方向、イベント駆動型のバインディングです。この問題は、同期する必要がある多くの要素がある場合にしばしば発生します。 ECMAScript 6を使用して、このパターンを説明します。はい、クラス、矢印関数、定数があります。あなたがそれに慣れていないなら、あなたはこれらのトピックを自分で探求することができます。 ES6に構文砂糖を導入する部品のみを使用するため、必要に応じてES5で動作することもできます。このパターンを処理するために、テスト駆動型開発（TDD）を使用します。これにより、各コンポーネントがどのように使用されるかを知ることができます。 ES6の新しい言語機能により、コードがより簡潔になります。それでは、始めましょう。

イベントオブザーバー

このモードの高度なビューは次のとおりです。 オブザーバーモードで詳しく説明した後、それを使用する単語カウント機能を追加します。 Word Countコンポーネントは、このオブザーバーを使用し、すべてを一緒に統合します。初期化するには、次のことを実行します

観察イベントの空のリストから始めて、それぞれの新しいインスタンスがそれを行います。これからは、デザインパターンを完成させる方法を追加しましょう。

<code>EventObserver
│ 
├── subscribe: 添加新的可观察事件
│ 
├── unsubscribe: 移除可观察事件
│
└── broadcast: 使用绑定数据执行所有事件</code>

サブスクライブメソッドEventObserver

<code class="language-javascript">class EventObserver {
  constructor() {
    this.observers = [];
  }
}</code>

新しいイベントを追加するには、次のことを行います

EventObserver観察イベントのリストを取得し、新しいアイテムを配列に押し込みます。イベントリストはコールバック関数リストです。純粋なJavaScriptでこの方法をテストする1つの方法は次のとおりです。

<code>EventObserver
│ 
├── subscribe: 添加新的可观察事件
│ 
├── unsubscribe: 移除可观察事件
│
└── broadcast: 使用绑定数据执行所有事件</code>

ノードアサーションを使用して、このコンポーネントをノードでテストします。まったく同じアサーションがチャイの主張にも存在します。観察イベントリストは、単純なコールバックで構成されていることに注意してください。次に、リストの長さを確認し、コールバックがリストにあることを主張します。

登録解除方法

イベントを削除するには、次のことを実行します

リストのコールバック関数に一致するすべてのものをすべて除外します。一致しない場合、コールバックはリストに残ります。フィルターは新しいリストを返し、オブザーバーリストを再割り当てします。この良い方法をテストするには、次のことを行います

<code class="language-javascript">class EventObserver {
  constructor() {
    this.observers = [];
  }
}</code>

コールバックは、リストの同じ関数と一致する必要があります。一致が存在する場合、

メソッドはリストから削除します。テストでは関数参照を使用して追加および削除することに注意してください。

<code class="language-javascript">subscribe(fn) {
  this.observers.push(fn);
}</code>

ブロードキャスト方法unsubscribe

すべてのイベントを呼び出すには、次のことを行います

これにより、観察イベントのリストを繰り返し、すべてのコールバックを実行します。これにより、イベントを購読するために必要な1対多様な関係を得ることができます。 パラメーターを渡すことができます。これにより、コールバックデータバインディングが作成されます。 ES6は、矢印関数を使用してコードをより効率的にします。

関数はほとんどの作業を行うことに注意してください。このシングルライン矢印関数は、この短いES6構文から利益を得ます。これは、JavaScriptプログラミング言語の大幅な改善です。これをテストするには、

メソッド：

<code class="language-javascript">// Arrange
const observer = new EventObserver();
const fn = () => {};

// Act
observer.subscribe(fn);

// Assert
assert.strictEqual(observer.observers.length, 1);</code>

変数の値を変更できるようにするために、

の代わりにdataを使用します。これにより、可変変動が可能になり、コールバックでその値を再割り当てすることができます。コードで(subscriber) => subscriber(data)を使用して、ある時点で変数が変化していることを他のプログラマーに通知します。これにより、JavaScriptコードの読みやすさと明確さが向上します。このテストは、オブザーバーが期待どおりに機能することを確認するのに十分な自信を与えてくれます。 TDDを使用すると、純粋なJavaScriptに再利用可能なコードを構築することがすべてです。純粋なJavaScriptでテスト可能なコードを作成することには多くの利点があります。すべてをテストし、コードの再利用に有益なものを保持します。これにより、私たちはそれを完成させました。問題は、何を構築できるかということです。 broadcast

<code class="language-javascript">unsubscribe(fn) {
  this.observers = this.observers.filter((subscriber) => subscriber !== fn);
}</code>

オブザーバーモードの実用的なアプリケーション：ブログワードカウントデモンストレーション

let constデモについては、あなたのために単語数を維持するブログ投稿を作成する時が来ました。入力する各キーストロークは、オブザーバーのデザインパターンによって同期されます。それを無料のテキスト入力と考えてください。各イベントは、必要な場所への更新をトリガーします。無料のテキスト入力から単語数を取得するには、次のことを行うことができます。 let EventObserver完成！この一見シンプルな純粋な機能には多くのコンテンツがありますが、単純なユニットテストについてはどうですか？このようにして、私の意図は明確です：

<code>EventObserver
│ 
├── subscribe: 添加新的可观察事件
│ 
├── unsubscribe: 移除可观察事件
│
└── broadcast: 使用绑定数据执行所有事件</code>

blogPostのわずかに奇妙な入力文字列に注意してください。私の目標は、この機能をできるだけ多くのエッジケースにカバーすることです。正しい単語数を与える限り、私たちは正しい方向に進みます。ちなみに、これはTDDの本当の力です。この実装は反復し、できるだけ多くのユースケースをカバーできます。ユニットテストは、私がそれがどのように振る舞うと予想するかを教えてくれます。動作に欠陥がある場合、何らかの理由で繰り返して調整するのは簡単です。テストすることにより、他の人が変更を加えるのに十分な証拠を残してください。これらの再利用可能なコンポーネントをDOMに接続する時が来ました。これは、純粋なJavaScriptを取得し、ブラウザにはんだ付けする部分です。 1つの方法は、ページで次のHTMLを使用することです。

<code class="language-javascript">class EventObserver {
  constructor() {
    this.observers = [];
  }
}</code>

次のJavaScriptがあります

すべての再利用可能なコードを取得し、オブザーバー設計モードを設定します。これにより、テキスト領域の変更を追跡し、その下に単語数が表示されます。この新しい要素を追加するために、DOM APIで

<code class="language-javascript">subscribe(fn) {
  this.observers.push(fn);
}</code>

を使用しています。次に、イベントリスナーが添付されており、それを実現します。矢印関数を使用すると、単一のイベントを接続できることに注意してください。実際、それを使用して、すべてのサブスクライバーにイベント駆動型の変更をブロードキャストすることができます。

ほとんどの作業はここで行われました。テキスト領域への最新の変更をコールバック関数に直接渡します。はい、クライアントスクリプトはかなりクールです。タッチと調整できるデモはどれも完全ではありません。ここにCodepenがあります。（Codepenリンクはここに挿入する必要があります。これは、外部Webサイトにアクセスできないため提供できません） body.appendChild()さて、この機能を完全な機能とは呼びません。しかし、これはオブザーバーのデザインパターンの出発点に過ぎません。私の心の問題は、あなたはどこまで進んで行くのかということです。 () => blogObserver.broadcast()

楽しみにしています

このアイデアをさらに開発できます。オブザーバーデザインパターンを使用して、多くの新機能を構築できます。次の方法を使用してデモを強化できます。

別のコンポーネントは、段落の数を計算します

別のコンポーネントに入力テキストのプレビューが表示されます

• マークダウンサポート付きの拡張プレビュー
• これらはあなたが掘ることができるいくつかのアイデアです。上記の拡張機能は、プログラミング機能に挑戦します。
• 結論

オブザーバーの設計パターンは、JavaScriptの実際的な問題を解決するのに役立ちます。これにより、同じデータと同期して多数の要素を維持するという長期的な問題が解決します。通常、ブラウザが特定のイベントをトリガーするとき。あなたのほとんどは今この問題を抱えており、ツールとサードパーティの依存関係に目を向けたと思います。このデザインパターンを使用すると、可能な限り進むことができます。プログラミングでは、ソリューションをパターンに抽象化し、再利用可能なコードを作成します。これがあなたにもたらす利点は無限です。ちょっとした規律と努力で、純粋なJavaScriptでどれだけの仕事ができるかをあなたが見ることができることを願っています。 ES6などの言語の新機能は、簡潔で再利用可能なコードを書くのに役立ちます。

（JavaScriptオブザーバーパターンのFAQをここに含める必要がありますが、スペースの制限のため、省略されています。）

以上がJavaScriptの設計パターン：オブザーバーパターンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。