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