जावास्क्रिप्ट में ब्राउज़र पैटर्न और कॉल संदर्भ

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

साइटों और वेब अनुप्रयोगों में ब्राउज़र का उपयोग करना सुविधाजनक है, इसलिए वेब वातावरण के लिए सबसे लोकप्रिय भाषा - जावास्क्रिप्ट का उपयोग करके इसे लागू करना तर्कसंगत है।

Observable = function() {  this.observers = []; } Observable.prototype.deliver = function(data) {  for (var i in this.observers) {   this.observers[i](data);  } } Function.prototype.subscribe = function(observable) {  observable.observers.push(this);  return this; } 

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

 myClass = function() { this.value = 0; //  this.onChange = new Observable(); //  } myClass.prototype.change = function(new_value) { this.value = new_value; this.onChange.deliver(this.value); //  —   } var c = new myClass(); var write_log = function(value) { console.log(value); } write_log.subscribe(c.onChange); 

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

इसलिए, उदाहरण के लिए, निम्न निर्माण कार्य नहीं करना चाहिए:

 myClass = function() { this.value = 0; this.onChange = new Observable(); } myClass.prototype.change = function(new_value) { this.value = new_value; this.onChange.deliver(this.value); } Logger = function(logtype) { this.type = (!!logtype) ? logtype : "alert"; } Logger.prototype.write = function(value) { if (this.type == "console") { console.log(value); return; } alert(value); } var c = new myClass(); var logger = new Logger("console"); logger.write.subscribe(c.onChange); 

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

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

 Observable = function() { //  this.observers = []; } Observable.prototype.deliver =function(data) { for (var i in this.observers) {  this.observers[i].func.call(this.observers[i].context, data); //      } } Function.prototype.subscribe = function(observable, context) { var ctx = context || this; //    ,    this «-»,     var observer = { //   ,        context: ctx,  func: this } observable.observers.push(observer); return this; } 

इस प्रकार, काम करने के लिए चरम उदाहरण के लिए, आपको सदस्यता में कॉल के संदर्भ को इंगित करने की आवश्यकता है - लकड़हारा का एक उदाहरण:

 var logger = new Logger("console"); logger.write.subscribe(c.onChange, logger); 

यह काम करता है! और मुझे उम्मीद है कि यह छोटी सी चाल किसी के लिए उपयोगी है।