概要主に 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 をインストールする方法
Centos7 のインストール時に VmWare がインターネットにアクセスできない場合はどうすれば...
達成すべき効果: 必要なもの1枚、2枚、3枚とスタイルが異なります。子要素の判定はjsで完結できます...
チャットボットは多くの手作業を省くことができ、顧客サービス、天気予報対応など、さまざまな状況で使用で...
序文最良の方法は、あなたが思いつく最も速い方法ではないかもしれません。職場で一時的に使用するスクリプ...
目次HBuilderX での ESLint プラグインのインストールカスタム eslint-js ル...
今回は、コンピューターや携帯電話用の rtmp ライブ ブロードキャスト サーバーを設定し、ライブ ...
1.1 ストレージエンジンの概要 1.1.1 ファイルシステムストレージファイル システム: オペ...
1. Busyboxのソースコードをオンラインでダウンロードしてください。コンパイル方法については、...
1. IE8 の getElementById は id のみをサポートし、name はサポートしま...
Nestjs 例外フィルターといえば、非常に強力な .Net のグローバル フィルターについて触れな...
サーバーでは、データベースにすばやくログインするために、通常は mysql -hhost -uuse...
HTML と CSS を含む JD.com のホームページの静的ページ効果を 3 日間で完成させます...
1. それは何ですか? MySQL は最も人気のあるリレーショナル データベース管理システムです。W...
序文Linux カーネルプログラミングでは、マクロ関数 container_of(ptr, type...
目次プロジェクトでデータベースを操作する3つのステップデータベースを操作するための具体的な手順1: ...