JavaScript में डिज़ाइन पैटर्न का उपयोग करना: पैटर्न बनाना

हाय, हेब्र!
मुझे यह जानकर आश्चर्य हुआ कि हब पर इस विषय पर कोई विस्तृत लेख नहीं था, जिसने तुरंत मुझे इस प्रमुख अन्याय को ठीक करने के लिए प्रेरित किया।

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

एकाकी वस्तु

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

var app = { property1: 'value', property2: 'value', ... method1: function () { ... }, ... } 

इस विधि के अपने फायदे और नुकसान दोनों हैं। यह वर्णन करना आसान है, बहुत से लोग किसी भी पैटर्न के अस्तित्व को महसूस किए बिना इसका उपयोग करते हैं और लेखन का यह रूप किसी भी jpgScript डेवलपर के लिए समझ में आएगा। लेकिन इसमें एक महत्वपूर्ण खामी भी है: सिंगलटन पैटर्न का मुख्य उद्देश्य वैश्विक चर का उपयोग किए बिना ऑब्जेक्ट तक पहुंच प्रदान करना है, और यह विधि केवल वर्तमान दायरे में ऐप चर तक पहुंच प्रदान करती है। इसका मतलब यह है कि हम एप्लिकेशन ऑब्जेक्ट को एप्लिकेशन में कहीं से भी तभी एक्सेस कर सकते हैं जब वह वैश्विक हो। सबसे अधिक बार यह बेहद अस्वीकार्य है, javaScript में विकास की एक अच्छी शैली अधिकतम एक वैश्विक चर का उपयोग करना है, जिसमें आपको जिस चीज की आवश्यकता होती है वह सब कुछ समझाया जाता है। और इसका मतलब है कि हम आवेदन में एक बार में उपरोक्त दृष्टिकोण का उपयोग कर सकते हैं।
दूसरी विधि थोड़ी अधिक जटिल है, लेकिन अधिक सार्वभौमिक है:

 function SomeFunction () { if (typeof (SomeFunction.instance) == 'object') { return SomeFunction.instance; } this.property1 = 'value'; this.property2 = 'value'; SomeFunction.instance = this; return this; } SomeFunction.prototype.method1 = function () { } 

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

 var someObj = new SomeFunction (); 

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

 function SomeFunction () { var instance; SomeFunction = function () { return instance; } this.property1 = 'value'; this.property2 = 'value'; instance = this; } 

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

 function SomeFunction () { var instance; SomeFunction = function () { return instance; } SomeFunction.prototype = this; instance = new SomeFunction (); instance.constructor = SomeFunction; instance.property1 = 'value'; instance.property2 = 'value'; return instance; } 

कुंवारा वर्णन करने का यह तरीका उपरोक्त सभी अवगुणों से रहित है और सार्वभौमिक उपयोग के लिए काफी उपयुक्त है, हालाँकि, किसी बंद का उपयोग करते हुए कुंवारे का वर्णन करने की विधियाँ आवश्यकता के अनुरूप काम नहीं करेंगी, लेकिन यदि आप उन्हें थोड़ा संशोधित करते हैं और फ़ंक्शन द्वारा बनाए गए क्लोजर से वेरिएबल को निकालते हैं, जो फंक्शन में उपयोग किए जाने वाले फ़ंक्शन से ही होता है। तब समस्या हल हो जाएगी:

 define([], function () { var instance = null; function SomeFunction() { if (instance) { return instance; } this.property1 = 'value'; this.property2 = 'value'; instance = this; }; return SomeFunction; }); 

फैक्टरी विधि

कारखाने विधि के दो मुख्य लक्ष्य हैं:
1) स्पष्ट रूप से विशिष्ट वर्गों का उपयोग न करें
2) आमतौर पर इस्तेमाल की जाने वाली वस्तु आरंभीकरण विधियों को एक साथ मिलाएं
फैक्टरी विधि का सबसे सरल कार्यान्वयन एक उदाहरण है:

 function Foo () { //... } function Bar () { //... } function factory (type) { switch (type) { case 'foo': return new Foo(); case 'bar': return new Bar(); } } 

तदनुसार, वस्तुओं का निर्माण इस तरह दिखेगा:

 foo = factory('foo'); bar = factory('bar'); 

आप अधिक सुरुचिपूर्ण समाधान का उपयोग कर सकते हैं:

 function PetFactory() { }; PetFactory.register = function(name, PetConstructor) { if (name instanceof Function) { PetConstructor = name; name = null; } if (!(PetConstructor instanceof Function)) { throw { name: 'Error', message: 'PetConstructor is not function' } } this[name || PetConstructor.name] = PetConstructor; }; PetFactory.create = function(petName) { var PetConstructor = this[petName]; if (!(PetConstructor instanceof Function)) { throw { name: 'Error', message: 'constructor "' + petName + '" undefined' } } return new PetConstructor(); }; 

इस मामले में, हम खुद को उन वर्गों की संख्या तक सीमित नहीं करते हैं जो कारखाने उत्पन्न कर सकते हैं, हम उन्हें इस तरह से जोड़ सकते हैं जैसे कि हम इस तरह से करते हैं:

 PetFactory.register('dog', function() { this.say = function () { console.log('gav'); } }); 

अच्छी तरह से या उस तरह:

 function Cat() { } Cat.prototype.say = function () { console.log('meow'); } PetFactory.register(Cat); 

सार कारखाना

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

 function BluePopup () { //   } BluePopup.prototype.attach = function (elemens) { //  ui-   } BluePopupFactory.register('popup', BluePopup); function BluePopupButton () { //      } BluePopupButton.prototype.setText = function (text) { //    } BluePopupFactory.register('button', BluePopupButton); function BluePopupTitle () { //     } BluePopupTitle.prototype.setText = function (text) { //   } BluePopupFactory.register('title', BluePopupTitle); 

संभवतः हमारे पास एक निश्चित वर्ग होना चाहिए जो इंटरफ़ेस तत्वों के लिए जिम्मेदार है।

 function UI () { //,   ui- } 

और हम createPopup विधि को इसमें जोड़ देंगे:

 UI.createPopup = function (factory) { var popup = factory.create('popup'), buttonOk = factory.create('button'), buttonCancel = factory.create('button'), title = factory.create('title'); buttonOk.setText('OK'); buttonCancel.setText('Cancel'); title.setText('Untitled'); popup.attach([buttonOk, buttonCancel, title]); } 

जैसा कि आप देख सकते हैं createPopup कारखाने को एक तर्क के रूप में लेता है, पॉपअप और उसके लिए एक शीर्षक के साथ बटन बनाता है, और फिर उन्हें विंडो में संलग्न करता है।
उसके बाद, आप इस विधि का उपयोग इस तरह कर सकते हैं:

 var newPopup = UI.createPopup(BluePopupFactory); 

तदनुसार, कारखानों की असीमित संख्या का वर्णन करना और अगली पॉप-अप विंडो बनाते समय आवश्यक एक को स्थानांतरित करना संभव है।