object.observeの紹介

キーテイクアウト

O.Oとも呼ばれる
• object.observeは、ブラウザでオブジェクト変更検出をサポートするために、ECMAScript 7の一部としてJavaScriptに追加する機能です。それは、その周りにラッパーを作成せずにオブジェクトで直接動作し、パフォーマンスに使いやすく、有益です。
観察（）メソッドは、オブジェクトの変更を探すために使用できるオブジェクト上で定義された非同期静的メソッドです。 3つのパラメーターを受け入れます。観察されるオブジェクト、変更が検出されたときに呼び出されるコールバック関数、および監視される変更の種類を含むオプションの配列を受け入れます。
• 観測配列はオブジェクトの観察に似ており、唯一の違いは、オブジェクトの代わりにarray.observeを使用してオブザーバー関数を登録する必要があることです。 オブジェクトまたは配列の登録されたオブザーバーは、それぞれobject.unobserve（）または、array.unobserve（）を使用して削除できます。この方法は、削除するオブジェクトまたは配列とコールバックの2つのパラメーターを受け入れます。
• 双方向のデータバインディングは、クライアント側アプリケーションの重要な機能の1つになりました。データバインディングがなければ、開発者はモデルに変更があるときはいつでも、多くのロジックに対処してデータにデータに手動で結合する必要があります。ノックアウト、Angularjs、EmberなどのJavaScriptライブラリは双方向の結合をサポートしていますが、これらのライブラリは、変更を検出するために異なる手法を使用しています。
ノックアウトとエンバーは観測可能性を使用します。オブザーバブルは、モデルオブジェクトのプロパティにラップされた関数です。これらの関数は、対応するオブジェクトまたはプロパティの値が変更されるたびに呼び出されます。このアプローチはうまく機能し、すべての変更を検出して通知しますが、機能に対処する必要があるため、プレーンJavaScriptオブジェクトを使用する自由を取り除きます。
• Angularは、変更を検出するために汚いチェックを使用します。このアプローチはモデルオブジェクトを汚染しません。モデルに追加されたすべてのオブジェクトに対してウォッチャーを登録します。これらのウォッチャーはすべて、Angularのダイジェストサイクルが始まるたびに実行され、データに変更がある場合はいつでも実行されます。これらの変更は、対応するウォッチャーによって処理されます。モデルは、ラッパーがその周りに作成されていないため、まだ単純なオブジェクトのままです。しかし、この手法は、ウォッチャーの数が増えるにつれてパフォーマンスの低下を引き起こします。
object.observe？

とは何ですか

object.observe、a.k.a。o.oは、ブラウザでオブジェクト変更検出をサポートするために、ecmascript 7の一部としてJavaScriptに追加する機能です。 ES7はまだ完了していませんが、この機能はBlinkベースのブラウザ（ChromeおよびOpera）ですでにサポートされています。

object.observeはブラウザによってネイティブにサポートされ、その周りにラッパーを作成せずにオブジェクト上で直接動作するため、APIは使いやすく、パフォーマンスに勝ちます。 Object.Observeがブラウザによってサポートされている場合、外部ライブラリを必要とせずに双方向のバインディングを実装できます。既存の双方向の結合ライブラリのすべてが、O.Oが実装されると無駄にならないという意味ではありません。 O.Oを使用して変更を検出した後、UISを効率的に更新する必要があります。さらに、ライブラリは、すべてのターゲットブラウザがO.O.

をサポートしていない場合でも、変更検出のロジックを内部的にポリフィルフィルします。 オブジェクトのプロパティの観察

O.Oが何に適しているのかを考えたので、それが動作しているのを見てみましょう。

観察（）メソッドは、オブジェクト上で定義された非同期静的メソッドです。オブジェクトの変更を探すために使用でき、3つのパラメーターを受け入れます。

観察されるオブジェクト
• 変更が検出されたときに呼び出されるコールバック関数
メソッドを使用する例を見てみましょう。次のスニペットを検討してください：

このコードでは、いくつかのデータを使用してリテラルオブジェクトを作成しました。また、オブジェクトの変更を記録するために使用するObserveCallback（）という名前の関数を定義しました。次に、O.Oを使用して、変更の観察を開始します。最後に、オブジェクトにいくつかの変更を実行しました

コンソールに出力が表示されている場合、3つの変更のすべてが検出されて記録されていることがわかります。次のスクリーンショットは、スニペットによって生成された結果を示しています：

<span>var person = {
</span>  <span>name: 'Ravi',
</span>  <span>country: 'India',
</span>  <span>gender: 'Male'
</span><span>};
</span>
<span>function observeCallback(changes){
</span>  <span>console.log(changes);
</span><span>};
</span>
<span>Object.observe(person, observeCallback);
</span>
person<span>.name = 'Rama';  // Updating value
</span>person<span>.occupation = 'writer';  // Adding a new property
</span><span>delete person.gender;  // Deleting a property</span>

o.oは非同期に実行され、すべての変更が発生し、呼び出されたときにコールバックに渡すことをグループ化します。したがって、ここでは、オブジェクトに適用された3つの変更に対して3つのエントリを受け取りました。ご覧のとおり、各エントリは、プロパティの名前の変更、古い値、変更のタイプ、および新しい値を持つオブジェクト自体で構成されています。

前のコードのライブデモを以下に報告します（結果を確認するためにコンソールを開くことを忘れないでください）：

CodepenのSitePoint（@SitePoint）のペンEMKVEBを参照してください

コードでは、検索する変更の種類を指定していなかったため、追加、更新、削除が観察されます。これは、次のように、観察方法の3番目のパラメーターを使用して制御できます。

<span>var person = {
</span>  <span>name: 'Ravi',
</span>  <span>country: 'India',
</span>  <span>gender: 'Male'
</span><span>};
</span>
<span>function observeCallback(changes){
</span>  <span>console.log(changes);
</span><span>};
</span>
<span>Object.observe(person, observeCallback);
</span>
person<span>.name = 'Rama';  // Updating value
</span>person<span>.occupation = 'writer';  // Adding a new property
</span><span>delete person.gender;  // Deleting a property</span>

通知の登録

Observe（）メソッドは、オブジェクトに追加された直接プロパティで行われた変更を検出できます。ゲッターとセッターを使用して作成されたプロパティの変更を検出することはできません。これらの特性の動作は著者によって制御されるため、変更検出も著者が所有する必要があります。この問題に対処するには、notifier（object.getNotifier（）を介して利用可能）を使用して、プロパティで行われた変更を通知する必要があります。

次のスニペットを検討してください：

<span>Object.observe(person, observeCallback, ['add', 'update']);</span>

トッドタイプは、2つの特性を持つコンストラクター機能です。それらに加えて、object.definePropertyを使用してブロックされたブロックが追加されます。この例では、このプロパティで定義されたセッターは簡単なものです。典型的なビジネスアプリケーションでは、いくつかの検証を実行し、検証が失敗した場合に値を設定しない場合があります。しかし、私は物事をシンプルにしたかったのです。

最後のメモとして、私たちの例では、更新がある場合にのみ通知が送信されることがわかります。
ブロックされたプロパティに加えられた変更は、Chrome開発者ツールで次の結果を生成します。

この例のライブデモを以下に報告します（結果を確認するためにコンソールを開くことを忘れないでください）：

CodepenのSitePoint（@SitePoint）によるPen NPZGOOを参照してください。

複数の変更を観察します

時々、2つ以上のプロパティが何らかの方法で変更された後に実行する計算がある場合があります。これらの両方の変更を通知者を使用して個別に通知することはできますが、両方の値が変更されていることを示すために、カスタムタイプ名で単一の通知を送信する方が良いでしょう。これは、notifier.performchange（）メソッドを使用して実行できます。この方法は、3つの引数を受け入れます

カスタムタイプの名前

名前

変更を実行するコールバック関数。この関数から返される値は、変更オブジェクトで使用されます

変更が適用されるオブジェクト

• 上記のクラスにdoned doned doneという名前の新しいプロパティを追加しましょう。このプロパティの値は、TODOアイテムが完了しているかどうかを指定します。完了した値がtrueに設定されている場合、プロパティの値を真に設定する必要があります。
次のスニペットはこのプロパティを定義しています：
• PerformChangeのコールバック内のロジックが実行されると、変更が渡されたカスタム変更タイプで変更が通知されます。このタイプは、object.observeではデフォルトでは観察されません。カスタムタイプの変更を観察するようにO.Oに明示的に依頼する必要があります。次のスニペットには、TODOオブジェクトの変更されたO.Oが表示され、追加および更新タイプとともにカスタムタイプの変更が観察されます。

  <span>var person = {
  </span>  <span>name: 'Ravi',
  </span>  <span>country: 'India',
  </span>  <span>gender: 'Male'
  </span><span>};
  </span>
  <span>function observeCallback(changes){
  </span>  <span>console.log(changes);
  </span><span>};
  </span>
  <span>Object.observe(person, observeCallback);
  </span>
  person<span>.name = 'Rama';  // Updating value
  </span>person<span>.occupation = 'writer';  // Adding a new property
  </span><span>delete person.gender;  // Deleting a property</span>

  上記のスニペットは、設定が行われる前に、ブロックされたtrueにブロックされた値を設定します。そのため、カスタム変更タイプの通知を送信します。次のスクリーンショットには、カスタムタイプで返される変更オブジェクトの詳細を示しています。

  この例のライブデモを以下に報告します（結果を確認するためにコンソールを開くことを忘れないでください）：

  CodepenのSitePoint（@SitePoint）のペンyyexgdを参照してください

  arraysの観察
  アレイの観測は、オブジェクトの観察に似ています。唯一の違いは、オブジェクトの代わりにarray.observeを使用してオブザーバー関数を登録する必要があることです。次のスニペットはこれを示しています：
  この例のライブデモを以下に報告します（結果を確認するためにコンソールを開くことを忘れないでください）：
  CodepenのSitePoint（@SitePoint）のペンgggezqを参照してください。

  <span>Object.observe(person, observeCallback, ['add', 'update']);</span>

  登録されたオブザーバーの削除

  オブジェクトまたは配列の登録されたオブザーバーは、それぞれobject.unobserve（）または、array.unobserve（）を使用して削除できます。このメソッドは、オブジェクトまたは配列の2つのパラメーターと、削除するコールバックを受け入れます。したがって、この方法を使用するには、コールバックの参照が必要です。
  結論
  O.Oがすべてのブラウザで完全にサポートされると、すべてのクライアントサイドライブラリで変更検出が標準化されます。 Aureliaはすでにそれを使用し始めました。Angular2のChange Detection Library、WatchTower.jsはO.Oを内部的に使用し、Emberは将来の変更検出にも使用します。 Angular 2とAureliaには、O.Oがネイティブに利用できない場合、フォールバックにポリーフィルが実装されています。

  クライアント側の双方向のバインディングに関する未来は、ブラウザにこの素晴らしい追加を行うことで、より明るくなります。他のブラウザがより早く追いつくのを楽しみにしています！

  <span>function <span>TodoType</span>() {
  </span>  <span>this.item = '';
  </span>  <span>this.maxTime = '';
  </span>  
    <span>var blocked = false;
  </span>  
    <span>Object.defineProperty(this, 'blocked', {
  </span>    <span>get:function(){
  </span>      <span>return blocked;
  </span>    <span>},
  </span>    <span>set: function(value){
  </span>      <span>Object.getNotifier(this).notify({
  </span>        <span>type: 'update',
  </span>        <span>name: 'blocked',
  </span>        <span>oldValue: blocked
  </span>      <span>});
  </span>      blocked <span>= value;
  </span>    <span>}
  </span>  <span>});
  </span><span>}
  </span>
  <span>var todo = new TodoType();
  </span>
  todo<span>.item = 'Get milk';
  </span>todo<span>.maxTime = '1PM';
  </span>
  <span>console.log(todo.blocked);
  </span>
  <span>Object.observe(todo, function(changes){
  </span>  <span>console.log(changes);
  </span><span>}, ['add', 'update']);
  </span>
  todo<span>.item = 'Go to office';
  </span>todo<span>.blocked = true;</span>

  object.observe

  に関するよくある質問（FAQ）

  Object.observeが廃止されたのはなぜですか。関数内で行われた変更を観察することができず、オブジェクトのプロトタイプに加えられた変更を追跡することもできませんでした。さらに、大きなオブジェクトの変更を追跡するために多くのリソースが必要だったため、パフォーマンスの点では非効率的であることがわかりました。非推奨は、プロキシや反射などのES6に新機能の導入に影響されました。これは、オブジェクトの変化を観察して対応するためのより効率的な方法を提供します。 ES6プロキシは、オブジェクト上の基本操作の動作をカスタマイズする方法を提供します。プロキシは、ターゲットオブジェクトとハンドラーオブジェクトの2つのパラメーターで作成されます。ハンドラーオブジェクトは、ターゲットオブジェクト上のさまざまな操作の「トラップ」を定義します。これらの操作が実行されると、ハンドラーの対応するトラップがトリガーされ、カスタム動作を実行できます。これにより、プロキシはオブジェクトの変化を観察して反応するための強力なツールになります。それらは、オブジェクトの変化を観察し、反応するためのより柔軟で強力な方法を提供します。プロキシを使用すると、プロパティの変更だけでなく、幅広い操作のカスタム動作を定義できます。また、プロキシは、特に大きなオブジェクトを扱う場合、object.observeよりも優れています。さらに、プロキシはES6標準の一部です。つまり、すべての最新のブラウザによってサポートされています。

  プロジェクトでObject.Observeを使用できますか？まだObject.observeを使用してください。プロジェクトでは、それは強く落胆しています。 object.observeは廃止され、JavaScript標準から削除されました。つまり、維持されなくなり、すべてのブラウザーによってサポートされていないことを意味します。非推奨機能を使用すると、プロジェクトの互換性の問題やその他の問題につながる可能性があります。 ES6プロキシなどの代替品やMobxやvue.jsなどのライブラリを使用することをお勧めします。JS。プロキシには、object.observeコールをプロキシオブジェクトに置き換えることが含まれます。オブジェクトのプロパティの変更を観察する代わりに、プロキシのハンドラーオブジェクトで観察する操作のトラップを定義します。これには、コードのリファクタリングが含まれる場合がありますが、オブジェクトの変化を観察するためのより柔軟で効率的な方法を提供します。ES6プロキシを使用することのパフォーマンスへの影響は何ですか？

  ES6プロキシは、特に大きなオブジェクトを扱う場合、一般にObject.Observeよりも効率的です。ただし、他の機能と同様に、慎重に使用する必要があります。アプリケーション内のすべてのオブジェクトのプロキシを作成すると、パフォーマンスの問題につながる可能性があります。必要に応じてプロキシを使用し、ハンドラーオブジェクトを可能な限り軽量に保つことが最善です。彼らにはいくつかの制限があります。たとえば、配列の長さ特性の変更を観察するために使用することはできません。また、プロキシは、オブジェクトのプロトタイプの変更を観察する方法を提供しません。ただし、これらの制限は、反射などのES6の他の機能を使用することでしばしば回避できます。 .jsは、オブジェクトの変化を観察するための独自のメカニズムを提供します。たとえば、MOBXは観察可能なプロパティと計算値を使用して変更を追跡し、VUE.JSはリアクティブデータモデルを使用します。これらのライブラリは、オブジェクトの観察のための高レベルのAPIを提供し、生のES6プロキシよりも使いやすくなります。 JavaScriptは、言語の継続的な進化とライブラリとフレームワークの開発によって形作られる可能性があります。 ES6プロキシや反射などの機能は、オブジェクトの変化を観察して反応するための強力なツールを提供し、MobxやVue.JSなどのライブラリがこれらのツールに基づいて、オブジェクト観測用の高レベルAPIを提供します。言語とエコシステムが進化し続けるにつれて、オブジェクトの変化を観察するためのより効率的で柔軟な方法が見られることが期待できます。

以上がobject.observeの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。