आप अपने एप्लिकेशन की जावास्क्रिप्ट में किस ऑब्जेक्ट ओरिएंटेड डिज़ाइन पैटर्न का उपयोग करते हैं, और क्यों?
कोड से मुक्त महसूस करें, भले ही इससे कोई औपचारिक डिज़ाइन पैटर्न जुड़ा हुआ न हो।
मैंने बहुत सारी जावास्क्रिप्ट लिखी है, लेकिन मैंने जो भी किया है, उस पर ज्यादा ऑब्जेक्ट ओरिएंटेड पैटर्न नहीं लगाए हैं, और मुझे यकीन है कि मुझे बहुत याद आ रही है।
जवाबों:
निम्नलिखित तीन लोकप्रिय जावास्क्रिप्ट पैटर्न हैं। इन की वजह से आसानी से कार्यान्वयन योग्य होने के लिए हो बंद :
तुम भी बाहर की जाँच करना चाहते हो सकता है:
डायज़ द्वारा प्रस्तुत 2008 से Google I / O की चर्चा निम्नलिखित है, जहाँ वह अपनी पुस्तक के कुछ विषयों पर चर्चा करता है:
विरासत
मैं एक्सटीजेएस 3 पर आधारित विरासत के लिए एक संकेतन का उपयोग करता हूं, जो मुझे लगता है कि जावा में शास्त्रीय विरासत के अनुकरण के लिए काफी करीब है। यह मूल रूप से निम्नानुसार चलता है:
// Create an 'Animal' class by extending
// the 'Object' class with our magic method
var Animal = Object.extend(Object, {
move : function() {alert('moving...');}
});
// Create a 'Dog' class that extends 'Animal'
var Dog = Object.extend(Animal, {
bark : function() {alert('woof');}
});
// Instantiate Lassie
var lassie = new Dog();
// She can move and bark!
lassie.move();
lassie.bark();
नेमस्पेस
मैं एरिक मिरागेलिया से नामस्थान पर चिपके रहने से भी सहमत हूं, इसलिए ऊपर दिए गए कोड को विंडो ऑब्जेक्ट के बाहर अपने स्वयं के संदर्भ में चलाया जाना चाहिए, यह महत्वपूर्ण है यदि आप अपने कोड को ब्राउज़र विंडो में निष्पादित कई समवर्ती फ्रेमवर्क / लाइब्रेरी में से एक के रूप में चलाने का इरादा रखते हैं।
इसका मतलब है कि विंडो ऑब्जेक्ट का एकमात्र तरीका आपके स्वयं के नामस्थान / मॉड्यूल ऑब्जेक्ट के माध्यम से है:
// Create a namespace / module for your project
window.MyModule = {};
// Commence scope to prevent littering
// the window object with unwanted variables
(function() {
var Animal = window.MyModule.Animal = Object.extend(Object, {
move: function() {alert('moving...');}
});
// .. more code
})();
इंटरफेस
आप अपने अनुप्रयोग डिज़ाइन को बढ़ाने के लिए अधिक अग्रिम OOP निर्माण जैसे इंटरफेस का उपयोग भी कर सकते हैं। इन पंक्तियों के साथ संकेतन प्राप्त करने के लिए मेरा दृष्टिकोण इनको बढ़ाना है Function.prototype:
var Dog = Object.extend(Animal, {
bark: function() {
alert('woof');
}
// more methods ..
}).implement(Mammal, Carnivore);
ऊ पैटर्न
जावा अर्थ में 'पैटर्न' के रूप में, मैंने केवल सिंगलटन पैटर्न (कैशिंग के लिए बढ़िया) और इवेंट-संचालित कार्यक्षमता के लिए ऑब्जर्वर पैटर्न का उपयोग किया है , जैसे कि उपयोगकर्ता द्वारा किसी बटन पर क्लिक करने पर कुछ कार्यों को असाइन करना।
प्रेक्षक पैटर्न का उपयोग करने का एक उदाहरण होगा:
// Instantiate object
var lassie = new Animal('Lassie');
// Register listener
lassie.on('eat', function(food) {
this.food += food;
});
// Feed lassie by triggering listener
$('#feeding-button').click(function() {
var food = prompt('How many food units should we give lassie?');
lassie.trigger('eat', [food]);
alert('Lassie has already eaten ' + lassie.food + ' units');
});
और OO JS के मेरे बैग में बस कुछ ही ट्रिक्स हैं, आशा है कि वे आपके लिए उपयोगी होंगे।
मैं सलाह देता हूं कि यदि आप इस सड़क को नीचे जाने का इरादा रखते हैं, तो आप डगलस क्रॉकफर्ड्स जावास्क्रिप्ट: द गुड पार्ट्स पढ़ते हैं । इस सामान के लिए यह एक शानदार किताब है।
मैं मॉड्यूल पैटर्न का प्रशंसक हूं । यह एक्स्टेंसिबल, नॉन-डिपेंडेंट (ज्यादातर समय) फ्रेमवर्क को लागू करने का एक तरीका है।
उदाहरण:
ढांचा,, Qइस तरह परिभाषित किया गया है:
var Q = {};
एक समारोह जोड़ने के लिए:
Q.test = function(){};
मॉड्यूल बनाने के लिए कोड की इन दो लाइनों का एक साथ उपयोग किया जाता है । मॉड्यूल के पीछे का विचार यह है कि वे सभी इस मामले में कुछ आधार ढांचे का विस्तार करते Qहैं, लेकिन एक दूसरे पर निर्भर नहीं हैं (यदि सही तरीके से डिज़ाइन किया गया है) और किसी भी क्रम में शामिल किया जा सकता है।
एक मॉड्यूल में, आप पहले फ्रेम ऑब्जेक्ट बनाते हैं यदि यह मौजूद नहीं है (जो सिंगलटन पैटर्न का एक उदाहरण है ):
if (!Q)
var Q = {};
Q.myFunction = function(){};
इस तरह, आपके पास अलग-अलग फ़ाइलों में कई मॉड्यूल (जैसे ऊपर एक) हो सकते हैं, और उन्हें किसी भी क्रम में शामिल कर सकते हैं। उनमें से कोई भी फ्रेमवर्क ऑब्जेक्ट बनाएगा, और फिर उसे विस्तारित करेगा। यदि फ्रेमवर्क मौजूद है, तो किसी मैनुअल की जाँच करने की आवश्यकता नहीं है। फिर, यह जांचने के लिए कि क्या कोई मॉड्यूल / फ़ंक्शन कस्टम कोड में मौजूद है:
if (Q.myFunction)
Q.myFunction();
else
// Use a different approach/method
Qढांचा चर, या दर्जनों और दर्जनों कार्य और चर?
सिंगलटन पैटर्न अक्सर 'एनकैप्सुलेशन' और संगठन सामान के लिए बहुत सहायक होता है। तुम भी परिवर्तनशीलता बदल सकते हैं।
var myInstance = {
method1: function () {
// ...
},
method2: function () {
// ...
}
};
मुझे वास्तव में jquery का तरीका चिनिंग पैटर्न पसंद है , जिससे आप एक ऑब्जेक्ट पर कई तरीके कॉल कर सकते हैं। कोड की एक पंक्ति में कई ऑपरेशन करना वास्तव में आसान बनाता है।
उदाहरण:
$('#nav').click(function() {
$(this).css('color','#f00').fadeOut();
});
मुझे वास्तव में jQuery plugins के साथ डेकोरेटर पैटर्न पसंद है । अपनी आवश्यकताओं को पूरा करने के लिए प्लगइन्स को संशोधित करने के बजाय, एक कस्टम प्लगइन लिखें जो केवल अनुरोध करता है और अतिरिक्त पैरामीटर और कार्यक्षमता जोड़ता है।
उदाहरण के लिए, यदि आपको हर समय डिफ़ॉल्ट तर्कों का एक सेट पास करने की आवश्यकता होती है, और आपको थोड़े-अलग व्यवहार की आवश्यकता होती है, जो व्यावसायिक तर्क में शामिल होता है, एक प्लगइन लिखें जो आपकी ज़रूरतों को पूरा करने के लिए जो भी काम करता है preऔर जो postआवश्यक है वह आपके डिफ़ॉल्ट तर्कों को पारित करता है यदि वे विशेष तर्क निर्दिष्ट नहीं हैं।
इसका मुख्य लाभ यह है कि आप अपने पुस्तकालयों को अपडेट कर सकते हैं और पुस्तकालय परिवर्तनों को पोर्ट करने की चिंता नहीं कर सकते हैं। आपका कोड टूट सकता है, लेकिन कम से कम मौका है कि यह नहीं होगा।
जावास्क्रिप्ट दुनिया में उपयोगी पैटर्न में से एक है, जो कि पहले स्थान पर LINQ द्वारा लोकप्रिय बनाया गया है, और यह jQuery में भी उपयोग किया जाता है।
यह पैटर्न हमें कक्षा के विभिन्न तरीकों को कॉल करने के तरीके में सक्षम बनाता है।
इस पैटर्न की मुख्य संरचना इस प्रकार होगी
var Calaculator = function (init) {
var result = 0;
this.add = function (x) { result += (init + x); return this; };
this.sub = function (x) { result += (init - x); return this; };
this.mul = function (x) { result += (init * x); return this; };
this.div = function (x) { result += (init / x); return this; };
this.equals = function (callback) {
callback(result);
}
return this;
};
new Calaculator(0)
.add(10)
.mul(2)
.sub(5)
.div(3)
.equals(function (result) {
console.log(result);
});
इस पैटर्न का मुख्य विचार thisकुंजी शब्द है, जो कैलकुलेटर fucntion के अन्य सार्वजनिक सदस्य तक पहुंच संभव बनाता है।