🐳 🕔 👨‍👩‍👧‍👦 जावास्क्रिप्ट दुनिया में रचना की कीमत 🤳🏻 👝 ☺️

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

वी। कैंडिंस्की - रचना एक्स

वासिली कैंडिंस्की - "रचना एक्स"

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

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

mail.mozilla.org/pipermail/es-discuss/2013-June/031614.html

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

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

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

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

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

एक सिंथेटिक उदाहरण वस्तुओं का एक सरणी है जो एक मनमाना दृश्य तत्व के लिए एक शैली स्थापित करता है।

const styles = [  { fontSize: '12px', fontFamily: 'Arial' },  { fontFamily: 'Verdana', fontStyle: 'italic', fontWeight: 'bold' },  { fontFamily: 'Tahoma', fontStyle: 'normal'} ];

जानकारी के नुकसान के बिना प्रत्येक शैली की वस्तुओं को इसके सूचकांक द्वारा निकाला जा सकता है। इसके अलावा, Array.prototype.map () का उपयोग करके, आप सभी संग्रहीत मानों को किसी दिए गए तरीके से संसाधित कर सकते हैं।

 const getFontFamily = s => s.fontFamily; styles.map(getFontFamily) //["Arial","Verdana","Tahoma"]

कॉन्टैटेनेशन में एक मौजूदा ऑब्जेक्ट की कार्यक्षमता को नए गुणों को जोड़कर विस्तार करना शामिल है। इस प्रकार, उदाहरण के लिए, Redux काम में राज्य reducers। अद्यतन करने के लिए प्राप्त डेटा राज्य वस्तु को लिखा गया है, इसे विस्तारित करना। ऑब्जेक्ट की वर्तमान स्थिति पर डेटा, एकत्रीकरण के विपरीत, खो गया है अगर सहेजा नहीं गया है।

उदाहरण के लिए, वैकल्पिक रूप से विज़ुअल तत्व के लिए उपरोक्त सेटिंग्स को लागू करते हुए, आप ऑब्जेक्ट के मापदंडों को संक्षिप्त करके अंतिम परिणाम उत्पन्न कर सकते हैं।

 const concatenate = (a, s) => ({…a, …s}); styles.reduce(concatenate, {}) //{fontSize:"12px",fontFamily:"Tahoma",fontStyle:"normal",fontWeight:"bold"}

अधिक विशिष्ट शैली के मूल्य अंततः पिछले राज्यों को अधिलेखित कर देंगे।

जब आप अनुमान लगाते हैं, जैसा कि आप अनुमान लगा सकते हैं, एक वस्तु दूसरे को सौंपी गई है। उदाहरण के लिए, प्रतिनिधि जावास्क्रिप्ट में प्रोटोटाइप हैं। व्युत्पन्न वस्तुओं के उदाहरण माता-पिता के तरीकों पर पुनर्निर्देशित करते हैं। यदि सरणी उदाहरण में कोई आवश्यक संपत्ति या विधि नहीं है, तो यह इस कॉल को Array.prototype में पुनर्निर्देशित करेगा, और यदि आवश्यक हो, तो Object.prototype से आगे। इस प्रकार, जावास्क्रिप्ट में विरासत तंत्र प्रोटोटाइप प्रतिनिधिमंडल श्रृंखला पर आधारित है, जो तकनीकी रूप से रचना का एक (आश्चर्य) संस्करण है।

प्रतिनिधि द्वारा शैली की वस्तुओं की एक सरणी का संयोजन निम्नानुसार किया जा सकता है।

 const delegate = (a, b) => Object.assign(Object.create(a), b); styles.reduceRight(delegate, {}) //{"fontSize":"12px","fontFamily":"Arial"} styles.reduceRight(delegate, {}).fontWeight //bold

जैसा कि आप देख सकते हैं, प्रतिनिधि गुण अभिवर्धन (उदाहरण के लिए, Object.keys () का उपयोग करके) तक पहुँच योग्य नहीं हैं, लेकिन केवल स्पष्ट पहुँच के द्वारा सुलभ हैं। तथ्य यह है कि यह हमें देता है पोस्ट के अंत में है।

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

 class Character { constructor(name) { this.name = name; this.health = 100; } }

योद्धा को इस तथ्य से प्रतिष्ठित किया जाता है कि वह जानता है कि कैसे हड़ताल करना है, जबकि उसकी सहनशक्ति खर्च करना है, और जादूगर - मंत्र देने की क्षमता, मन की मात्रा को कम करना।

 class Fighter extends Character { constructor(name) { super(name); this.stamina = 100; } fight() { console.log(`${this.name} takes a mighty swing!`); this.stamina -  ; } } class Mage extends Character { constructor(name) { super(name); this.mana = 100; } cast() { console.log(`${this.name} casts a fireball!`); this.mana -  ; } }

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

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

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

 const canCast = (state) => ({ cast: (spell) => { console.log(`${state.name} casts ${spell}!`); state.mana -  ; } }) const canFight = (state) => ({ fight: () => { console.log(`${state.name} slashes at the foe!`); state.stamina -  ; } })

इस प्रकार, चरित्र इन सुविधाओं के सेट से निर्धारित होता है, और प्रारंभिक गुण, दोनों सामान्य (नाम और स्वास्थ्य), और निजी (सहनशक्ति और मन)।

 const fighter = (name) => { let state = { name, health: 100, stamina: 100 } return Object.assign(state, canFight(state)); } const mage = (name) => { let state = { name, health: 100, mana: 100 } return Object.assign(state, canCast(state)); } const paladin = (name) => { let state = { name, health: 100, mana: 100, stamina: 100 } return Object.assign(state, canCast(state), canFight(state)); }

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

 var inheritanceArmy = []; for (var i = 0; i < 1000000; i++) { inheritanceArmy.push(new Fighter('Fighter' + i)); inheritanceArmy.push(new Mage('Mage' + i)); } var compositionArmy = []; for (var i = 0; i < 1000000; i++) { compositionArmy.push(fighter('Fighter' + i)); compositionArmy.push(mage('Mage' + i)); }

और वस्तुओं को बनाने के लिए आवश्यक विरासत और संरचना के बीच स्मृति और कम्प्यूटेशनल लागतों की तुलना करें।

औसतन, संघनन द्वारा किसी रचना का उपयोग करने वाले समाधान के लिए 100–150% अधिक संसाधनों की आवश्यकता होती है। प्रस्तुत परिणाम NodeJS पर्यावरण में प्राप्त किए गए थे, आप इस परीक्षण को चलाकर ब्राउज़र इंजन के लिए परिणाम देख सकते हैं।

उत्तराधिकार-प्रतिनिधिमंडल पर आधारित समाधान का लाभ, प्रतिनिधि की संपत्तियों में निहित पहुंच की कमी के कारण स्मृति को बचाकर समझाया जा सकता है, साथ ही गतिशील प्रतिनिधियों के लिए कुछ इंजन अनुकूलन को अक्षम कर सकता है। बदले में, कॉन्टेक्टेशन-आधारित समाधान बहुत महंगी Object.assign () पद्धति का उपयोग करता है, जो इसके प्रदर्शन को बहुत प्रभावित करता है। दिलचस्प बात यह है कि फ़ायरफ़ॉक्स क्वांटम क्रोमियम के परिणामों के विपरीत है - दूसरा समाधान गेको में बहुत तेजी से काम करता है।

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

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

जावास्क्रिप्ट दुनिया में रचना की कीमत

More articles: