JavaScript プロキシ オブジェクト プロキシのファースト エクスペリエンス シンプルなデータ駆動型ビューの概要

この記事では、JS プロキシ オブジェクト Proxy の簡単なデータ駆動型ビューを主に紹介します。初めて必要な方は、ぜひ参考にしてください。誰にとっても役立ちます。

フロントエンド (vue) マスタリーコースへのエントリー: ラーニングに入る

JQuery はイベント駆動型です。つまり、データの一部が DOM の特定のコンテンツに関連付けられている場合、データの変更後に同期のために DOM を操作する必要があります。

 <div id="data">データ</div>

 var data = "データ"
//何らかのイベントによりデータが変更された data = "新しいデータ"
$("#data").text = データ

単純なインタラクションでは、この方法はまだ便利に見えますが、インタラクションが巨大になると、コードが肥大化します。

私が卒業しようとしたとき、Angular、Vue、React が登場し、私たちは新しい方法、つまり DOM とデータの「バインディング」を通じてデータを直接変更できることを発見しました。 DOM コンテンツを直接変更できるようになりました。

 <div>{{データ}}</div>

 var data = "データ"
// ...何らかの方法でバインドされた data = "新しいデータ"

DOM 内の内容がそのまま新しいデータになります。とても使いやすく、コードも比較的簡潔でした。当時は魔法のように思えました。

データ駆動型フレームワークが異なれば、バインディングの原則やプロセスも異なり、それらはすべて比較的複雑です。しかし、今日はそれを単純化し、JS の Proxy オブジェクトを使用してデータ ドライブを実装します。 (ちなみに、Vue3 のレスポンシブ データはこの原則を使用しています。もちろん、今日の例よりもはるかに複雑になります)

プロキシオブジェクトとは何ですか?

Proxyオブジェクトは、基本的な操作 (属性の検索、割り当て、列挙、関数呼び出しなど) のインターセプトとカスタマイズを実装するオブジェクトのプロキシを作成するために使用されます。具体的な利用方法は以下の通りです。

 new Proxy (プロキシされるオブジェクト、プロキシのイベント オブジェクト)

次のイベントを委任できます。

プロキシを使用して単純なデータ駆動型ビューを作成する

プロキシの基本的な使用法を理解したので、それを使用してオブジェクトのsetterをプロキシし、データ ドライブを実装できます。

まず、データと同じ ID を持つ DOM 要素を定義します。

 <div id="firstName"></div>
<div id="年齢"></div>

dataに Proxy プロキシを設定し、そのsetterプロキシし、その中で DOM を操作します。

変数データ = {
ファーストネーム： ""、
年齢：0歳
}
var p_data = 新しいプロキシ(データ, {
セット: 関数 (obj、prop、newval) {
document.getElementById(prop).innerText = newval;
obj[prop] = newval; // 元のロジックを忘れずに実装してください return true; // プロキシ要件を設定し、処理が成功した後に true を返します。
}
})

次に、初期値を設定し、関連するインタラクションを設定します。エージェントp_dataがdata代わりに操作されることに注意してください。

 p_data.firstName = "名前は 2 秒後に表示されます..."
p_data.age = 25
setTimeout(() => {
p_data.firstName = "リン・ユーチェン"
}、2000）
document.getElementById("grow").onclick = function() {
p_data.age++
}

このようにして、 p_dataの属性値を任意に変更する限り、DOM の内容を直接変更することができます。

JS

変数データ = {
ファーストネーム： ""、
年齢：0歳
}
var p_data = 新しいプロキシ(データ, {
セット: 関数 (obj、prop、newval) {
document.getElementById(prop).innerText = newval;
obj[prop] = 新しい値;
trueを返す
}
})
p_data.firstName = "名前は 2 秒後に表示されます..."
p_data.age = 25
setTimeout(() => {
p_data.firstName = "リン・ユーチェン"
}、2000）
document.getElementById("grow").onclick = function() {
p_data.age++
}