जावास्क्रिप्ट डिजाइन पैटर्न

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

डिज़ाइन पैटर्न क्या है?

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

डिजाइन पैटर्न की आवश्यकता क्यों है?

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

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

उदाहरण के लिए, यदि आप "डेकोरेटर" पैटर्न का उपयोग करते हैं, तो यह तुरंत उस नए प्रोग्रामर को सूचित करेगा, जो प्रोजेक्ट के बारे में आया था कि कौन से कोड सोल्व्स का एक विशेष कार्य करता है और इसकी आवश्यकता क्यों है। इसके लिए धन्यवाद, ऐसा प्रोग्रामर अपने आंतरिक ढांचे को समझने की कोशिश करने के बजाय कार्यक्रम को हल करने वाले व्यावहारिक कार्यों के लिए अधिक समय दे सकेगा।

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

पैटर्न "मॉड्यूल"

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

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

अन्य प्रोग्रामिंग भाषाओं के विपरीत, जावास्क्रिप्ट में एक्सेस संशोधक नहीं हैं। अर्थात्, चर को निजी या सार्वजनिक घोषित नहीं किया जा सकता है। परिणामस्वरूप, "मॉड्यूल" पैटर्न का उपयोग एन्कैप्सुलेशन की अवधारणा का अनुकरण करने के लिए भी किया जाता है।

इस अवधारणा का उपयोग करने के लिए यह पैटर्न IIFE (तत्काल-इनवॉल्ड फंक्शनल एक्सप्रेशन), क्लोजर और फ़ंक्शन स्कोप का उपयोग करता है। उदाहरण के लिए:

const myModule = (function() {   const privateVariable = 'Hello World';   function privateMethod() {    console.log(privateVariable);  }  return {    publicMethod: function() {      privateMethod();    }  } })(); myModule.publicMethod(); 

चूंकि हमारे पास IIFE है, इसलिए कोड को तुरंत निष्पादित किया जाता है और अभिव्यक्ति द्वारा लौटाए गए ऑब्जेक्ट को निरंतर myModule को सौंपा जाता है। इस तथ्य के कारण कि एक बंद है, लौटी हुई वस्तु को आईआईएफई के अंदर घोषित किए गए कार्यों और चर तक पहुंच है, इसके बाद भी जब आईआईएफई अपना काम पूरा नहीं करता है।

नतीजतन, IIFE के अंदर घोषित चर और कार्य उन तंत्रों से छिपे होते हैं जो उनके लिए बाहरी दृश्यता के दायरे में होते हैं। वे myModule निरंतर की निजी संस्थाएँ myModule ।

यह कोड निष्पादित होने के बाद, myModule इस तरह myModule देगा:

 const myModule = { publicMethod: function() {   privateMethod(); }}; 

यही है, इस स्थिरांक का जिक्र करते हुए, आप सार्वजनिक विधि के सार्वजनिक विधि publicMethod() ऑब्जेक्ट को कॉल कर सकते हैं, जो बदले में, निजी विधि को privateMethod() । उदाहरण के लिए:

 //  'Hello World' module.publicMethod(); 

मॉड्यूल पैटर्न खोलें

रिवीलिंग मॉड्यूल पैटर्न मॉड्यूल पैटर्न का थोड़ा उन्नत संस्करण है जिसे क्रिश्चियन हीलमैन ने प्रस्तावित किया था। "मॉड्यूल" पैटर्न के साथ समस्या यह है कि हमें निजी कार्यों और चर को एक्सेस करने के लिए सार्वजनिक फ़ंक्शन बनाने होंगे।

इस पैटर्न में, हम लौटे हुए ऑब्जेक्ट के गुणों के लिए निजी फ़ंक्शन प्रदान करते हैं जिसे हम सार्वजनिक करना चाहते हैं। इसीलिए इस पैटर्न को "ओपन मॉड्यूल" कहा जाता है। एक उदाहरण पर विचार करें:

 const myRevealingModule = (function() { let privateVar = 'Peter'; const publicVar  = 'Hello World'; function privateFunction() {   console.log('Name: '+ privateVar); } function publicSetName(name) {   privateVar = name; } function publicGetName() {   privateFunction(); } /**    ,     */ return {   setName: publicSetName,   greeting: publicVar,   getName: publicGetName }; })(); myRevealingModule.setName('Mark'); //  Name: Mark myRevealingModule.getName(); 

इस पैटर्न को लागू करने से यह समझना आसान हो जाता है कि मॉड्यूल के कौन से कार्य और चर सार्वजनिक रूप से उपलब्ध हैं, जो कोड पठनीयता में सुधार करने में मदद करता है।

IIFE चलाने के बाद, myRevealingModule इस तरह दिखता है:

 const myRevealingModule = { setName: publicSetName, greeting: publicVar, getName: publicGetName }; 

हम, उदाहरण के लिए, myRevealingModule.setName('Mark') विधि को कॉल कर सकते हैं, जो publicSetName आंतरिक फ़ंक्शन का संदर्भ है। myRevealingModule.getName() विधि आंतरिक फ़ंक्शन publicGetName को संदर्भित publicGetName । उदाहरण के लिए:

 myRevealingModule.setName('Mark'); //  Name: Mark myRevealingModule.getName(); 

"मॉड्यूल" पैटर्न पर "ओपन मॉड्यूल" पैटर्न के लाभों पर विचार करें:

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

ES6 में मॉड्यूल

ES6 मानक जारी होने से पहले, जावास्क्रिप्ट में मॉड्यूल के साथ काम करने के लिए एक मानक उपकरण नहीं था, परिणामस्वरूप, डेवलपर्स को उचित तंत्र को लागू करने के लिए तीसरे पक्ष के पुस्तकालयों या "मॉड्यूल" पैटर्न का उपयोग करना पड़ा। लेकिन ईएस 6 के आगमन के साथ, जावास्क्रिप्ट में एक मानक मॉड्यूल प्रणाली दिखाई दी।

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

▍ निर्यात मॉड्यूल

मॉड्यूल में घोषित फंक्शन या वेरिएबल को एक्सपोर्ट करने के दो तरीके हैं:

• फंक्शन या वेरिएबल घोषित करने से पहले export कीवर्ड जोड़कर एक्सपोर्ट किया जाता है। उदाहरण के लिए:
  
  

   // utils.js export const greeting = 'Hello World'; export function sum(num1, num2) { console.log('Sum:', num1, num2); return num1 + num2; } export function subtract(num1, num2) { console.log('Subtract:', num1, num2); return num1 - num2; } //  -   function privateLog() { console.log('Private Function'); } 

• निर्यात किए जाने वाले फ़ंक्शन और चर के नामों को सूचीबद्ध करने वाले कोड के अंत में export कीवर्ड जोड़कर export किया जाता है। उदाहरण के लिए:
  
  

   // utils.js function multiply(num1, num2) { console.log('Multiply:', num1, num2); return num1 * num2; } function divide(num1, num2) { console.log('Divide:', num1, num2); return num1 / num2; } //    function privateLog() { console.log('Private Function'); } export {multiply, divide}; 

▍इम्पोर्ट मॉड्यूल

जिस तरह निर्यात करने के दो तरीके हैं, उसी तरह मॉड्यूल आयात करने के भी दो तरीके हैं। यह import कीवर्ड का उपयोग करके किया जाता है:

• एकाधिक चयनित आइटम आयात करें। उदाहरण के लिए:
  
  

   // main.js //     import { sum, multiply } from './utils.js'; console.log(sum(3, 7)); console.log(multiply(3, 7)); 

• मॉड्यूल निर्यात करता है कि सभी आयात करें। उदाहरण के लिए:
  
  

   // main.js //  ,    import * as utils from './utils.js'; console.log(utils.sum(3, 7)); console.log(utils.multiply(3, 7)); 

निर्यात और आयातित संस्थाओं के लिए उपनाम

यदि कोड में निर्यात किए गए फ़ंक्शंस या चर के नाम टकराव का कारण बन सकते हैं, तो उन्हें निर्यात के दौरान या आयात के दौरान बदला जा सकता है।

निर्यात के दौरान संस्थाओं का नाम बदलने के लिए, आप यह कर सकते हैं:

 // utils.js function sum(num1, num2) { console.log('Sum:', num1, num2); return num1 + num2; } function multiply(num1, num2) { console.log('Multiply:', num1, num2); return num1 * num2; } export {sum as add, multiply}; 

आयात के दौरान संस्थाओं का नाम बदलने के लिए, निम्नलिखित निर्माण का उपयोग किया जाता है:

 // main.js import { add, multiply as mult } from './utils.js'; console.log(add(3, 7)); console.log(mult(3, 7)); 

सिंगलटन पैटर्न

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

वास्तव में, जिसे हम "सिंगलटन" पैटर्न कहते हैं, वह हमेशा जावास्क्रिप्ट में मौजूद होती है, लेकिन वे इसे "सिंगलटन" नहीं, बल्कि "ऑब्जेक्ट शाब्दिक" कहते हैं। एक उदाहरण पर विचार करें:

 const user = { name: 'Peter', age: 25, job: 'Teacher', greet: function() {   console.log('Hello!'); } }; 

चूंकि जावास्क्रिप्ट में प्रत्येक ऑब्जेक्ट अपने स्वयं के मेमोरी क्षेत्र पर कब्जा कर लेता है और इसे अन्य वस्तुओं के साथ साझा नहीं करता है, जब भी हम user चर का उपयोग करते हैं, तो हमें उसी ऑब्जेक्ट का लिंक मिलता है।

कंस्ट्रक्टर फ़ंक्शन का उपयोग करके सिंगलटन पैटर्न को लागू किया जा सकता है। यह इस तरह दिखता है:

 let instance = null; function User(name, age) { if(instance) {   return instance; } instance = this; this.name = name; this.age = age; return instance; } const user1 = new User('Peter', 25); const user2 = new User('Mark', 24); //  true console.log(user1 === user2); 

जब कंस्ट्रक्टर फ़ंक्शन को कॉल किया जाता है, तो यह पहले यह देखने के लिए जांचता है कि क्या instance ऑब्जेक्ट मौजूद है। यदि संबंधित चर को प्रारंभ नहीं किया गया है, तो this instance लिखा गया है। यदि चर में पहले से ही किसी ऑब्जेक्ट का संदर्भ है, तो कंस्ट्रक्टर केवल एक instance देता है, अर्थात, किसी मौजूदा ऑब्जेक्ट का संदर्भ।

एकल पैटर्न का उपयोग करके सिंगलटन पैटर्न को लागू किया जा सकता है। उदाहरण के लिए:

 const singleton = (function() { let instance; function User(name, age) {   this.name = name;   this.age = age; } return {   getInstance: function(name, age) {     if(!instance) {       instance = new User(name, age);     }     return instance;   } } })(); const user1 = singleton.getInstance('Peter', 24); const user2 = singleton.getInstance('Mark', 26); // prints true console.log(user1 === user2); 

यहां हम singleton.getInstance() विधि को कॉल करके user का एक नया उदाहरण बनाते हैं। यदि ऑब्जेक्ट का एक उदाहरण पहले से मौजूद है, तो यह विधि बस इसे वापस कर देगी। यदि इस तरह की कोई वस्तु अभी तक नहीं है, तो विधि User निर्माता फ़ंक्शन को कॉल करके इसका एक नया उदाहरण बनाता है।

फैक्टरी पैटर्न

फैक्ट्री पैटर्न ऑब्जेक्ट बनाने के लिए फैक्ट्री मेथड्स का उपयोग करता है। आपको कक्षाओं या निर्माण कार्यों को निर्दिष्ट करने की आवश्यकता नहीं है जो ऑब्जेक्ट बनाने के लिए उपयोग किए जाते हैं।

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

 class Car{ constructor(options) {   this.doors = options.doors || 4;   this.state = options.state || 'brand new';   this.color = options.color || 'white'; } } class Truck { constructor(options) {   this.doors = options.doors || 4;   this.state = options.state || 'used';   this.color = options.color || 'black'; } } class VehicleFactory { createVehicle(options) {   if(options.vehicleType === 'car') {     return new Car(options);   } else if(options.vehicleType === 'truck') {     return new Truck(options);     } } } 

Car और Truck कक्षाएं यहां बनाई गई हैं, जो कुछ मानक मूल्यों के उपयोग के लिए प्रदान करती हैं। इनका उपयोग car और truck वस्तुओं को बनाने के लिए किया जाता है। यहां VehicleFactory क्लास को भी घोषित किया गया है, जिसका उपयोग vehicleType प्रॉपर्टी के विश्लेषण के आधार पर नई ऑब्जेक्ट्स बनाने के लिए किया जाता है, ऑब्जेक्ट के संबंधित विधि में options साथ ऑब्जेक्ट में लौटता है। यहाँ इस सब के साथ काम करने का तरीका बताया गया है:

 const factory = new VehicleFactory(); const car = factory.createVehicle({ vehicleType: 'car', doors: 4, color: 'silver', state: 'Brand New' }); const truck= factory.createVehicle({ vehicleType: 'truck', doors: 2, color: 'white', state: 'used' }); //  Car {doors: 4, state: "Brand New", color: "silver"} console.log(car); //  Truck {doors: 2, state: "used", color: "white"} console.log(truck); 

यहां VehicleFactory क्लास का factory ऑब्जेक्ट VehicleFactory । उसके बाद, आप factory.createVehicle() विधि को कॉल करके Car या Truck कक्षाओं की वस्तुओं को बना सकते हैं और इसे car या truck सेट किए गए car vehicleType संपत्ति के साथ options ऑब्जेक्ट पास कर vehicleType हैं।

डेकोरेटर पैटर्न

डेकोरेटर पैटर्न का उपयोग मौजूदा कक्षाओं या निर्माण कार्यों को संशोधित किए बिना वस्तुओं की कार्यक्षमता को बढ़ाने के लिए किया जाता है। इस पैटर्न का उपयोग उन वस्तुओं में कुछ क्षमताओं को जोड़ने के लिए किया जा सकता है जो कोड को संशोधित किए बिना उनकी रचना के लिए जिम्मेदार हैं।

यहाँ इस पैटर्न का उपयोग करने का एक सरल उदाहरण है:

 function Car(name) { this.name = name; //    this.color = 'White'; } //   ,    const tesla= new Car('Tesla Model 3'); //   -    tesla.setColor = function(color) { this.color = color; } tesla.setPrice = function(price) { this.price = price; } tesla.setColor('black'); tesla.setPrice(49000); //  black console.log(tesla.color); 

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

 class Car() { } class CarWithAC() { } class CarWithAutoTransmission { } class CarWithPowerLocks { } class CarWithACandPowerLocks { } 

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

 class Car { constructor() { //   this.cost = function() { return 20000; } } } // - function carWithAC(car) { car.hasAC = true; const prevCost = car.cost(); car.cost = function() {   return prevCost + 500; } } // - function carWithAutoTransmission(car) { car.hasAutoTransmission = true;  const prevCost = car.cost(); car.cost = function() {   return prevCost + 2000; } } // - function carWithPowerLocks(car) { car.hasPowerLocks = true; const prevCost = car.cost(); car.cost = function() {   return prevCost + 500; } } 

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

 const car = new Car(); console.log(car.cost()); carWithAC(car); carWithAutoTransmission(car); carWithPowerLocks(car); 

उसके बाद, आप बेहतर कॉन्फ़िगरेशन में कार की लागत का पता लगा सकते हैं:

 //       console.log(car.cost()); 

परिणाम

इस लेख में, हमने जावास्क्रिप्ट में उपयोग किए गए कई डिज़ाइन पैटर्न की जांच की, लेकिन, वास्तव में, अभी भी बहुत सारे पैटर्न हैं जिनका उपयोग समस्याओं की एक विस्तृत श्रृंखला को हल करने के लिए किया जा सकता है।

जबकि विभिन्न डिजाइन पैटर्न का ज्ञान प्रोग्रामर के लिए महत्वपूर्ण है, उनका उचित उपयोग भी उतना ही महत्वपूर्ण है। पैटर्न और उनके आवेदन के दायरे के बारे में जानना, प्रोग्रामर, उसके सामने कार्य का विश्लेषण करके, यह समझ सकता है कि कौन सा पैटर्न इसे हल करने में मदद करने में सक्षम है।

प्रिय पाठकों! आप किस डिज़ाइन पैटर्न का सबसे अधिक बार उपयोग करते हैं?