🙏🏽 🍂 🍃 ऑब्जेक्ट के साथ डेटा बाइंडिंग क्रांति। 💤 👨🏼‍🎨 🥇

परिचय

एक क्रांति आ रही है। जावास्क्रिप्ट के लिए एक नया अतिरिक्त है जो डेटा बाइंडिंग के बारे में आपके द्वारा ज्ञात सभी चीजों को बदल देगा। इसके अलावा, संपादन और अपडेट करने वाले मॉडल को देखने के लिए आपके MVC पुस्तकालयों का दृष्टिकोण भी बदल जाएगा। क्या आप तैयार हैं?

अच्छा, अच्छा। हम नहीं खींचेंगे। मुझे आपको Object.observe () प्रस्तुत करने की खुशी है, जो Chrome 36 के बीटा संस्करण में दिखाई दिया। [CROWD HAPPY]

Object.observe () निम्नलिखित ECMAScript मानक का हिस्सा है। यह आपको जावास्क्रिप्ट वस्तुओं में अतुल्यकालिक रूप से परिवर्तन ट्रैक करने की अनुमति देता है ... किसी भी तीसरे पक्ष के पुस्तकालयों का उपयोग किए बिना, यह पर्यवेक्षक को समय के साथ किसी वस्तु की स्थिति में परिवर्तन को ट्रैक करने की अनुमति देता है।

//  ,        var model = {}; //      Object.observe(model, function(changes){ //     , changes.forEach(function(change) { //   ,   console.log(change.type, change.name, change.oldValue); }); });

हर बार जब आप कोई वस्तु बदलते हैं, तो हमें एक अलर्ट प्राप्त होता है:

Object.observe () के साथ (मैं इसे Oo () या Oooooooo कहना पसंद करता हूं), आप एक फ्रेमवर्क का उपयोग किए बिना दो-तरफ़ा डेटा बाइंडिंग लागू कर सकते हैं।

इसका मतलब यह नहीं है कि आपको इसका उपयोग नहीं करना चाहिए। जटिल व्यावसायिक तर्क के साथ बड़ी परियोजनाओं के लिए, रूपरेखाएं आवश्यक हैं, और मैं आपको उनका उपयोग करने से मना नहीं करने जा रहा हूं। वे नए डेवलपर्स के लिए काम को आसान बनाने का लक्ष्य रखते हैं, समर्थन के लिए कम कोड की आवश्यकता होती है, और सामान्य कार्यों पर काम करने के लिए कुछ खाके पेश करते हैं। जब आपको ऐसी कार्यक्षमता की आवश्यकता नहीं होती है, तो आप अधिक हल्के समाधानों का उपयोग कर सकते हैं, जैसे बहुलक (जो, वैसे, पहले से ही ओओ () का उपयोग करता है)।

यहां तक कि अगर आप पूर्ण करने के लिए चौखटे या एमवी * पुस्तकालयों का उपयोग करते हैं, तो ओओ () उन्हें एक अच्छा प्रदर्शन को बढ़ावा देने की अनुमति देगा, जो एक त्वरित, सरलीकृत कार्यान्वयन के माध्यम से प्राप्त किया जाता है, और उसी समय उसी एपीआई का उपयोग करना जारी रखता है। उदाहरण के लिए, पिछले साल कोणीय विकास दल ने तुलनात्मक विश्लेषण किया और पाया कि गंदी-जाँच में लगभग 40ms लगते हैं, जबकि O.o () में लगभग 1-2ms लगते हैं (यह पता चलता है कि यह 20-40 गुना तेज़ है)।

जटिल कोड के टन का उपयोग किए बिना डेटा बाइंडिंग! लेकिन इसका मतलब यह भी है कि आपको परिवर्तनों के लिए मॉडल पर सवाल उठाने की ज़रूरत नहीं है!

यदि आप पहले से ही समझते हैं कि O.o क्या कर रहा है (), तो आप तुरंत नई कार्यक्षमता के विवरण के लिए फ्लिप कर सकते हैं, या आप पढ़ सकते हैं कि यह समस्या क्या हल करती है।

हम क्या देखने जा रहे हैं?

जब हम डेटा की निगरानी के बारे में बात करते हैं, तो हमारा मतलब आमतौर पर कई प्रकार के परिवर्तनों पर नज़र रखने से होता है:

देशी जावास्क्रिप्ट वस्तुओं को संशोधित करना
गुण जोड़ें, संशोधित करें या हटाएं
जब डेटा हटा दिया जाता है या किसी सरणी में जोड़ दिया जाता है
प्रोटोटाइप ऑब्जेक्ट में परिवर्तन

डेटा बाइंडिंग के महत्व के बारे में

जब आप किसी मॉडल और दृश्य के इंटरैक्शन को प्रभावित करना शुरू करते हैं तो डेटा बाइंडिंग आपके एप्लिकेशन का एक महत्वपूर्ण हिस्सा बनने लगता है। HTML एक महान घोषणात्मक तंत्र है, लेकिन यह पूरी तरह से स्थिर है। आदर्श रूप से, आप बस अपने डेटा को DOM के साथ जोड़ना चाहते हैं और इसे अद्यतित रखना चाहते हैं। ओओ () के साथ समाधान आपको बहुत समय बचाने की अनुमति देता है, दोहराए जाने वाले कोड के बड़े हिस्से को लिखने की आवश्यकता की कमी के कारण जो डोम को नया डेटा भेज देगा, और इसके विपरीत।

डेटा बाध्यकारी वास्तव में सुविधाजनक है जब आप एक व्यापक उपयोगकर्ता इंटरफ़ेस बनाते हैं जहां आपको अपने मॉडल के विभिन्न गुणों और उन्हें प्रतिबिंबित करने वाले यूआई तत्वों के बीच बड़ी संख्या में कनेक्शन स्थापित करने की आवश्यकता होती है। एसपीए (सिंगल पेज एप्लीकेशन) एप्लिकेशन बनाते समय यह सबसे आम कार्यों में से एक है।

प्रारंभ में, हमारे पास डेटा का अवलोकन करने के लिए कोई तंत्र नहीं था, और हमने इसके लिए विभिन्न जावास्क्रिप्ट चौखटे (या छोटे पुस्तकालयों को लिखा) के लिए जिम्मेदारी को स्थानांतरित कर दिया, जो कि इस दिन के लिए दुनिया के विभिन्न धीमी हैक पर निर्भर है।

आज दुनिया क्या है?

गंदी जाँच

आपने अब तक डेटा बाइंडिंग कहां देखी है? ठीक है, यदि आप अपने वेब एप्लिकेशन (कोणीय, नॉकआउट) बनाने के लिए आधुनिक एमवी * पुस्तकालयों का उपयोग करते हैं, तो हो सकता है कि आपने पहले ही अपने डोम के लिए मॉडल डेटा बाइंडिंग का उपयोग किया हो। इसे मेमोरी में रीफ्रेश करने के लिए, यहां फोन बुक एप्लिकेशन का एक उदाहरण है, जहां हम प्रत्येक फोन नंबर को एक नंबर से एक सूची आइटम से बांधते हैं, और इस प्रकार उनके बीच निरंतर सिंक्रनाइज़ेशन बनाए रखते हैं:

 <html ng-app> <head> ... <script src="angular.js"></script> <script src="controller.js"></script> </head> <body ng-controller="PhoneListCtrl"> <ul> <li ng-repeat="phone in phones"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> </body> </html>

और नियंत्रक के लिए जावास्क्रिप्ट:

 var phonecatApp = angular.module('phonecatApp', []); phonecatApp.controller('PhoneListCtrl', function($scope) { $scope.phones = [ {'name': 'Nexus S', 'snippet': 'Fast just got faster with Nexus S.'}, {'name': 'Motorola XOOM with Wi-Fi', 'snippet': 'The Next, Next Generation tablet.'}, {'name': 'MOTOROLA XOOM', 'snippet': 'The Next, Next Generation tablet.'} ]; });

(नमूना)

जब भी मॉडल डेटा बदलता है, DOM में हमारी सूची अपडेट की जाएगी। कोणीय यह कैसे प्राप्त करता है? ठीक है, पर्दे के पीछे वह करता है जिसे हम गंदा-जाँच कहते हैं।

गंदे-जाँच का मौलिक विचार यह है कि किसी भी समय डेटा को बदला जा सकता है, और पुस्तकालय को यह जाँचने की आवश्यकता है कि यह कैसे बदल गया। एक कोणीय के मामले में, यह उन सभी मॉडल डेटा के राज्यों को पंजीकृत करने से होता है जिन्हें ट्रैक करने की आवश्यकता होती है। वह मॉडल के पिछले मूल्यों के बारे में जानता है और यदि वे बदलते हैं, तो संबंधित घटना होती है। डेवलपर के लिए, मुख्य लाभ यह है कि हम देशी जेएस वस्तुओं के साथ काम करते हैं जो बनाए रखने और गठबंधन करने में आसान होते हैं। दूसरी ओर, इस हद तक कि एल्गोरिथ्म बहुत प्रचंड है, यह एक बहुत महंगा समाधान हो सकता है।

इस तरह के ऑपरेशन की लागत देखी गई वस्तुओं की कुल संख्या के अनुपात में है। मुझे इस तरह की बहुत सारी जाँच करने की आवश्यकता हो सकती है। यह भी संभव है कि मुझे "शायद" मॉडल बदलने पर गंदी-चेकिंग घटनाओं को ट्रिगर करने के लिए एक तरीके की आवश्यकता होगी। इस तरह के समाधानों को लागू करने के लिए काफी कुछ तरकीबें हैं, जो रूपरेखा का सहारा लेती हैं। यह अभी भी स्पष्ट नहीं है कि क्या यह निर्णय ध्यान में आएगा।

उदाहरण के लिए, वेब पारिस्थितिकी तंत्र में अपने घोषणात्मक तंत्र को सुधारने और विकसित करने के अधिक अवसर होने चाहिए

बस्तियों / गेटर्स के माध्यम से बाहरी पहुंच वाले कंटेनरों पर आधारित मॉडल के सिस्टम
ऑटोसव सिस्टम (IndexedDB या लोकलस्टोरेज में परिवर्तन सहेजना)
कंटेनर ऑब्जेक्ट्स (उदा। बैकबोन, एम्बर)

कंटेनर ऑब्जेक्ट एक डेटा स्टोरेज मैकेनिज़्म है जिसमें फ्रेमवर्क उन ऑब्जेक्ट्स को बनाता है जो डेटा को अपने भीतर स्टोर करते हैं, जिस तक एक्सेस एक्सेसर्स (गेटर्स / सेटर) का उपयोग करके प्रदान किया जाता है, और इसके किसी भी परिवर्तन की सदस्यता लेने की क्षमता को भी लागू करता है। यह बहुत अच्छी तरह से काम करता है: एल्गोरिथ्म बहुत तेजी से काम प्रदान करता है। एम्बर में ऐसी वस्तुओं का उपयोग करने का एक उदाहरण नीचे पाया जा सकता है:

 // - MyApp.president = Ember.Object.create({ name: "Barak Obama" }); MyApp.country = Ember.Object.create({ //  "Binding"     Ember  , //        presidentNameBinding: "MyApp.president.name" }); // ,    Ember   MyApp.country.get("presidentName"); // " " //      , // ..     .

इस मामले में परिवर्तनों का पता लगाने की लागत उन गुणों की संख्या के अनुपात में है जो बदल रहे हैं। एक और समस्या यह है कि आप विभिन्न प्रकार की वस्तुओं का उपयोग करते हैं। सीधे शब्दों में कहें, तो आप सर्वर से प्राप्त डेटा को एक ऑब्जर्वेबल ऑब्जेक्ट में स्थापित करने के लिए कनवर्ट करते हैं।

यह विशेष रूप से मौजूदा JS कोड के साथ संगत नहीं है, जैसा कि अधिकांश कोड मानते हैं कि यह साधारण डेटा (कंटेनर ऑब्जेक्ट में लिपटे नहीं, आदि ) के साथ बातचीत कर सकता है, लेकिन इन विशेष वस्तुओं के साथ नहीं।

Object.observe का परिचय ()

यह वास्तव में अच्छा होगा यदि हम इन दो ब्रह्मांडों से सर्वश्रेष्ठ प्राप्त कर सकते हैं: साधारण वस्तुओं (देशी जावास्क्रिप्ट वस्तुओं) के समर्थन के साथ डेटा परिवर्तनों का निरीक्षण करने और गंदे-जाँच को हटाने का अवसर लें, और इसके बजाय कुछ एल्गोरिदम को अच्छे से जोड़ें विशेषताओं। कोई है जो इन सभी सकारात्मक गुणों को मिलाएगा और मंच में बनाया जाएगा। तो, मिलते हैं - Object.observe (), उपयोग के लिए तैयार!

यह हमें एक वस्तु का निरीक्षण करने, गुणों को बदलने और परिवर्तन रिपोर्ट के माध्यम से बदलाव का निरीक्षण करने की अनुमति देता है। लेकिन पर्याप्त सिद्धांत, चलो कोड को देखो!

Object.observe () और Object.unobserve ()

आइए कल्पना करें कि हमारे पास एक जेएस ऑब्जेक्ट है जो मॉडल का प्रतिनिधित्व करता है:

 //       var todoModel = { label: 'Default', completed: false };

हम एक रिटर्न फंक्शन भी घोषित कर सकते हैं जिसे ऑब्जेक्ट में परिवर्तन होते ही कॉल किया जाएगा

 function observer(changes){ changes.forEach(function(change, i){ console.log('what property changed? ' + change.name); console.log('how did it change? ' + change.type); console.log('whats the current value? ' + change.object[change.name]); console.log(change); // all changes }); }

नोट: जब ऑब्जर्वर पर रिटर्न फ़ंक्शन को कॉल किया जाता है, तो देखी गई वस्तुओं को कई बार बदला जा सकता है, इसलिए प्रत्येक परिवर्तन के लिए, नए मूल्य और वर्तमान मूल्य आवश्यक रूप से समान नहीं होते हैं।

हम ओओ () का उपयोग करके इस तरह के बदलावों का पालन कर सकते हैं, पहले दिए गए तर्क के रूप में देखी गई वस्तु को पारित कर सकते हैं और दूसरे के रूप में दिए गए फ़ंक्शन को:

 Object.observe(todoModel, observer);

आइए हमारे मॉडल के साथ कुछ करने की कोशिश करें:

 todoModel.label = 'Buy some more milk';

कंसोल को देखें, हमें कई उपयोगी जानकारी मिली! हम जानते हैं कि कौन सी संपत्ति बदल गई है, इसे कैसे बदल दिया गया है, और इसे किस नए मूल्य को सौंपा गया है।

वाह! अलविदा, गंदा-जाँच! आपके मकबरे पर शिलालेख कॉमिक सैंस द्वारा उकेरा जाएगा। आइए दूसरी संपत्ति बदलें। इस बार पूर्ण:

 todoModel.completeBy = '01/01/2014';

जैसा कि हम देखते हैं, हमने फिर से परिवर्तन पर एक रिपोर्ट प्राप्त की:

ठीक है, अब क्या होगा अगर हम अपनी वस्तु से "पूर्ण" संपत्ति को हटाने का निर्णय लेते हैं:

 delete todoModel.completed;

अब, जैसा कि हम देख सकते हैं, परिवर्तन रिपोर्ट में विलोपन की जानकारी शामिल है। जैसा कि अपेक्षित था, नया संपत्ति मूल्य अब अपरिभाषित है। तो, अब हम जानते हैं कि हम ट्रैक कर सकते हैं जब नई संपत्तियों को जोड़ा गया है या हटाया गया है। सीधे शब्दों में कहें, एक वस्तु के कई गुण ("नया", "हटा दिया गया", "पुन: कॉन्फ़िगर किया गया") और इसके प्रोटोटाइप श्रृंखला।

किसी भी निगरानी प्रणाली की तरह, वस्तु में परिवर्तन की निगरानी को रोकने के लिए एक तरीका होना चाहिए। हमारे मामले में, यह Object.unobserve () है, जिसमें Oo () के समान ही हस्ताक्षर हैं, लेकिन इन्हें इस प्रकार कहा जा सकता है:

 Object.unobserve(todoModel, observer);

जैसा कि हम नीचे देख सकते हैं, अंतिम पद्धति को कॉल करने के बाद किए गए कोई भी परिवर्तन अब कंसोल में परिवर्तनों की रिपोर्ट प्रदर्शित नहीं करेंगे।

गुणों पर ध्यान दें

इसलिए, जब हम मूल बातों से परिचित हो गए, तो आइए, अवलोकन की गई वस्तु के परिवर्तनों की सूची पर वापस जाएँ।

 Object.observe(obj, callback, opt_acceptList)

आइए एक उदाहरण पर चलते हैं कि यह कैसे उपयोग किया जा सकता है:

 //     ,       var todoModel = { label: 'Default', completed: false }; //        // ,    function observer(changes){ changes.forEach(function(change, i){ console.log(change); }) }; //         , //    ,    Object.observe(todoModel, observer, ['delete']); //        //      todoModel.label = 'Buy some milk'; //  ,    !

अब, यदि हम "लेबल" प्रॉपर्टी को हटा देते हैं, तो बदलाव के बारे में एक अधिसूचना आएगी:

 delete todoModel.label;

यदि आप Oo () के लिए लागू प्रकारों की सूची निर्दिष्ट नहीं करते हैं, तो डिफ़ॉल्ट रूप से एक "आंतरिक" ऑब्जेक्ट पास होता है जो "जोड़ें", "अपडेट", "हटाएं", "पुन: कॉन्फ़िगर करें", "preventExtensions" (यदि ऑब्जेक्ट को बदला नहीं जा सकता है) को नियंत्रित करता है। सर्वनाश)।

अधिसूचना

ओओ () में, सूचनाओं (अलर्ट) की अवधारणा भी है। आपके फोन पर आने वाली कष्टप्रद चीजों से उनका कोई लेना-देना नहीं है, वे बहुत अधिक उपयोगी हैं। सूचनाएं म्यूटेशन ऑब्जर्वर (और zag2art से हब पर एक अद्भुत लेख ) के समान हैं। वे माइक्रोटेस्क के पूरा होने के दौरान होते हैं। एक ब्राउज़र संदर्भ में, वे लगभग हमेशा वर्तमान ईवेंट हैंडलर के अंत में होते हैं।

इस तरह का समय इस तथ्य के कारण बेहद सुविधाजनक है कि मुख्य कार्य पहले ही पूरा हो चुका है, और पर्यवेक्षक मुख्य तर्क के साथ हस्तक्षेप किए बिना अपना काम करना शुरू कर सकते हैं। यह एक शानदार कदम-दर-चरण ईवेंट हैंडलिंग मॉडल है।

अलर्ट का उपयोग करके बनाया गया वर्कफ़्लो कुछ इस तरह दिखता है:

और अब आइए एक उदाहरण देखें कि किसी वस्तु की स्थिति में बदलाव के बारे में सूचनाओं का उपयोग कैसे किया जा सकता है। टिप्पणियों पर ध्यान दें:

 //    var model = { a: {} }; //   ,      //     var _b = 2; //    "b"    "a" //       Object.defineProperty(model.a, 'b', { get: function () { return _b; }, set: function (b) { //   "b"   , //       // ,   .    //     Object.getNotifier(this).notify({ type: 'update', name: 'b', oldValue: _b }); //        //  -   console.log('set', b); _b = b; } }); //    function observer(changes) { changes.forEach(function (change, i) { console.log(change); }) } //     model.a Object.observe(model.a, observer);

जब डेटा बदलता है तो हम एक चेतावनी प्रदर्शित करते हैं ("अपडेट"), और कुछ भी, वास्तव में, अगर यह कॉल करने के लिए नोटिफ़ायर को सूचित किया जाता है। नोटिफ़िकेशन () विधि।

वेब विकास में वर्षों के अनुभव ने हमें सिखाया है कि तुल्यकालिक संचालन पहली चीजें हैं जो हम सीखते हैं इस तरह के संचालन का प्रबंधन करना सबसे आसान है। समस्या यह है कि यह एक संभावित खतरनाक प्रसंस्करण मॉडल (डेटा प्रोसेसिंग मॉडल, आदि ) बनाता है। यदि आप कोड लिखते हैं और कहते हैं, "किसी वस्तु की संपत्ति को अपडेट करें" लिखें, तो आप शायद ही यह चाहते हैं कि फ़ंक्शन के बीच में किसी भी मनमाने कोड को ट्रिगर किया जा सके जो वह चाहता है।

पर्यवेक्षक की ओर से भी, आप नहीं चाहेंगे कि कोई भी तृतीय-पक्ष फ़ंक्शन वर्तमान फ़ंक्शन के बीच से बुलाया जाए, आदि। फ़ंक्शन कॉल स्थानों की असंगति और विखंडन कष्टप्रद है, है ना? और इस अधिक त्रुटि जांचों, और अन्य स्थितियों में जोड़ें जो इस दृष्टिकोण के साथ जीवन को जटिल बना सकती हैं। और नतीजतन, हम देखते हैं कि इस तरह के मॉडल के साथ काम करना वास्तव में मुश्किल है। अतुल्यकालिक दृष्टिकोण को समझना अधिक कठिन है, लेकिन फिर भी, आज, इससे बेहतर कुछ नहीं है।

इस समस्या का समाधान सिंथेटिक रिकॉर्ड परिवर्तन हो सकता है।

अभिलेखों का सिंथेटिक परिवर्तन

सीधे शब्दों में कहें, यदि आपको एक एक्सेसर या एक गणना की गई संपत्ति तक पहुंचने की आवश्यकता है (आप यहां की संपत्तियों के बारे में पढ़ सकते हैं), तो आप इस संपत्ति में बदलाव होने पर एक अलर्ट बनाने के लिए जिम्मेदार हैं। यह थोड़ा काम जोड़ता है, लेकिन एक असुविधा के बजाय एक विशेषता है। आपकी सूचनाओं को अन्य संपत्तियों में बदलाव की सूचना के साथ दिया जाएगा और उनके निम्नलिखित रूप होंगे:

एक्सेसरों की निगरानी और गणना की गई संपत्तियों में परिवर्तन नोटिफायर का उपयोग करके किया जा सकता है। नोट (यह ऑब्जेक्ट में भी शामिल है। विनिर्देशन)। कई परिवर्तन निगरानी प्रणालियों को बदले हुए मूल्यों के बारे में जानकारी प्रदान करनी चाहिए, और स्पष्ट रूप से, हमारे पास ऐसा करने के लिए कुछ तरीके हैं। Object.observe हम पर "सही" रास्ता नहीं थोपता।

मुझे लगता है कि वेब डेवलपर गणना की गई संपत्तियों में बदलाव की सूचना देने में मदद के लिए पुस्तकालयों से कुछ तैयार किए गए समाधानों की अपेक्षा कर सकते हैं।

अब अगले उदाहरण पर चलते हैं, जो सर्किल वर्ग के निर्माण को दर्शाता है। लब्बोलुआब यह है कि हमारे पास एक सर्कल और इसकी "त्रिज्या" संपत्ति है। हमारे उदाहरण में, त्रिज्या एक सहायक होगा, और जब इसका मूल्य बदलता है, तो एक घटना इस बारे में सूचित करेगी। यह ऑब्जेक्ट के परिवर्तन के बारे में अन्य सभी सूचनाओं के साथ दिया जाएगा।

आइए देखें कि हमारा कोड देवटूल में कैसे काम करेगा:

 function Circle(r) { var radius = r; var notifier = Object.getNotifier(this); function notifyAreaAndRadius(radius) { notifier.notify({ type: 'update', name: 'radius', oldValue: radius }) notifier.notify({ type: 'update', name: 'area', oldValue: Math.pow(radius * Math.PI, 2) }); } Object.defineProperty(this, 'radius', { get: function() { return radius; }, set: function(r) { if (radius === r) return; notifyAreaAndRadius(radius); radius = r; } }); Object.defineProperty(this, 'area', { get: function() { return Math.pow(radius, 2) * Math.PI; }, set: function(a) { r = Math.sqrt(a)/Math.PI; notifyAreaAndRadius(radius); radius = r; } }); } function observer(changes){ changes.forEach(function(change, i){ console.log(change); }) }

गौण गुण

गौण के गुणों पर एक छोटा नोट। इससे पहले, हमने केवल संपत्ति मूल्यों में परिवर्तन देखने के बारे में बात की थी, लेकिन एक्सेसर्स या गणना की गई संपत्तियों के लिए इस तरह के व्यवहार का उल्लेख नहीं किया था। इसका कारण यह है कि जावास्क्रिप्ट में वास्तव में एक्सेसर्स के लिए मूल्य में परिवर्तन को ट्रैक करने की क्षमता नहीं है, क्योंकि वास्तव में वे केवल कार्यों का एक संग्रह है।

यदि आपने पहले से ही एक्सेसर्स के साथ काम किया है, तो आप कल्पना कर सकते हैं कि वे कैसे काम करते हैं: वे बस कार्यों का एक सेट प्रदान करते हैं जो गुणों तक पहुंच प्रदान करते हैं, और इससे अधिक कुछ नहीं।

एकल रिटर्न फ़ंक्शन के साथ कई ऑब्जेक्ट्स की निगरानी करना

ओओ () के साथ काम करते समय एक और संभावित पैटर्न एकल रिटर्न फ़ंक्शन के साथ ऑब्जेक्ट अवलोकन का उपयोग करने की धारणा है। यह आपको किसी भी संख्या में विभिन्न वस्तुओं के लिए एक पर्यवेक्षक के रूप में इस फ़ंक्शन का उपयोग करने की अनुमति देता है। लौटाया गया कार्य हर बार उन सभी वस्तुओं के लिए परिवर्तनों का एक पूरा सेट प्रदान करेगा जिन्हें वह ट्रैक करता है (यह सभी माइक्रोटेस्क के अंत में होगा, म्यूटेशन ऑब्जर्वर देखें)।

बड़े पैमाने पर बदलाव

शायद आप वास्तव में बदसूरत परियोजना पर काम कर रहे हैं और नियमित रूप से बड़े पैमाने पर परिवर्तनों से निपटना है।

Oo () इसके लिए दो विशिष्ट कार्यों के साथ मदद करता है: notifier.performChange () और notifier.notify (), जिसके बारे में हमने पहले ही बात की थी।

आइए एक उदाहरण देखें कि कुछ गणितीय कार्यों (गुणा, वृद्धि, वेतन वृद्धि) का उपयोग करके थिंगी वस्तु का उपयोग करके बड़े पैमाने पर परिवर्तन कैसे वर्णित किए जा सकते हैं। हर बार जब हम किसी फ़ंक्शन का उपयोग करते हैं, तो यह सिस्टम को बताता है कि काम के संग्रह में एक निश्चित प्रकार का परिवर्तन शामिल है।

उदाहरण के लिए: notifier.performChange ('foo', PerformFooChangeFn);

 function Thingy(a, b, c) { this.a = a; this.b = b; } Thingy.MULTIPLY = 'multiply'; Thingy.INCREMENT = 'increment'; Thingy.INCREMENT_AND_MULTIPLY = 'incrementAndMultiply'; Thingy.prototype = { increment: function(amount) { var notifier = Object.getNotifier(this); //  ,       //   : // notifier.performChange('foo', performFooChangeFn); // notifier.notify('foo', 'fooChangeRecord'); notifier.performChange(Thingy.INCREMENT, function() { this.a += amount; this.b += amount; }, this); notifier.notify({ object: this, type: Thingy.INCREMENT, incremented: amount }); }, multiply: function(amount) { var notifier = Object.getNotifier(this); notifier.performChange(Thingy.MULTIPLY, function() { this.a *= amount; this.b *= amount; }, this); notifier.notify({ object: this, type: Thingy.MULTIPLY, multiplied: amount }); }, incrementAndMultiply: function(incAmount, multAmount) { var notifier = Object.getNotifier(this); notifier.performChange(Thingy.INCREMENT_AND_MULTIPLY, function() { this.increment(incAmount); this.multiply(multAmount); }, this); notifier.notify({ object: this, type: Thingy.INCREMENT_AND_MULTIPLY, incremented: incAmount, multiplied: multAmount }); } }

हम अपनी सुविधा के लिए दो पर्यवेक्षकों की घोषणा करते हैं: एक सभी परिवर्तनों का अवलोकन करने के लिए और दूसरा उन विशिष्ट परिवर्तनों की रिपोर्टिंग के लिए जिन्हें हमने ऊपर वर्णित किया है (Thingy.INCREMENT, Thingy.MULTIPLY, Thingy.INCREMENT_AND_MIPIPLY)।

 var observer, observer2 = { records: undefined, callbackCount: 0, reset: function() { this.records = undefined; this.callbackCount = 0; }, }; observer.callback = function(r) { console.log(r); observer.records = r; observer.callbackCount++; }; observer2.callback = function(r){ console.log('Observer 2', r); } Thingy.observe = function(thingy, callback) { // Object.observe(obj, callback, optAcceptList) Object.observe(thingy, callback, [Thingy.INCREMENT, Thingy.MULTIPLY, Thingy.INCREMENT_AND_MULTIPLY, 'update']); } Thingy.unobserve = function(thingy, callback) { Object.unobserve(thingy); }

खैर, अब हम कोड के साथ थोड़ा खेल सकते हैं। आइए नई थिंगी की घोषणा करें:

 var thingy = new Thingy(2, 4);

हमने इसे अवलोकन के तहत रखा और कई बदलाव किए। कूल, कूल!

 //   thingy (,     "  ") Object.observe(thingy, observer.callback); Thingy.observe(thingy, observer2.callback); //  ,    thingy thingy.increment(3); // { a: 5, b: 7 } thingy.b++; // { a: 5, b: 8 } thingy.multiply(2); // { a: 10, b: 16 } thingy.a++; // { a: 11, b: 16 } thingy.incrementAndMultiply(2, 2); // { a: 26, b: 36 }

"प्रदर्शन किए गए फ़ंक्शन" के अंदर सब कुछ "बड़ी संख्या में परिवर्तन" के साथ काम माना जाएगा। पर्यवेक्षक जो "बड़े बदलाव" को स्वीकार करते हैं, उन्हें ही प्राप्त होगा। शेष पर्यवेक्षकों को शेष परिवर्तन प्राप्त होंगे।

ऐरे मॉनिटरिंग

हमने वस्तुओं में परिवर्तन देखने के बारे में बात की, लेकिन सरणियों के बारे में क्या? बड़ा अच्छा सवाल! वैसे, हर बार जब वे मेरे लिए "महान प्रश्न" कहते हैं, तो मैं कभी जवाब नहीं सुनता, क्योंकि इतने अच्छे सवाल पर खुद को बधाई देने पर भी ध्यान केंद्रित किया गया, लेकिन हम विचलित थे :) हमारे पास सरणियों के साथ काम करने के नए तरीके हैं!

Array.observe()

एक ऐसी विधि है जो ऑब्जेक्ट में बड़ी संख्या में परिवर्तन के साथ ही काम करती है, उदाहरण के लिए ब्याह, अनशफ्ट, या कुछ और जो इसकी लंबाई को बदलता है, जैसे ब्याह।

ऐसा करने के लिए, वह notifier.performChange("splice",...)

यहाँ का उपयोग करता है, जहाँ हम "सरणी" मॉडल का अवलोकन कर रहे हैं और उसी तरह हम परिवर्तनों की सूची को वापस लाते हैं जब मॉडल पर कार्रवाई की जाती है जो इसके डेटा को बदलते हैं:

 var model = ['Buy some milk', 'Learn to code', 'Wear some plaid']; var count = 0; Array.observe(model, function(changeRecords) { count++; console.log('Array observe', changeRecords, count); }); model[0] = 'Teach Paul Lewis to code'; model[1] = 'Channel your inner Paul Irish';

उत्पादकता

Oo () की कम्प्यूटेशनल गति को कैशे रीड स्पीड माना जा सकता है। आम तौर पर, एक कैश एक बढ़िया विकल्प है जब (महत्व के क्रम में):

लिखने की आवृत्ति से अधिक दर पढ़ें
जब आपके पास एक कैश बनाने का अवसर होगा जो रीड ऑपरेशन पर एक निश्चित समय के लिए लिखने का समय बलिदान करेगा
रिकॉर्डिंग संचालन के लिए एक निरंतर देरी का समय स्वीकार्य है

ऊ () पहले जैसे उपयोग के मामलों के लिए बनाया गया है।

डर्टी-चेकिंग के लिए आवश्यक है कि आप उन सभी डेटा की प्रतियाँ रखें जो आप देख रहे हैं। इसका मतलब है कि आपको एक मेमोरी ड्रेन मिलती है जो आपको ओओ () के साथ कभी नहीं मिलती है। डर्टी-चेकिंग एक तरह का गैग है, जो एक तरह की अनावश्यक अमूर्तता भी पैदा करता है, जिसके परिणामस्वरूप अनुप्रयोगों में अनावश्यक जटिलता पैदा होती है।

क्यों?क्योंकि हर बार डेटा को बदला जा सकता है। यह इस तरह के सत्यापन का एक विश्वसनीय तरीका नहीं है और इसमें महत्वपूर्ण कमियां हैं, उदाहरण के लिए, रेंडरिंग कोड (आदि) और कम्प्यूटेशनल कोड (आखिरकार, सभी जानते हैं कि जेएस इंटरफ़ेस और गणना दोनों के लिए एक धारा का उपयोग करता है?)। डर्टी-चेकिंग के लिए एक वैश्विक पर्यवेक्षक रजिस्ट्री के कनेक्शन की भी आवश्यकता होती है, जिससे मेमोरी लीक आदि के जोखिम पैदा होते हैं, जो ओओ () से बचता है।

आइए कुछ नंबरों पर एक नजर डालते हैं।

नीचे दिए गए मानदंड ( GitHub पर उपलब्ध ) हमें गंदे-जाँच और ऊ () की तुलना करने की अनुमति देते हैं। उन्हें अनुपस्थित ऑब्जर्व्ड-ऑब्जेक्ट-सेट-साइज़ और ऑर्डिनेट नंबर-ऑफ-म्यूटेशन के साथ एक ग्राफ के रूप में प्रस्तुत किया जाता है।

मुख्य परिणाम यह है कि गंदी जाँच का प्रदर्शन देखी गई वस्तुओं की संख्या के लिए आनुपातिक है, जबकि ऊ () का प्रदर्शन हमारे द्वारा किए गए उत्परिवर्तन की संख्या के लिए आनुपातिक है।

गंदी जाँच

Object.observe ()

पुराने ब्राउज़रों के लिए Object.observe ()

क्रोम 36 बीटा में कूल, ओओ () का उपयोग किया जा सकता है, लेकिन अन्य ब्राउज़रों के बारे में क्या? हम आपकी मदद करेंगे। ऑबजर्व-जेएस पॉलिमर के लिए एक बहुलक है जो प्रकट होते ही देशी कार्यान्वयन का उपयोग करेगा, लेकिन इसके शीर्ष पर कुछ उपयोगी चीजें भी शामिल हैं। वह सुझाव देता है कि वस्तुओं के सामान्यीकृत दृष्टिकोण का उपयोग किया जाए और सामान्य परिवर्तनों पर रिपोर्ट की जाए। यहां कुछ उपयोगी चीजें हैं जो वह प्रदान करता है:

1) आप "पथ" देख सकते हैं। इसका मतलब है कि आप चयनित वस्तु के "अरे, मैं foo.bar.baz" का पालन करना चाहता हूं और जैसे ही यह होता है, यह आपको गुणों में बदलाव के बारे में सूचित करेगा। यदि पथ अनुपलब्ध है, तो यह वापस आ जाएगा undefined

।

किसी निर्दिष्ट ऑब्जेक्ट के पथ के साथ मान देखने का एक उदाहरण:

 var obj = { foo: { bar: 'baz' } }; var observer = new PathObserver(obj, 'foo.bar'); observer.open(function(newValue, oldValue) { // ,   obj.foo.bar   });

2) यह आपको सरणियों की लंबाई में बदलाव के बारे में सूचित करेगा। हमारे मामले में सरणी की लंबाई बदलना, बंटवारे के संचालन की न्यूनतम संख्या है जिसे हमें पुराने राज्य से नए (परिवर्तित) एक में स्थानांतरित करने के लिए सरणी के साथ करना होगा।

सरणी के संबंध में ऐसे परिवर्तनों की अधिसूचना का एक उदाहरण, जैसे कि ब्याह कार्यों का न्यूनतम सेट:

 var arr = [0, 1, 2, 4]; var observer = new ArrayObserver(arr); observer.open(function(splices) { //      splices.forEach(function(splice) { splice.index; //  ,    splice.removed; //  ,   ,    splice.addedCount; //  ,    }); });

चौखटे और Object.observe ()

जैसा कि हमने कहा है, ओओ () इस नवाचार का समर्थन करने वाले ब्राउज़रों में अपने डेटा-बाइंडिंग तंत्र के प्रदर्शन को बेहतर बनाने के लिए चौखटे और पुस्तकालय देता है।

एम्बर से येहुदा काट्ज़ और एरिक ब्रिन ने एम्बर के आगामी रोडमैप में ओओ () समर्थन को मंजूरी दी है। मिसको हर्वे (एंगुलर से) ने परिवर्तन का पता लगाने में सुधार के बारे में अपने कोणीय 2.0 दस्तावेज के मसौदे में भी लिखा।

एम्बर से येहुदा काट्ज़ और एरिक ब्रायन ने पुष्टि की कि ओओ () के लिए समर्थन जोड़ना एम्बर के निकट अवधि के रोडमैप में है। एंगुलर के मिस्को हर्वी ने एंगुलर 2.0 के बेहतर बदलाव का पता लगाने पर एक डिज़ाइन डॉक लिखा। मुझे लगता है कि इस दिशा में आंदोलन की उम्मीद करना सबसे अधिक संभावना है जब यह सुविधा क्रोम 36 स्थिर पैकेज में दिखाई देती है।

परिणाम

ओओ () वेब प्लेटफॉर्म के लिए एक शक्तिशाली नवाचार है जिसे आप आज उपयोग कर सकते हैं।

हमें उम्मीद है कि जल्द ही यह कार्यक्षमता अन्य ब्राउज़रों में दिखाई देगी, जिससे जावास्क्रिप्ट फ्रेमवर्क को वस्तुओं की नई मूल विशेषताओं के साथ कुछ प्रदर्शन लाभ प्राप्त करने और उनकी निगरानी करने की अनुमति मिलेगी। Chrome 36 के अलावा, यह कार्यक्षमता आगामी ओपेरा रिलीज़ में भी उपलब्ध होगी।

खैर, अब आप जेएस फ्रेमवर्क के लेखकों को Object.observe () के बारे में बता सकते हैं और वे इसका उपयोग अपने डेटा-बाइंडिंग तंत्र को बेहतर बनाने के लिए कैसे कर सकते हैं।

लगता है कि वाकई में अद्भुत समय आने वाला है!

उपयोग किए गए संसाधन:

UPD: "बाइंडिंग" को "बाइंडिंग" में बदल दिया

UPD 2: टिप्पणियों का अनुवाद रूसी

यूपीडी 3 में किया गया: सही व्याकरण और विराम चिह्नों को सही किया। धन्यवाद मिंगुन

ऑब्जेक्ट के साथ डेटा बाइंडिंग क्रांति।

परिचय

हम क्या देखने जा रहे हैं?

डेटा बाइंडिंग के महत्व के बारे में

आज दुनिया क्या है?

गंदी जाँच

Object.observe का परिचय ()

Object.observe () और Object.unobserve ()

गुणों पर ध्यान दें

अधिसूचना

अभिलेखों का सिंथेटिक परिवर्तन

गौण गुण

एकल रिटर्न फ़ंक्शन के साथ कई ऑब्जेक्ट्स की निगरानी करना

बड़े पैमाने पर बदलाव

ऐरे मॉनिटरिंग

उत्पादकता

गंदी जाँच

Object.observe ()

पुराने ब्राउज़रों के लिए Object.observe ()

चौखटे और Object.observe ()

परिणाम

उपयोग किए गए संसाधन:

More articles: