MVC या MDV का इस्तेमाल करने वाले कई JavaScript फ़्रेमवर्क को, वेब ऐप्लिकेशन में स्टेटस को मॉडल करने वाले ऑब्जेक्ट में हुए बदलावों का जवाब देना होता है. यह सुविधा, डेटा-बाइंडिंग मॉडल का बुनियादी हिस्सा है.
किसी तरह की कार्रवाई को ट्रिगर करने के लिए, JavaScript ऑब्जेक्ट और DOM प्रॉपर्टी को मॉनिटर करने के कई तरीके हैं. हालांकि, परफ़ॉर्मेंस वगैरह की वजह से, ज़्यादातर तकनीकें सही नहीं होती हैं.
वेब ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर बनाने के लिए, TC39 को Object.observe() नाम का एक नया तरीका सुझाया गया है. TC39, ECMAScript (JavaScript) के डेवलपमेंट की निगरानी करने वाली स्टैंडर्ड बॉडी है.
Object.observe() की मदद से, किसी भी JavaScript ऑब्जेक्ट में एक लिसनर जोड़ा जा सकता है. यह लिसनर, ऑब्जेक्ट या उसकी प्रॉपर्टी में बदलाव होने पर कॉल होता है.
इसे अभी Chrome Canary के वर्शन 25 में आज़माया जा सकता है.
इस सुविधा को आज़माने के लिए, आपको Chrome Canary में प्रयोग के तौर पर उपलब्ध JavaScript चालू करें फ़्लैग को चालू करना होगा. इसके बाद, ब्राउज़र को रीस्टार्ट करें. फ़्लैग को '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 स्टैंडर्ड बॉडी, इस सुविधा के बारे में सुझाव, राय या शिकायतें मांग रहा है. इसलिए, इसे आज़माएं और हमें अपनी राय दें.