อ็อบเจ็กต์พร็อกซี JavaScript พร็อกซีสัมผัสประสบการณ์ภาพรวมมุมมองที่ขับเคลื่อนด้วยข้อมูลอย่างง่ายเป็นครั้งแรก

บทความนี้นำเสนอความรู้ที่เกี่ยวข้องเกี่ยวกับ JavaScript โดยหลักแล้วจะแนะนำให้คุณรู้จักกับมุมมองที่ขับเคลื่อนด้วยข้อมูลของ JS proxy object เป็นครั้งแรก เพื่อนๆ ที่ต้องการจะอ้างอิงถึงมันด้วยกัน จะเป็นประโยชน์กับทุกคน

การเข้าสู่ Front-end (vue) สู่หลักสูตรการเรียนรู้: เข้าสู่การเรียนรู้

JQuery ขับเคลื่อนด้วยเหตุการณ์ กล่าวคือ เมื่อข้อมูลชิ้นหนึ่งเชื่อมโยงกับเนื้อหาบางอย่างของ DOM ฉันจำเป็นต้องดำเนินการ DOM เพื่อการซิงโครไนซ์หลังจากข้อมูลเปลี่ยนแปลง:

 <div id="data">ข้อมูล</div>

 ข้อมูล var = "ข้อมูล"
//ข้อมูลมีการเปลี่ยนแปลงผ่านข้อมูลเหตุการณ์บางประเภท = "ข้อมูลใหม่"
$("#data").text = ข้อมูล

ในการโต้ตอบแบบง่าย วิธีการนี้ยังคงดูสะดวก แต่เมื่อการโต้ตอบมีขนาดใหญ่ขึ้น โค้ดก็จะบวม

ตอนที่ฉันกำลังจะสำเร็จการศึกษา Angular, Vue และ React กำลังเกิดขึ้น และเราค้นพบวิธีใหม่ - ที่ขับเคลื่อนด้วยข้อมูล กล่าวคือ เราสามารถแก้ไขข้อมูลได้โดยตรงผ่าน "การเชื่อมโยง" ของ DOM และข้อมูล เนื้อหา DOM สามารถแก้ไขได้โดยตรง

 <div>{{ข้อมูล}}</div>

 ข้อมูล var = "ข้อมูล"
// ...ผูกข้อมูลไว้ = "ข้อมูลใหม่"

เนื้อหาใน DOM จะกลายเป็นข้อมูลใหม่โดยตรง มันสะดวกมากที่จะใช้และโค้ดก็ค่อนข้างกระชับในเวลานั้น

เฟรมเวิร์กที่ขับเคลื่อนด้วยข้อมูลที่แตกต่างกันมีหลักการและกระบวนการเชื่อมโยงที่แตกต่างกัน และทั้งหมดนี้ค่อนข้างซับซ้อน แต่วันนี้เราจะทำให้มันง่ายขึ้นและใช้วัตถุ Proxy ของ JS เพื่อใช้งานไดรฟ์ข้อมูล (อย่างไรก็ตาม ข้อมูล Responsive ของ Vue3 ใช้หลักการนี้ แน่นอนว่าจะซับซ้อนกว่าตัวอย่างวันนี้มาก)

วัตถุพร็อกซีคืออะไร?

ออบเจ็กต์ Proxy ใช้เพื่อสร้างพร็อกซีสำหรับออบเจ็กต์เพื่อใช้การสกัดกั้นและการปรับแต่งการดำเนินการพื้นฐาน (เช่น การค้นหาแอตทริบิวต์ การกำหนด การแจงนับ การเรียกใช้ฟังก์ชัน ฯลฯ) วิธีการใช้งานเฉพาะคือ:

 พร็อกซีใหม่ (วัตถุที่จะมอบฉันทะ วัตถุเหตุการณ์ของพร็อกซี)

สามารถมอบหมายกิจกรรมต่อไปนี้ได้:

ใช้ Proxy เพื่อเขียนมุมมองที่ขับเคลื่อนด้วยข้อมูลอย่างง่าย

ตอนนี้เราเข้าใจการใช้งานพื้นฐานของ Proxy แล้ว เราสามารถใช้พร็อกซีนี้กับ setter ค่าของออบเจ็กต์เพื่อใช้งานไดรฟ์ข้อมูลได้

ขั้นแรกให้กำหนดองค์ประกอบ DOM ด้วย ID เดียวกันกับข้อมูล:

 <div id="ชื่อแรก"></div>
<div id="อายุ"></div>

ตั้งค่าพร็อกซีพร็อกซีสำหรับ data พร็อกซี setter และดำเนินการ DOM ในนั้น:

 ข้อมูล var = {
ชื่อ: "",
อายุ: 0
-
var p_data = พร็อกซีใหม่ (ข้อมูล, {
ชุด: ฟังก์ชั่น (obj, prop, newval) {
document.getElementById(prop).innerText = newval;
obj[prop] = newval; // อย่าลืมใช้ตรรกะดั้งเดิมที่ส่งคืนจริง // ข้อกำหนดพร็อกซีของ Setter ให้คืนค่าจริงหลังจากประมวลผลสำเร็จ
-
-

จากนั้นตั้งค่าเริ่มต้นและตั้งค่าการโต้ตอบที่เกี่ยวข้อง และโปรดทราบว่าตัวแทน p_data ถูกดำเนินการแทน data :

 p_data.firstName = "ชื่อจะแสดงในสองวินาที..."
p_data.age = 25
setTimeout(() => {
p_data.firstName = "หลิน ยู่เฉิน"
}, 2000)
document.getElementById("เติบโต").onclick = function() {
p_data.age++
-

ด้วยวิธีนี้ ไดรฟ์ข้อมูลจะถูกรับรู้ ตราบใดที่ค่าแอตทริบิวต์ของ p_data ถูกแก้ไขโดยพลการ เนื้อหาของ DOM ก็สามารถเปลี่ยนแปลงได้โดยตรง:

จส

 ข้อมูล var = {
ชื่อ: "",
อายุ: 0
-
var p_data = พร็อกซีใหม่ (ข้อมูล, {
ชุด: ฟังก์ชั่น (obj, prop, newval) {
document.getElementById(prop).innerText = newval;
obj[prop] = นิววัล;
กลับเป็นจริง
-
-
p_data.firstName = "ชื่อจะแสดงในสองวินาที..."
p_data.age = 25
setTimeout(() => {
p_data.firstName = "หลิน ยู่เฉิน"
}, 2000)
document.getElementById("เติบโต").onclick = function() {
p_data.age++
-