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 をインストールする方法

推薦する

VmWareでcentos7をインストールするときにインターネットにアクセスできない問題の解決策

Centos7 のインストール時に VmWare がインターネットにアクセスできない場合はどうすれば...

CSS を使用してサブ要素に応じて異なるスタイルを記述する方法

達成すべき効果: 必要なもの1枚、2枚、3枚とスタイルが異なります。子要素の判定はjsで完結できます...

jQuery Ajax チャットボットの実装事例

チャットボットは多くの手作業を省くことができ、顧客サービス、天気予報対応など、さまざまな状況で使用で...

バッチファイルを処理するLinuxの1行コマンドの詳細な説明

序文最良の方法は、あなたが思いつく最も速い方法ではないかもしれません。職場で一時的に使用するスクリプ...

vue フロントエンド HbuliderEslint リアルタイム検証 自動修復設定

目次HBuilderX での ESLint プラグインのインストールカスタム eslint-js ル...

Nginx を使用して rtmp ライブ サーバーを実行する方法

今回は、コンピューターや携帯電話用の rtmp ライブ ブロードキャスト サーバーを設定し、ライブ ...

MySQL ベースのストレージエンジンとログの説明 (包括的な説明)

1.1 ストレージエンジンの概要 1.1.1 ファイルシステムストレージファイル システム: オペ...

Linux で ARM 開発ボード用のファイルシステムを作成する

1. Busyboxのソースコードをオンラインでダウンロードしてください。コンパイル方法については、...

私が遭遇したIE8の互換性に関する注意事項

1. IE8 の getElementById は id のみをサポートし、name はサポートしま...

nestjs における例外フィルター Exceptionfilter の具体的な使用法

Nestjs 例外フィルターといえば、非常に強力な .Net のグローバル フィルターについて触れな...

MySQL パスワードに特殊文字が含まれている場合とコマンドラインからログインする場合

サーバーでは、データベースにすばやくログインするために、通常は mysql -hhost -uuse...

シンプルなHTMLとCSSの使い方の詳細な説明

HTML と CSS を含む JD.com のホームページの静的ページ効果を 3 日間で完成させます...

MySQL 入門 - 概念

1. それは何ですか? MySQL は最も人気のあるリレーショナル データベース管理システムです。W...

Linux カーネルプログラミングにおけるコンテナの of() 関数の紹介

序文Linux カーネルプログラミングでは、マクロ関数 container_of(ptr, type...

Node.jsはMySQLデータベースの実戦記録を追加、削除、変更、チェックします

目次プロジェクトでデータベースを操作する3つのステップデータベースを操作するための具体的な手順1: ...