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

تحتاج الكثير من أطر عمل 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 إلى الحصول على تعليقات بشأن هذه الميزة، لذا ندعوك إلى تجربتها وإعلامنا برأيك.