डमी के लिए जावास्क्रिप्ट पैटर्न ...

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

सामान्य तौर पर, शाम की एक जोड़ी के बाद, मुझे सबसे बुनियादी पैटर्न - डेकोरेटर, ऑब्जर्वर, फैक्टरी, मध्यस्थ, मेमोइज़ेशन (काफी पैटर्न नहीं है, बल्कि एक तकनीक है, लेकिन यह तकनीक में पूरी तरह से फिट बैठता है) और सिंग्लटन में जावास्क्रिप्ट का वर्णन और कार्यान्वयन मिला। ।

डेकोरेटर

लानत अच्छा पैटर्न, इसके साथ आप कुछ शर्तों के आधार पर, मक्खी पर ऑब्जेक्ट के व्यवहार को बदल सकते हैं।

मान लें कि हमारे पास एक कोड है:

function Ball( param ) { this._radius = param.radius; this._color = param.color; } Ball.prototype = { constructor: Ball, INCREMENTATION_STEP: 5, draw: function(){console.log("ball drawn with radius:" + this._radius + " and color: " + this._color)}, inc: function(){ this._radius += this.INCREMENTATION_STEP } } new Ball({ radius:100, color:"red"}); 

यहां हम एक नई लाल गेंद बनाते हैं, लेकिन क्या होगा अगर गेंद को न केवल लाल, बल्कि लाल धारीदार की जरूरत है? यह वह जगह है जहाँ डेकोरेटर दृश्य में प्रवेश करता है।

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

एक पैटर्न को लागू करने के कई तरीके हैं:

पहली विधि एकीकृत है

 function StripedBall( ball ) { this._ball = ball } StripedBall.prototype = { constructor: StripedBall, draw: function() { this._ball.draw(); console.log("and with stripes"); }, inc: function() { return this._ball.inc(); } } function SpeckledBall( ball ) { this._ball = ball } SpeckledBall.prototype = { constructor: SpeckledBall, draw: function() { this._ball.draw(); console.log("and with dots!"); }, inc: function() { return this._ball.inc(); } } 

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

हम एक साधारण परीक्षण लिखते हैं:

 var ball1 = new SpeckledBall( new StripedBall( new Ball({ radius:100, color:"red"}))); var ball2 = new StripedBall( new SpeckledBall( new Ball({ radius:100, color:"green"}))); ball1.draw(); ball1.inc(); ball1.draw(); ball2.draw(); 

गहरी सांस लें, और जांचें:

 ball drawn with radius:100 and color: red and with stripes and with dots! ball drawn with radius:105 and color: red and with stripes and with dots! ball drawn with radius:100 and color: green and with dots! and with stripes 

व्यर्थ में मैं चिंतित था - सब कुछ उसी तरह काम करता है जैसे यह होना चाहिए।

विधि दो - हल्का

 function MakeStripedBall( ball ) { var function_name = "draw"; var prev_func = ball[ function_name ]; ball[ function_name ] = function() { prev_func.apply( this, arguments ) console.log("and with stripes"); }; return ball; } function MakeSpeckledBall( ball ) { var function_name = "draw"; var prev_func = ball[function_name]; ball[function_name] = function () { prev_func.apply(this, arguments) console.log("and with dots!"); }; return ball; } 

बेशक, आपको पहले मामले की तुलना में कम कोड की आवश्यकता है, लेकिन अगर 1-2 से अधिक चर फ़ंक्शन या जटिल परिवर्तन हैं, तो यह पता लगाना अधिक कठिन होगा।

हम एक परीक्षण लिख रहे हैं:

 var ball3 = MakeStripedBall( MakeSpeckledBall( new Ball({ radius: 150, color: "blue" }))); var ball4 = MakeSpeckledBall( MakeStripedBall(new Ball({ radius: 150, color: "blue" }))); ball3.draw(); ball3.inc(); ball3.draw(); ball4.draw(); 

और जांचें कि यह सब कैसे काम करता है:

 ball drawn with radius:150 and color: blue and with dots! and with stripes ball drawn with radius:155 and color: blue and with dots! and with stripes ball drawn with radius:150 and color: blue and with stripes and with dots! 

सब कुछ जैसा है वैसा ही होना चाहिए।

फ़ैक्टरी

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

सब कुछ सरल है - इस पहले लक्ष्य के अलावा, इसमें एक दूसरा भी है - कारखाना वस्तुओं के कुछ आरंभीकरण को अंजाम दे सकता है।

उदाहरण के लिए, मान लें कि हमारे पास डैडी, मैमी और बालक हैं, उन्हें बनाने के लिए कारखाने का उपयोग करके हम बस कह सकते हैं - familyfactory.createLad (); familyfactory.createDaddy () , और तथ्य यह है कि वे दोनों लाल और 210 सेमी हैं। विकास, कारखाना हमारे लिए तय करेगा - हम इन मापदंडों को निर्धारित नहीं करते हैं।

दरअसल, कारखाने के लिए कुछ प्रकार की वस्तुओं को बनाने में सक्षम होने के लिए, उनके लिए यह अच्छा होगा कि वे पहले कंस्ट्रक्टर सेट करें (इस उदाहरण में, ऑब्जेक्ट, दुर्भाग्य से, ऊपर की कुछ पंक्तियों के रूप में दिलचस्प नहीं हैं):

 var Shapes = { Circle: function (param) { console.log("new " + param.color + " circle created with radius " + param.radius + "px"); }, Square: function (param) { console.log("new " + param.color + " square created with " + param.side + "px on a side "); }, Triangle: function (param) { console.log("new " + param.color + " triangle created with " + param.side + "px on a side "); } } 

और अब आप कारखाने को खुद बना सकते हैं - ऐसा लग सकता है:

 function ShapeFactory(size, color) { this.size = size; this.color = color; } ShapeFactory.prototype = { constructor: ShapeFactory, makeCircle: function () { return new Shapes.Circle({ radius: this.size / 2, color: this.color }); }, makeSquare: function () { return new Shapes.Square({ side: this.size, color: this.color }); }, makeTrinagle: function () { return new Shapes.Triangle({ side: this.size, color: this.color }); } } 

हम एक मामूली परीक्षा लिखते हैं:

 var factory = new ShapeFactory(100, "red") factory.makeSquare(); factory.makeSquare(); factory.makeTrinagle(); factory.makeCircle(); factory.makeTrinagle(); 

और कंसोल को देखें:

 new red square created with 100px on a side new red square created with 100px on a side new red triangle created with 100px on a side new red circle created with radius 50px new red triangle created with 100px on a side 

सब कुछ काम करता है

एकाकी वस्तु

सिंगलटन क्या है? स्पष्टीकरण जटिल, लंबा और गैर-तुच्छ होगा - यह एक वस्तु है जो एक उदाहरण में सिस्टम में है। तदम व्याख्या का अंत है।

मैं अक्सर यह बिल्कुल नहीं सोचता कि यह वास्तव में एक पैटर्न है। यह कहने योग्य है कि इससे पहले कि आप इसे लागू करें, आपको ध्यान से सोचना चाहिए - वास्तव में, आपको एक सिंगलटन की आवश्यकता होती है बहुत बार नहीं।
आप इसे कई तरीकों से कर सकते हैं।

पहला तरीका तुच्छ है

 var singleton_A = { log: function( text ){ console.log(text); } } 

यह एक सरल दृश्य और प्रभावी तरीका है, जो, मेरी राय में, स्पष्टीकरण की भी आवश्यकता नहीं है।

दूसरा तरीका - दिखावा

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

 var Singleton_B; (function(){ var instance; var anticlone_proxy; Singleton_B = function(){ if( instance ){ return instance; } instance = { _counter: 0, log: function( text ){ this._counter++; console.log( text + this._counter ); } } anticlone_proxy = { log: function( text ){ return instance.log( text ); } } return anticlone_proxy; }; })(); 

उसकी चाल यह है कि हम सिर्फ एक वस्तु बनाते हैं, और वह सिंगलटन है या नहीं, हम वास्तव में परवाह नहीं करते हैं:

  function NonSingleton() { } NonSingleton.prototype = { consturctor: NonSingleton, scream: function(){console.log("Woooohoooooo!")} } var singleton = new Singleton_B(); var nonsingleton = new NonSingleton(); singleton.log("3..2..1... ignition!"); nonsingleton.scream(); 

यदि इस कोड को निष्पादित किया जाता है, तो कंसोल में हम देखेंगे:

 3..2..1... ignition! Woooohoooooo! 

Memoization

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

हम इस तकनीक का उपयोग करने वाले कुछ प्रकार के धीमे कार्य करते हैं:

  function calculation(x, y) { var key = x.toString() + "|" + y.toString(); var result = 0; if (!calculation.memento[key]) { for (var i = 0; i < y; ++i) result += x; calculation.memento[key] = result; } return calculation.memento[key]; } calculation.memento = {}; 

और जाँच करें कि हम कितना समय जीत सकते हैं:

  console.profile(); console.log('result:' + calculation(2, 100000000)); console.profileEnd(); console.profile(); console.log('result:' + calculation(2, 100000000)); console.profileEnd(); console.profile(); console.log('result:' + calculation(2, 10000000)); console.profileEnd(); 

अगर यह कोड अब Fb में Firebug के साथ चलाया जाता है, तो हम निम्नलिखित आँकड़े देखेंगे:

 Profile1: 626.739ms result:200000000 0.012ms result:200000000 63.055msresult:20000000 

जैसा कि आप लॉग से देख सकते हैं - जब हमने अनुरोध दोहराया, तो हमने बहुत समय बचाया।

मध्यस्थ

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

एक तैयारी के रूप में, हम पहले कई वर्ग बनाएंगे जो मध्यस्थ भविष्य में उपयोग करेंगे (इस मामले में संकेत को मध्यस्थ रसोईघर कहा जाएगा :)

 function Daddy() { } Daddy.prototype = { constructor: Daddy, getBeer: function () { if (!kitchen.tryToGetBeer()) { console.log("Daddy: Who the hell drank all my beer?"); return false; } console.log("Daddy: Yeeah! My beer!"); kitchen.oneBeerHasGone(); return true; }, argue_back: function () { console.log("Daddy: it's my last beer, for shure!"); } } function Mammy() { } Mammy.prototype = { constructor: Mammy, argue: function () { console.log("Mammy: You are f*king alconaut!"); kitchen.disputeStarted(); } } function BeerStorage(beer_bottle_count) { this._beer_bottle_count = beer_bottle_count; } BeerStorage.prototype = { constructor: BeerStorage, takeOneBeerAway: function () { if (this._beer_bottle_count == 0) return false; this._beer_bottle_count--; return true; } } 

और अब खुद पिक लेने का समय आ गया है:

 var kitchen = { daddy: new Daddy(), mammy: new Mammy(), refrigerator: new BeerStorage(3), stash: new BeerStorage(2), tryToGetBeer: function () { if (this.refrigerator.takeOneBeerAway()) return true; if (this.stash.takeOneBeerAway()) return true; return false }, oneBeerHasGone: function (){ this.mammy.argue(); }, disputeStarted: function (){ this.daddy.argue_back(); } } 

और इसलिए, हमारे पास 4 ऑब्जेक्ट हैं, जिनके बीच की बातचीत के साथ काम एक अच्छी सजा में बदल सकता है अगर यह मध्यस्थ के माध्यम से नहीं गया।

हम सत्यापन कोड लिखते हैं:

 var round_counter = 0; while (kitchen.daddy.getBeer()) { round_counter++ console.log( round_counter + " round passed"); } 

हम कंसोल से पूछते हैं कि क्या सब कुछ योजना के अनुसार हो रहा है:

 Daddy: Yeeah! My beer! Mammy: You are f*king alconaut! Daddy: it's my last beer, for shure! 1 round passed ... Daddy: Yeeah! My beer! Mammy: You are f*king alconaut! Daddy: it's my last beer, for shure! 5 round passed Daddy: Who the hell drank all my beer? 

मैंने इस भावनात्मक बातचीत में से कुछ को काट दिया, लेकिन सामान्य तौर पर, सब कुछ वैसा ही है जैसा कि होना चाहिए।

ऑब्जर्वर

क्या यह वही पैटर्न है जिसका हम दिन में पचास बार उपयोग करते हैं, भले ही इसके बारे में सोचे बिना - $ (# some_useful_button) .click (blah_blah_blah) - एक परिचित डिज़ाइन? इसमें, क्लिक एक घटना है, और blah_blah_blah केवल एक ही ऑब्जर्वर है जो इस घटना को देखता है।

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

इसका मुख्य घटक घटना वस्तु है:

 Event = function() { this._observers = []; } Event.prototype = { raise: function (data) { for (var i in this._observers) { var item = this._observers[i]; item.observer.call(item.context, data); } }, subscribe: function (observer, context) { var ctx = context || null; this._observers.push({ observer: observer, context: ctx }); }, unsubscribe: function (observer, context ) { for (var i in this._observers) if ( this._observers[i].observer == observer && this._observers[i].context == context ) delete this._observers[i]; } } 

सामान्य तौर पर, मैंने यहां सोचा था कि स्क्रीनशॉट और लिंक के बिना यह एक प्रकार का उबाऊ है, इसलिए इस बार दो उदाहरण होंगे।

पहला सरल है

 var someEvent = new Event(); someEvent.subscribe(function ( data ) { console.log("wohoooooo " + data ) }); var someObject = { _topSecretInfo: 42, observerFunction: function () { console.log("Top Secret:" + this._topSecretInfo) } } someEvent.subscribe(someObject.observerFunction, someObject); someEvent.raise("yeaah!"); someEvent.raise(); 

और कंसोल पुष्टि करता है कि सब कुछ काम कर रहा है।

 wohoooooo yeaah! Top Secret:42 wohoooooo undefined Top Secret:42 

और दूसरा ... यह भी सरल, लेकिन सुंदर है

आप इसे यहां छू सकते हैं

आज के लिए, मैं सब कुछ सोचता हूं। ऑब्जर्वर को छोड़कर सभी स्रोतों को यहां देखा जा सकता है , और ऑब्जर्वर यहां एक अलग फ़ोल्डर है