كائن وكيل جافا سكريبت الوكيل أول تجربة عرض بسيطة تعتمد على البيانات

توفر لك هذه المقالة المعرفة ذات الصلة بجافا سكريبت، وهي تقدم لك بشكل أساسي طريقة عرض بسيطة تعتمد على البيانات لكائن وكيل JS، ويمكن للأصدقاء المحتاجين الرجوع إليها معًا سوف تكون مفيدة للجميع.

مدخل الواجهة الأمامية (vue) إلى دورة الإتقان: أدخل التعلم

تعتمد JQuery على الأحداث، أي أنه عندما ترتبط قطعة من البيانات بمحتوى معين من DOM، أحتاج إلى تشغيل DOM للمزامنة بعد تغيير البيانات:

 <div id="data">البيانات</div>

 بيانات فار = "بيانات"
// لقد تغيرت البيانات من خلال نوع ما من بيانات الأحداث = "بيانات جديدة"
$("#data").text = data

في التفاعلات البسيطة، لا تزال هذه الطريقة تبدو مريحة، ولكن بمجرد أن تصبح التفاعلات ضخمة، سيصبح الكود متضخمًا.

عندما كنت على وشك التخرج، ظهرت Angular وVue وReact، واكتشفنا طريقة جديدة تعتمد على البيانات، أي أنه من خلال "ربط" DOM ​​والبيانات، يمكننا تعديل البيانات مباشرة، و يمكن تعديل محتوى DOM مباشرة.

 <div>{{بيانات}}</div>

 بيانات فار = "بيانات"
// ...مرتبط بطريقة أو بأخرى بالبيانات = "بيانات جديدة"

يصبح المحتوى الموجود في DOM بيانات جديدة مباشرة. إنه مناسب جدًا للاستخدام وكان الكود موجزًا ​​نسبيًا في ذلك الوقت.

تحتوي الأطر المختلفة المعتمدة على البيانات على مبادئ وعمليات ملزمة مختلفة، وجميعها معقدة نسبيًا. لكننا اليوم سنقوم بتبسيط الأمر واستخدام كائن JS's Proxy لتنفيذ محرك البيانات. (بالمناسبة، تستخدم البيانات المستجيبة لـ Vue3 هذا المبدأ. بالطبع، سيكون الأمر أكثر تعقيدًا من مثال اليوم)

ما هو كائن الوكيل؟

يتم استخدام كائن الوكيل لإنشاء وكيل لكائن ما لتنفيذ الاعتراض وتخصيص العمليات الأساسية (مثل البحث عن السمات، والتخصيص، والتعداد، واستدعاء الوظائف، وما إلى ذلك). طرق الاستخدام المحددة هي:

 وكيل جديد (الكائن المراد إنشاء وكيل له، كائن الحدث للوكيل)

يمكن تفويض الأحداث التالية:

استخدم Proxy لكتابة عرض بسيط يعتمد على البيانات

الآن بعد أن فهمنا الاستخدام الأساسي للوكيل، يمكننا استخدامه لتوكيل setter الكائن لتنفيذ محرك البيانات.

قم أولاً بتعريف عنصر DOM بنفس معرف البيانات:

 <div id="firstName"></div>
<div id="age"></div>

قم بتعيين وكيل وكيل data ، وقم بتعيين setter له، وتشغيل DOM فيه:

 بيانات فار = {
الاسم الأول: ""،
العمر: 0
}
فار p_data = وكيل جديد (بيانات، {
مجموعة: وظيفة (obj، الدعامة، newval) {
document.getElementById(prop).innerText = newval;
obj[prop] = newval; // لا تنس تنفيذ المنطق الأصلي return true;
}
})

ثم قم بتعيين القيمة الأولية وضبط التفاعلات ذات الصلة، ولاحظ أنه يتم تشغيل الوكيل p_data بدلاً من data :

 p_data.firstName = "سيتم عرض الاسم خلال ثانيتين..."
p_data.age = 25
setTimeout(() => {
p_data.firstName = "لين يوشن"
}، 2000)
document.getElementById("grow").onclick = function() {
p_data.age++
}

بهذه الطريقة، يتم تحقيق محرك البيانات وطالما تم تعديل قيمة سمة p_data بشكل تعسفي، يمكن تغيير محتوى DOM مباشرة:

شبيبة

 بيانات فار = {
الاسم الأول: ""،
العمر: 0
}
فار p_data = وكيل جديد (بيانات، {
مجموعة: وظيفة (obj، الدعامة، newval) {
document.getElementById(prop).innerText = newval;
obj[prop] = newval;
العودة صحيحا
}
})
p_data.firstName = "سيتم عرض الاسم خلال ثانيتين..."
p_data.age = 25
setTimeout(() => {
p_data.firstName = "لين يوشن"
}، 2000)
document.getElementById("grow").onclick = function() {
p_data.age++
}