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

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

イベントオブザーバー

このモードの高度なビューは次のとおりです。 オブザーバーモードで詳しく説明した後、それを使用する?yún)g語カウント機(jī)能を追加します。 Word Countコンポーネントは、このオブザーバーを使用し、すべてを一緒に統(tǒng)合します。初期化するには、次のことを?qū)g行します

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

<code>EventObserver
│ 
├── subscribe: 添加新的可觀察事件
│ 
├── unsubscribe: 移除可觀察事件
│
└── broadcast: 使用綁定數(shù)據(jù)執(zhí)行所有事件</code>

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

class EventObserver {
  constructor() {
    this.observers = [];
  }
}

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

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

<code>EventObserver
│ 
├── subscribe: 添加新的可觀察事件
│ 
├── unsubscribe: 移除可觀察事件
│
└── broadcast: 使用綁定數(shù)據(jù)執(zhí)行所有事件</code>

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

登録解除方法

イベントを削除するには、次のことを?qū)g行します

リストのコールバック関數(shù)に一致するすべてのものをすべて除外します。一致しない場合、コールバックはリストに殘ります。フィルターは新しいリストを返し、オブザーバーリストを再割り當(dāng)てします。この良い方法をテストするには、次のことを行います

class EventObserver {
  constructor() {
    this.observers = [];
  }
}

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

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

subscribe(fn) {
  this.observers.push(fn);
}

ブロードキャスト方法unsubscribe

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

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

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

メソッド：

// Arrange
const observer = new EventObserver();
const fn = () => {};

// Act
observer.subscribe(fn);

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

変數(shù)の値を変更できるようにするために、

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

unsubscribe(fn) {
  this.observers = this.observers.filter((subscriber) => subscriber !== fn);
}

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

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

<code>EventObserver
│ 
├── subscribe: 添加新的可觀察事件
│ 
├── unsubscribe: 移除可觀察事件
│
└── broadcast: 使用綁定數(shù)據(jù)執(zhí)行所有事件</code>

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

class EventObserver {
  constructor() {
    this.observers = [];
  }
}

次のJavaScriptがあります

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

subscribe(fn) {
  this.observers.push(fn);
}

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

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

楽しみにしています

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

別のコンポーネントは、段落の數(shù)を計(jì)算します

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

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

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

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

以上がJavaScriptの設(shè)計(jì)パターン：オブザーバーパターンの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。