ezeotr JavaScript Des gn Patterns: Chain of Responsiilty| Joo Zins JavaScript Corer NEWER JavaScript Mixins for Functional Inheritance OLDER < Book Review: Getting Good With JavaScript RECOMMENDATIONS View All Recommendations Clean Code When you purchase anything through any of the above recommended links, you help support this, blog. Thank you! np hawjonzins.comjavaseriptasascript-design-patorns-chair--tesponsitiliy Search JAVASCRIPT JavaScript Design Patterns: Chain of Responsibility 2012/02/20 We've made it to the final installment in the JavaScript Design Patterns series. That's right, after this you'll no longer have any clue what post will be coming out every Monday! Well today, we'll be talking about the Chain of Responsibility Pattern. This pattern decouples the sender and receiver of a request, This is done with a chain of objects, each of which can handle the request itself or pass it on to the next object. Confused? Read on Get 50% Off anezeotr RECENT POSTS JavaScript Design Patorns: Chain of Responsibiity| Joe Zits JavaScript Corner Get 50% Off ~ Sign up to receive updates and big discounts on my upcoming JavaScript courses. First Name Email Address: Sign Up POWERED BY DRIP © Factory Pattern Part 1 © Factory Pattern Part 2 * Proxy Pattern © Observer Pattern © Command Pattern PRESENTING: OPTIMIZING JAVASCRIPT WEB APP. PERFORMANCE WITH WEBPACK * Chain of Responsibility Pattern 2017/03/28 WHERE DID VUES COME FROM? Chain of Responsibility 2017/03/16 Structure GETTING BACK INTO JAVASCRIPT WRITING 2or7/02/22 GET STARTED WITH JAVASCRIPT ARRAYS Get 50% Off naps uhwwjonzins.comavascript avacript-dosign-pattos-chair-of-esponsitili! aneres overt Design Pats: Chain of Respnsoity]| Jo Zins JawSerint Carer 2016/09/25 and request. The sender makes the comPOSIMON ISKING request. The receiver is a chain of 1 or 2016/08/25 more objects that choose whether to handle the request or pass it on. The request itself can be an object that encapsulates all the appropriate data, A sender sends the request to the first receiver object in the chain, The sender Get 50% Off ~ Sign up to receive updates and big discounts on my upcoming JavaScript courses. First Name Email Address Sign Up POWERED BY DRIP Chains in the World Around Us Event handling in the DOM uses one implementation of the Chain of Responsibility (amazing how many patterns are used together in the DOM, isn'tit). Once an eventis fired, it _bubbles _up the DOM hierarchy, calling every event handler it runs into Get 50% Off aps uhwwjonzins.comavascript asascript-design-pattons-chain-of-esponsitiliy! antezeotr JavaScript Des gn Patterns: Chain of Responsiity| Joo Zins JavaScript Corer chain or a handler tells it to stop propagating Chain of Responsibility Example For our example today, we'll be creating an ATM. The Chain is going to consist of Get 50% Off Sign up to receive updates and big discounts on my upcoming JavaScript courses. First Name Email Address naps uhwwjonzins.comavascript avacript-dosign-pattos-chair-of-esponsitili! POWERED BY DRIP ap\V We'll start by creating the receiver class: MoneyStacks . Normally this would just be an abstract class or interface that would be subclassed/implemented to create numerous different receivers, but this example is simple enough that the only variance between each of the receivers anteres overt Design Pats: Chain of Respnsity| Jo Zins JawSerint Carer So we can just set that number via a parameter in the constructor. var MoneyStack = function(b this.billsize = billsiz this.next = null; } MoneyStack.prototype = { withdraw: function(amou var numOfBills = Ma Vourwune Get 50% Off ~ Sign up to receive updates and big discounts on my upcoming JavaScript courses. First Name Email Address Sign Up POWERED BY ORE 24 // private method that 25 _ejectMoney: function(n 26 console. 1og(num0fBi 27 +" bill(s) has 28 } 2 } a > It's all pretty simple math. withdraw is the function that uses the chaining ability by ejecting the required bills and passing the request on when Get 50% Off naps uhwwjonzins.comavascript avacript-dosign-pattos-chair-of-esponsitili! snezeotr JavaScript Design Patorns: Chain of Responsibiity| Joe Zins JavaScript Corner Now, we'll build the ATM, Its constructor creates all of the money stacks and puts them into their hierarchical order. When, someone callsits withdraw method, it just passes on the responsibility to the chain of money stacks. 1 ? var ATM = function() { 11 Create the stacks af Get 50% Off ~ Sign up to receive updates and big discounts on my upcoming JavaScript courses. First Name Email Address Sign Up 19 20 21 22 23 24 25 26 27 28 29 30 31 32 Get 50% Off naps uhwwjonzins.comavascript avacript-dosign-pattos-chair-of-esponsitili! POWERED BY DRIP this.moneyStacks = stac ATM. prototype.withdraw = fu this.moneyStacks.withdr 71 USAGE var atm = new ATM(); atm.withdraw(186) ; 7/* outputs: 1 $10@ bill(s) has/have 1 $5@ bill(s) has/have 1 $20 bill(s) has/have enenzosr JserptDesign Ptr: Chain of Respesilty| Jo Zins JnaScript Corer 35 1 $1 bill(s) has/have b 36 */ 37 atm.withdraw(72); 38 /* outputs: 39 1 $5@ bill(s) has/have 40 1 $20 bill(s) has/have 41 2 $1 bill(s) has/have b 42 */ |} > Get 50% Off ~ Sign up to receive updates and big discounts on my upcoming JavaScript courses. First Name Email Address Sign Up POWERED BY DRIP to make some of the methods more efficient. Well, it's been fun taking you through all of these JavaScript design patterns. | hope you've learned something along the way. If you haven't read through them all, | highly recommend that you do, The list is included below. Remember, though, that just because you know a pattern, doesn’t mean itis required for the task at hand (vou know Get 50% Off naps uhwwjonzins.comavascript avacript-dosign-pattos-chair-of-esponsitili! mmezeotr JavaScript Design Patorns: Chain of Responsibiity| Joe Zins JavaScript Corner ‘the old “when all you have is a hammer, saying). everything looks like a nai lalso ask that if you found any of these design pattern posts helpful that you go ahead and let me know through a comment or spread the post around the internet to help others like us grow in JavaScript wisdom. You can do that Get 50% Off ~ Sign up to receive updates and big discounts on my upcoming JavaScript courses. First Name Email Address Sign Up POWERED BY DRIP * Proxy Pattern © Observer Pattern © Command Pattern * Chain of Responsibility Pattern Author: Joe Zimmerman Get 50% Off aps uhwwjonzins.comavascript asascript-design-pattons-chain-of-esponsitiliy! enenrow JserptDesign Ptr: Chain of Respesilty| Jo Zins JnaScript Corer Joe Zimmerman has been doing web development ever since he awe me found an HTML book on his dad's shelf when he was 12. Since then, JavaScript has grown in popularity and he has become Get 50% Off ~ Sign up to receive updates and big discounts on my upcoming JavaScript courses. First Name Email Address Sign Up POWERED BY DRIP Get 50% Off naps uhwwjonzins.comavascript avacript-dosign-pattos-chair-of-esponsitili! enezeotr JavaScript Design Patorns: Chain of Responsibiity| Joe Zins JavaScript Corner Comments Community @ Login ~ © Recommend —& Share Sort by Newest » Join the discussion.. e mrhiew 2 days ago - Get 50% Off ~ Sign up to receive updates and big discounts on my upcoming JavaScript courses. First Name Email Address: Sign Up POWERED BY DRIP © 2017 joe Zimmerman Home Rocammandatinne Get 50% Off naps uhwwjonzins.comavascript avacript-dosign-pattos-chair-of-esponsitili! sonezeotr JavaScript Design Patorns: Chain of Responsibiity| Joe Zins JavaScript Corner Contact Me Privacy Policy x Get 50% Off Sign up to receive updates and big discounts on my upcoming JavaScript courses. First Name Email Address Sign Up POWERED BY DRIP Get 50% Off naps uhwwjonzins.comavascript avacript-dosign-pattos-chair-of-esponsitili! wn