आधुनिक जावास्क्रिप्ट में सुरुचिपूर्ण पैटर्न (बिल सॉर टीम साइकिल)

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

RORO

संक्षिप्त नाम का अर्थ है एक वस्तु प्राप्त करें, एक वस्तु लौटें - एक वस्तु प्राप्त करें, एक वस्तु वापस करें। मैं मूल लेख के लिए एक लिंक प्रदान करता हूं: लिंक

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

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

कल्पना करें कि हमारे पास डेटा ऑब्जेक्ट में प्रस्तुत एप्लिकेशन के कुछ वर्गों के अधिकार हैं। हमें इस डेटा के आधार पर कुछ जानकारी दिखाने की जरूरत है। ऐसा करने के लिए, हम निम्नलिखित कार्यान्वयन की पेशकश कर सकते हैं:

//   const user = { name: 'John Doe', login: 'john_doe', password: 12345, active: true, rules: { finance: true, analitics: true, hr: false } }; //   const users = [user]; //,     function findUsersByRule ( rule, withContactInfo, includeInactive) { //        active const filtredUsers= users.filter(item => includeInactive ? item.rules[rule] : item.active && item.rules[rule]); //  ()   ( )     withContactInfo return withContactInfo ? filtredUsers.reduce((acc, curr) => { acc[curr.id] = curr; return acc; }, {}) : filtredUsers.map(item => item.id) } //     findUsersByRule( 'finance', true, true) 

उपरोक्त कोड का उपयोग करके, हम वांछित परिणाम प्राप्त करेंगे। हालांकि, इस तरह से कोड लिखने में कई नुकसान हैं।

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

दूसरे, अगर हम कुछ मापदंडों को अनिवार्य बनाना चाहते हैं, तो हमें कुछ इस तरह लिखना होगा:

 function findUsersByRule ( role, withContactInfo, includeInactive) { if (!role) { throw Error(...) ; } //...  } 

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

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

विनाशकारी का उपयोग करते हुए, हमारे पिछले उदाहरण से फ़ंक्शन इस तरह दिखाई देगा:

 function findUsersByRule ({ rule, withContactInfo, includeInactive}) { //    } findUsersByRule({ rule: 'finance', withContactInfo: true, includeInactive: true}) 

कृपया ध्यान दें कि हमारा कार्य लगभग समान दिखता है, सिवाय इसके कि हम अपने मापदंडों के आसपास कोष्ठक लगाएं। तीन अलग-अलग मापदंडों को प्राप्त करने के बजाय, हमारा कार्य अब गुणों के साथ एक एकल वस्तु की उम्मीद करता है: rule , withContactInfo और includeInactive ।

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

आवश्यक मापदंडों के साथ समस्या को और भी सुरुचिपूर्ण तरीके से हल किया जा सकता है।

 function requiredParam (param) { const requiredParamError = new Error( `Required parameter, "${param}" is missing.` ) } function findUsersByRule ({ rule = requiredParam('rule'), withContactInfo, includeInactive} = {}) {...} 

यदि हम नियम मान पारित नहीं करते हैं, तो डिफ़ॉल्ट रूप से पारित फ़ंक्शन काम करेगा, जो अपवाद को फेंक देगा।

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

इसके अलावा, यह दृष्टिकोण कार्यों की संरचना को सरल करता है। वास्तव में, रचना के साथ, कार्यों को केवल एक पैरामीटर लेना चाहिए। RORO पैटर्न उसी अनुबंध का पालन करता है।

बिल सोरौर: “किसी भी टेम्पलेट की तरह, RORO को हमारे टूलबॉक्स में एक अन्य उपकरण के रूप में देखा जाना चाहिए। "हम इसका उपयोग करते हैं जहां यह लाभ होता है, पैरामीटर सूची को अधिक समझ और लचीला बनाता है, और वापसी मूल्य अधिक अभिव्यंजक होता है।"

बर्फ का कारखाना

आप इस लिंक पर मूल लेख पा सकते हैं।

लेखक के अनुसार, यह टेम्पलेट एक फ़ंक्शन है जो एक जमे हुए ऑब्जेक्ट को बनाता है और वापस करता है।

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

ES6 वर्ग:

 // ShoppingCart.js class ShoppingCart { constructor({db}) { this.db = db } addProduct (product) { this.db.push(product) } empty () { this.db = [] } get products () { return Object .freeze([...this.db]) } removeProduct (id) { // remove a product } // other methods } // someOtherModule.js const db = [] const cart = new ShoppingCart({db}) cart.addProduct({ name: 'foo', price: 9.99 }) 

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

 const db = [] const cart = new ShoppingCart({db}) cart.addProduct = () => 'nope!' //   JS  cart.addProduct({ name: 'foo', price: 9.99 }) // output: "nope!"     

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

 const cart = new ShoppingCart({db: []}) const other = new ShoppingCart({db: []}) ShoppingCart.prototype .addProduct = () => 'nope!' //     JS cart.addProduct({ name: 'foo', price: 9.99 }) // output: "nope!" other.addProduct({ name: 'bar', price: 8.88 }) // output: "nope!" 

सहमत हूं, इस तरह की विशेषताएं हमें बहुत परेशानी का कारण बन सकती हैं।

एक अन्य आम समस्या एक इवेंट हैंडलर को एक इंस्टेंस विधि प्रदान कर रही है।

 document .querySelector('#empty') .addEventListener( 'click', cart.empty ) 

बटन पर क्लिक करने से टोकरी खाली नहीं होगी। विधि db नाम के हमारे बटन को एक नई प्रॉपर्टी असाइन करती है और कार्ट प्रॉपर्टी के db को प्रभावित करने के बजाय इस प्रॉपर्टी को [] सेट करती है। हालाँकि, कंसोल में कोई त्रुटि नहीं हैं, और आपका सामान्य ज्ञान आपको बताएगा कि कोड को काम करना चाहिए, लेकिन ऐसा नहीं है।

इस कोड को काम करने के लिए, आपको एक एरो फंक्शन लिखना होगा:

 document .querySelector("#empty") .addEventListener( "click", () => cart.empty() ) 

या संदर्भ को एक बंधन से बांधें:

 document .querySelector("#empty") .addEventListener( "click", cart.empty.bind(cart) ) 

आइस फैक्टरी हमें इन जाल से बचने में मदद करेगी।

 function makeShoppingCart({ db }) { return Object.freeze({ addProduct, empty, getProducts, removeProduct, // others }) function addProduct (product) { db.push(product) } function empty () { db = [] } function getProducts () { return Object .freeze([...db]) } function removeProduct (id) { // remove a product } // other functions } // someOtherModule.js const db = [] const cart = makeShoppingCart({ db }) cart.addProduct({ name: 'foo', price: 9.99 }) 

इस पैटर्न की विशेषताएं:

• नए कीवर्ड का उपयोग करने की आवश्यकता नहीं है
• इसे बांधने की जरूरत नहीं है
• गाड़ी पूरी तरह से पोर्टेबल है
• स्थानीय चर घोषित किए जा सकते हैं जो बाहर से दिखाई नहीं देंगे

 function makeThing(spec) { const secret = 'shhh!' return Object.freeze({ doStuff }) function doStuff () { //    secret } } // secret    const thing = makeThing() thing.secret // undefined 

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

निष्कर्ष

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