الاستجابة للتغير باستخدام Object.observe

Alex Danilo

إنّ الكثير من إطارات عمل JavaScript التي تستخدم MVC أو MDV تحتاج إلى الاستجابة للتغييرات في الكائنات التي تنشئ نموذجًا للحالة داخل تطبيق الويب. وهذه الميزة هي جزء أساسي من نموذج ربط البيانات.

هناك عدد من الطرق المختلفة لمراقبة عناصر JavaScript وخصائص نموذج DOM لبدء نوع من الإجراءات، ولكن معظم الأساليب ليست مثالية لأسباب مختلفة، مثل الأداء وما إلى ذلك.

لتحسين أداء تطبيقات الويب، تم اقتراح طريقة جديدة تُسمى Object.observe() على TC39، وهي هيئة المعايير التي تشرف على تطوير ECMAScript (JavaScript).

تتيح لك دالة Object.observe() إضافة مستمع إلى أي كائن JavaScript يتم استدعاؤه عند تغيير هذا الكائن أو خصائصه.

يمكنك تجربتها الآن في الإصدار 25 من Chrome Canary.

لتجربة هذه الميزة، عليك تفعيل العلامة تفعيل JavaScript التجريبي في Chrome Canary وإعادة تشغيل المتصفّح. يمكن العثور على البلاغ ضمن about:flags كما هو موضّح في الصورة أدناه:

في ما يلي مثال بسيط على كيفية إعداد مراقب على عنصر:

var beingWatched = {};
// Define callback function to get notified on changes
function somethingChanged(changes) {
    // do something
}
Object.observe(beingWatched, somethingChanged);

عند تعديل العنصر beingWatched، سيتم تشغيل دالة ردّ الاتصال somethingChanged التي تتلقّى صفيفًا من التغييرات التي تم تطبيقها على العنصر.

وبالتالي، يكون محرّك JavaScript متاحًا لتخزين عدد من التغييرات ونقلها كلها في طلب واحد إلى دالة ردّ الاتصال. يساعد ذلك في تحسين عمليات الاستدعاء لكي يتمكّن الرمز من إجراء الكثير من عمليات التلاعب في JavaScript، ولكن لا يعالج سوى عدد قليل من عمليات الاستدعاء من خلال تجميع التعديلات معًا.

سيتم تفعيل دالة ردّ الاتصال عند إضافة موقع أو تعديله أو حذفه أو إعادة ضبطه.

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

يمكنك تكرار كل تغيير بسهولة تامة، من خلال إجراء ما يلي في وظيفة الاستدعاء "somethingChanged":

function whatHappened(change) {
    console.log(change.name + " was " + change.type + " and is now " + change.object[change.name]);
}
function somethingChanged(changes) {
    changes.forEach(whatHappened);
}

تحدِّد السمة type ما حدث للكائن. يمكن الاطّلاع على بعض أمثلة السمات التي يتمّ ضبطها والنوع المرتبط بها في الرمز أدناه.

beingWatched.a = "foo"; // new
beingWatched.a = "bar"; // updated
beingWatched.a = "bar"; // no change
beingWatched.b = "amazing"; // new

والميزة الرائعة في هذه التقنية هي أنّ جميع ميزات المراقبة الذكية متوفّرة داخل محرّك JavaScript، ما يسمح للمتصفّح بتحسينها بشكل جيد واستخدام JavaScript لتنفيذ الوظائف التي تستفيد من هذه الميزة.

من الميزات الرائعة الأخرى للتطوير هي إمكانية استخدام Object.observe() لتشغيل أداة تصحيح الأخطاء عند تغيُّر عنصر. ولإجراء ذلك، عليك استخدام رمز برمجي يشبه المثال أدناه.

Object.observe(beingWatched, function(){ debugger; });

إليك فيديو تعريفي رائع حول دالة Object.observe() يوضّح كيفية استخدامها بالتفصيل.

يتوفّر أيضًا وصف وصفي رائع ومثال عملي هنا.

تسعى هيئة المعايير TC39 إلى الحصول على ملاحظات حول هذه الميزة، لذا ننصحك بتجربتها وإعلامنا برأيك.