概要主に Object.defineProperty を使用して、vue と同様のデータ バインディングを実装します。 最初のステップ定数データ = { 名前: "トム", 年齢: 14 } Object.defineProperty(データ、"名前"、{ 得る(){ 「名前が読み取られました」を返します }, set(val){ console.log('割り当てられました',val) } }) //効果を確認するには、このコードをブラウザコンソールに入力します console.log(data.name) 出力 data.name は tom ではありませんが、name が読み取られます。これは、defineProperty がデータの name フィールドを監視および乗っ取り、name フィールドが返すはずの値を変更するためです。 ステップ2const _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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
>>: Windows Server 2016 に Oracle をインストールする方法
innodb_flush_methodのいくつかの典型的な値 fsync: InnoDB は fs...
序文クエリ ステートメントを使用する場合、多くの場合、データの最初の数行または中間行を返す必要があり...
MYSQL のフィールドのデータの一部をバッチで置き換えます。具体的な導入は次のとおりです。 1....
1. 基本的な使い方これは MutationObserver コンストラクターを通じてインスタンス化...
目次質問サーバー層とストレージエンジン層LIMITって何ですか?何をするか?トゥカオ最近、Q&...
目次序文1. JDBCタイムアウト設定2. 接続プールのタイムアウト設定3. MyBatisクエリの...
目的リクエスト アクセス ボリュームを制御するための Nginx ngx_http_limit_co...
ポップアップは、現在のウィンドウにメニューツールバーがあるかどうかとは関係ありません。ページにスクリ...
序文システムをインストールしたときに、パーティション領域を適切に割り当てませんでした。その後のメンテ...
基本的にすべてのeコマースプロジェクトにはショッピングカートの機能があります。これはreact-na...
序文Excel は強力で、広く使用されています。 Web アプリケーションの登場と改善に伴い、ユーザ...
今日も Watch アプリのデザインに関する話です。私はケーススタディが大好きなので、同じトピックを...
JSON 形式のフィールドは、MySQL 5.7 で追加された新しい属性ですが、基本的には文字列とし...
はじめに: MySQL を使用してテーブルを作成する場合、通常は自動インクリメント フィールド (A...
ナビゲーション、少量のデータテーブル、中央揃え<!DOCTYPE html PUBLIC &q...