Objek proksi JavaScript Proksi pertama kali mengalami ikhtisar tampilan berdasarkan data yang sederhana

Artikel ini memberi Anda pengetahuan yang relevan tentang JavaScript. Artikel ini terutama memperkenalkan Anda pada tampilan sederhana berbasis data dari objek proxy JS Proxy untuk pertama kalinya akan bermanfaat bagi semua orang.

Entri front-end (vue) ke kursus penguasaan: masuk ke pembelajaran

JQuery digerakkan oleh peristiwa, artinya, ketika sepotong data dikaitkan dengan konten DOM tertentu, saya perlu mengoperasikan DOM untuk sinkronisasi setelah data berubah:

 <div id="data">data</div>

 var data = "data"
//Data telah berubah melalui semacam peristiwa data = "data baru"
$("#data").teks = data

Dalam interaksi sederhana, metode ini masih tampak nyaman, namun begitu interaksi menjadi besar, kode akan membengkak.

Ketika saya akan lulus, Angular, Vue, dan React bermunculan, dan kami menemukan cara baru - berbasis data. Artinya, melalui "pengikatan" DOM ​​dan data, kami dapat langsung memodifikasi data, dan konten DOM bisa langsung dimodifikasi.

 <div>{{data}}</div>

 var data = "data"
// ...terikat entah bagaimana data = "data baru"

Konten di DOM langsung menjadi data baru. Sangat mudah digunakan dan kodenya relatif ringkas. Tampaknya ajaib pada saat itu.

Kerangka kerja berbasis data yang berbeda memiliki prinsip dan proses pengikatan yang berbeda, dan semuanya relatif kompleks. Namun hari ini kami akan menyederhanakannya dan menggunakan objek Proxy JS untuk mengimplementasikan drive data. (Omong-omong, data responsif Vue3 menggunakan prinsip ini. Tentu saja, ini akan jauh lebih rumit daripada contoh saat ini)

Apa itu objek Proxy?

Objek Proxy digunakan untuk membuat proxy bagi suatu objek guna mengimplementasikan intersepsi dan penyesuaian operasi dasar (seperti pencarian atribut, penugasan, enumerasi, pemanggilan fungsi, dll.). Metode penggunaan spesifiknya adalah:

 Proxy baru (objek yang akan diproksi, objek acara proksi)

Acara berikut dapat didelegasikan:

Gunakan Proxy untuk menulis tampilan sederhana berdasarkan data

Sekarang kita memahami penggunaan dasar Proxy, kita dapat menggunakannya untuk mem-proxy setter objek untuk mengimplementasikan drive data.

Pertama-tama tentukan elemen DOM dengan ID yang sama dengan data:

 <div id="Nama Depan"></div>
<div id="usia"></div>

Tetapkan proxy Proxy untuk data , proksi setter , dan operasikan DOM di dalamnya:

 var data = {
Nama Depan: "",
usia: 0
}
var p_data = Proksi baru(data, {
set: fungsi (obj, prop, newval) {
document.getElementById(prop).innerText = newval;
obj[prop] = newval; // Jangan lupa untuk mengimplementasikan logika asli return true; // Menyetel persyaratan proxy, mengembalikan true setelah pemrosesan berhasil
}
})

Kemudian tetapkan nilai awal dan atur interaksi yang relevan, dan perhatikan bahwa agen p_data dioperasikan alih-alih data :

 p_data.firstName = "Nama akan ditampilkan dalam dua detik..."
p_data.usia = 25
setWaktu habis(() => {
p_data.firstName = "Lin Yuchen"
}, 2000)
document.getElementById("tumbuh").onclick = function() {
p_data.usia++
}

Dengan cara ini, drive data terwujud. Selama nilai atribut p_data diubah secara sewenang-wenang, konten DOM dapat langsung diubah:

JS

 var data = {
Nama Depan: "",
usia: 0
}
var p_data = Proksi baru(data, {
set: fungsi (obj, prop, newval) {
document.getElementById(prop).innerText = newval;
obj[prop] = nilai baru;
kembali benar
}
})
p_data.firstName = "Nama akan ditampilkan dalam dua detik..."
p_data.usia = 25
setWaktu habis(() => {
p_data.firstName = "Lin Yuchen"
}, 2000)
document.getElementById("tumbuh").onclick = function() {
p_data.usia++
}