JS でシンプルなデータ監視を実装する方法

JS でシンプルなデータ監視を実装する方法

概要

主に Object.defineProperty を使用して、vue と同様のデータ バインディングを実装します。

最初のステップ

定数データ = {
  名前: "トム",
  年齢: 14
}
Object.defineProperty(データ、"名前"、{
  得る(){
    「名前が読み取られました」を返します
  },
 set(val){
   console.log('割り当てられました',val)
 }
})
//効果を確認するには、このコードをブラウザコンソールに入力します console.log(data.name)

出力 data.name は tom ではありませんが、name が読み取られます。これは、defineProperty がデータの name フィールドを監視および乗っ取り、name フィールドが返すはずの値を変更するためです。

ステップ2

const _data = { ...データ }
for(let i in data){
  オブジェクト.defineProperty(データ, i, {
    得る(){
      _data[i]+"jsによって変更されました"を返します
    },
    set(val){
      _data[i] = 値;
    }
  })
}

なぜ別の _data が必要なのでしょうか?

回答: データ フィールドが監視され、フィールドの return 属性が変更されます。その結果、データ内の監視対象フィールドが取得されるたびに、ブラウザーは get によって返された値を呼び出します。get で return data[i] を直接返すと、ブラウザーは get メソッドを継続的に呼び出し、無限ループに入ります。

データにもう少しデータを追加する

定数データ = {
  名前: "トム",
  年齢: 14歳
  友人:
        "name1": "張三",
        "name2": "李思",
        "name3": "王武",
        "name4": "趙劉"
  },
}

初期値の書式設定

const createNewWatch = (val, パス, 親キー, イベント) => {
       //値がオブジェクト型でない場合は、値を直接返します。if(typeof val != 'object') return val;
       //逆に、オブジェクト型の場合は、WatchObject を呼び出して子要素を走査して監視します //WatchObject は次のコードで作成されます return WatchObject(val,path.concat(parentKey), event)
    }
広州ブランドデザイン会社 https://www.houdianzi.com

オブジェクトのフォーマットと値の監視

const WatchObject = (データ、パス、イベント) => {
  関数WatchObject(){
    for(var key in data){
        // 以前に作成した関数を呼び出してvalをフォーマットします
        data[キー] = createNewWatch(data[キー], パス, キー, イベント)
        //データキーのリスナーを作成します。defineProperty(this, key, data[key], path.concat(key), event)
    }
  }
  新しいWatchObject()を返す
}

最後にコードを実行すると、簡単なデータ監視が完了します。

定数 b = WatchObject(データ,[],{ 
    set(パス,値){ 
      console.log(パス,値) 
    } 
})

上記は、JS を使用して簡単なデータ監視を実装する方法の詳細です。JS データ監視の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JS で div サイズ変更イベントを監視する方法
  • JavaScript 監視の組み合わせの重要なアイデアとコード実装
  • JavaScript でキーボード入力とマウスクリックを監視する方法
  • NodeJS で WebSocket リスナーを作成する複数の方法 (3)
  • js で更新せずに URL 変更を監視するサンプル コードの詳細な説明
  • JavaScript はキーボードイベントのコード実装を監視します
  • JSを使用してキーダウンイベントをリッスンする
  • jsはデータの変更を監視するための監視コードを実装します
  • JavaScript イベント監視とイベント委任の例の詳細な説明

<<:  MySQL ビューの原理と基本操作例

>>:  Windows Server 2016 に Oracle をインストールする方法

推薦する

innodb_flush_method 値メソッド (例の説明)

innodb_flush_methodのいくつかの典型的な値 fsync: InnoDB は fs...

MySQL ページング制限の実用的な最適化

序文クエリ ステートメントを使用する場合、多くの場合、データの最初の数行または中間行を返す必要があり...

Mysql のフィールドのデータの一部をバッチ置換する (推奨)

MYSQL のフィールドのデータの一部をバッチで置き換えます。具体的な導入は次のとおりです。 1....

JavaScript で DOM 要素を監視する MutationObServer の詳細

1. 基本的な使い方これは MutationObserver コンストラクターを通じてインスタンス化...

MySQLのLIMIT文について詳しく説明します

目次質問サーバー層とストレージエンジン層LIMITって何ですか?何をするか?トゥカオ最近、Q&...

MySQLデータベースのタイムアウト設定を構成する方法の例

目次序文1. JDBCタイムアウト設定2. 接続プールのタイムアウト設定3. MyBatisクエリの...

Nginxのアクセスボリューム制御の詳細な説明

目的リクエスト アクセス ボリュームを制御するための Nginx ngx_http_limit_co...

IEウェブページのポップアップウィンドウの共通パラメータは自分で設定できます

ポップアップは、現在のウィンドウにメニューツールバーがあるかどうかとは関係ありません。ページにスクリ...

Linux で lvm 論理ボリューム パーティションのサイズを調整するチュートリアル (xfs や ext4 などのさまざまなファイル システム用)

序文システムをインストールしたときに、パーティション領域を適切に割り当てませんでした。その後のメンテ...

ショッピングカートのスライド削除効果を実装するReactネイティブサンプルコード

基本的にすべてのeコマースプロジェクトにはショッピングカートの機能があります。これはreact-na...

ドラッグ可能で編集可能なガントチャートの詳細な説明(HighchartsはVueとReactで使用できます)

序文Excel は強力で、広く使用されています。 Web アプリケーションの登場と改善に伴い、ユーザ...

Apple Watchのインタラクションデザインにおける4つの全く異なる体験が明らかに

今日も Watch アプリのデザインに関する話です。私はケーススタディが大好きなので、同じトピックを...

MysqlクエリJSON結果に関連する関数の概要

JSON 形式のフィールドは、MySQL 5.7 で追加された新しい属性ですが、基本的には文字列とし...

MySQLの自動増分IDについて知っておくべきこと

はじめに: MySQL を使用してテーブルを作成する場合、通常は自動インクリメント フィールド (A...

ulとliの基本的な使用法の分析

ナビゲーション、少量のデータテーブル、中央揃え<!DOCTYPE html PUBLIC &q...