Google बंद करने के साथ ईवेंट बनाना

Question

मैं Google ऑब्जेक्ट (जीसी) वातावरण में अपनी ऑब्जेक्ट्स के बीच संवाद करने के लिए ईवेंट का उपयोग करना चाहता हूं।

मान लीजिए कि मेरे पास दो वर्ग foobar.Boss और foobar.Employee हैं। बॉस जानना चाहता है कि कर्मचारी ने कॉफी कब बनाई है, और चाहे वह कॉफी decaf है (वह इस सप्ताह कैफीन बिछा रहा है)।

जीसी ने कक्षाएं उपलब्ध कराई हैं जो ऐसा करने के साधन प्रदान करती हैं, goog.events.Event और goog.events.EventTarget।

बेहतर जानने के बिना, मैं इसे इस तरह काम करेगा लगता है कि:

foobar.Employee.prototype.makeCoffee = function(isDecaf) 
{   
    this.coffeeMaker.putCoffeeInMachine(isDecaf); 
    this.coffeeMaker.start(); 
    var event = new goog.event.Event('COFFEE_ON', { isDecaf: isDecaf }); 
    goog.events.dispatchEvent(event); 
} 

foobar.Boss.prototype.addEmployee = function(employee) 
{ 
    ... 
    goog.events.listen(employee, 'COFFEE_ON', function(e) 
    { 
     if (e.target.isDecaf) 
     { 
      this.refillMug(); 
     } 
    }, false, this); 
    ... 
} 

यह एक सही पैटर्न है? मैं वर्ग goog.events.EventTarget द्वारा उलझन में हूं - लक्ष्य प्रेषण ईवेंट कैसे करता है? क्या लक्ष्य के साथ कोई चीज नहीं होती है?

This question सहायक है, लेकिन अधिक प्रत्यक्ष उत्तर की सराहना की जाएगी।

Answer 1

थोड़ी देर के लिए इसे देखते हुए, मेरी समझ अब है कि EventTarget वास्तव में ऐसी इकाई होने का एक दोहरी रोल निभाता है जो घटनाओं और इकाई को भेजा जाता है। तो एक विकल्प होगा Employeegoog.events.EventTarget उत्तराधिकारी होगा लेकिन मैं एक अलग मार्ग चला गया हूं।

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

/** 
* @constructor 
* @extends {goog.events.Event} 
*/ 
foobar.CoffeeEvent = function(isDecaf) 
{ 
    goog.events.Event.call(this, 'COFFEE_ON'); 
    this.isDecaf = isDecaf; 
}; 
goog.inherits(foobar.CoffeeEvent, goog.events.Event); 

अगला मैंने इन घटनाओं को प्रेषित करने के लिए एक ईवेंट श्रोता प्रकार बनाया।

/** 
* @constructor 
* @extends {goog.events.EventTarget} 
*/ 
foobar.CoffeeEventTarget = function() 
{ 
    goog.events.EventTarget.call(this); 
}; 
goog.inherits(foobar.CoffeeEventTarget, goog.events.EventTarget); 

मैं अपने Employee के इस प्रकार के एक वस्तु गयी।

foobar.Employee = function() 
{ 
    ... 
    this.coffeeEvents = new foobar.CoffeeEventTarget(); 
    ... 
} 

कर्मचारी कॉफी केवल एक बार जब:

foobar.Employee.prototype.makeCoffee = function(isDecaf) 
{   
    this.coffeeMaker.putCoffeeInMachine(isDecaf); 
    this.coffeeMaker.start(); 
    var event = new foobar.CoffeeEvent(isDecaf); 
    this.coffeeEvents.dispatchEvent(event); 
} 

श्री Bossman इस के लिए सुनता है।

foobar.Boss.prototype.addEmployee = function(employee) 
{ 
    ... 
    goog.events.listen(employee.coffeeEvents, 'COFFEE_ON', function(e) 
    { 
     if (e.isDecaf) 
     { 
      this.refillMug(); 
     } 
    }, false, this); 
    ... 
} 

ध्यान दें कि यह मुझे बता नहीं होगा जो कर्मचारी कॉफी रीफिल, क्योंकि घटना लक्ष्य CoffeeEventTarget का एक उदाहरण होगा। यदि आप वहां Employee के सभी चाहते थे तो मुझे लगता है कि आप इसे सदस्य क्षेत्र के रूप में जोड़ सकते हैं। यदि आप Employee को goog.events.EventTarget से विरासत में मिलाकर ठीक थे तो आपको लक्ष्य के रूप में Employee मुफ्त में मिलता है।

Answer 2

तरह से मैं EventTarget के बारे में सोच यह है:

एक बटन लक्ष्य है, जो आप जब भी एक जगह लेता रजिस्टर कर सकते हैं अपने क्लिक करें घटना के बारे में सूचित कर दिया है। इस प्रकार, एक क्लिक का "लक्ष्य" बटन है (आप बटन पर लक्ष्य रखते हैं, फिर उस पर क्लिक करें)। लेकिन जब बटन क्लिक हो जाता है, तो यह माउस नहीं है जो बटन को क्लिक करता है कि बटन क्लिक किया गया था - बटन स्वयं ही उस संदेश को भेजता है।

सवाल @ बेन-फ्लिन के बारे में क्यों किसी की आवश्यकता होगी/द्वारा लाया पर स्पर्श करें उपवर्ग को EventTarget हैं:

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

Answer 3

यहाँ कैसे मैं इसे करना होगा है ...

के एक कॉफी प्रकार सेट करें। अगर हम इसे आगे ले जाना चाहते थे तो हमारे पास बेस कॉफी क्लास हो सकता था और फिर उप-वर्ग इसे डेकाफ कॉफी श्रेणी के साथ ले सकता था। लेकिन चीजों को सरल रखने दें।

foobar.Coffee.js

/** 
* @fileoverview Coffee class 
*/ 

goog.provide('foobar.Coffee'); 

/** 
* @constructor 
*/ 
foobar.Coffee = function(){ 
    //... 
}; 

हमारे कर्मचारी वर्ग goog.events.EventTarget को लागू करना चाहिए घटनाओं प्रेषण करने के लिए सक्षम होने के लिए। आपको पेरेंट कन्स्ट्रक्टर को goog.base या goog.events.EventTarget.call के साथ कॉल करना न भूलना चाहिए क्योंकि यह वर्ग की आंतरिक चर सेट करेगा।

foobar.Employee.js

/** 
* @fileoverview Implements the Employee class 
*/ 

goog.provide('foobar.Employee'); 
goog.require('goog.events.EventTarget'); 
goog.require('foobar.Coffee'); 

/** 
* @constructor 
*/ 
foobar.Employee = function(){ 
    // Calls the parent class (goog.events.EventTarget) 
    goog.base(this); 
}; 
goog.inherits(foobar.Employee, goog.events.EventTarget); 

/** 
* Make a coffee 
*/ 
foobar.Employee.prototype.makeCoffee = function(){ 
    // Determine what coffee type to make ... 
    // Create the coffee 
    var coffee = new foobar.Coffee(); 
    this.dispatchEvent({ 
     type: "decaf_coffee", 
     target: coffee 
    }); 
}; 

मालिक वर्ग के रूप में यह घटनाओं भेजने नहीं किया जाएगा कुछ भी विशेष करने की जरूरत नहीं है। इसे सिर्फ #drinkCoffee() विधि की आवश्यकता है जिसे हम कॉल कर सकते हैं।

foobar.Boss.js

/** 
* @fileoverview Implements the Boss class 
*/ 

goog.provide('foobar.Boss'); 

/** 
* @constructor 
*/ 
foobar.Boss = function(){ 
    //... 
}; 

/** 
* Make this boss drink coffee 
* @param {foobar.Coffee} coffee The coffee to drink 
*/ 
foobar.Boss.prototype.drinkCoffee = function(coffee){ 
    //.... 
}; 

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

main.js

goog.require('foobar.Boss'); 
goog.require('foobar.Employee'); 
goog.require('goog.events'); 

// Jane is the boss of Sam, but we will use lower case as I typically 
// only capitalise the first letter to indicate a constructor. 
var jane = new Boss(); 
var sam = new Employee(); 

// Set up event listening 
goog.events.listen(sam, "decaf_coffee", function(e){ 
    var coffee = e.target; 
    // We've got the decaf coffee Sam made, now Jane can enjoy drinking it 
    jane.drinkCoffee(coffee); 
}, false, this); 

// Tell Sam to make a coffee 
sam.makeCoffee();