Created
June 18, 2015 13:31
-
-
Save OriginUnknown/ed41a62cfa85820e2cfb to your computer and use it in GitHub Desktop.
JavaScript OOP Design Pattern - Chain of Responsibility
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<title>Chain of Responsibility pattern</title> | |
</head> | |
<body> | |
<script type="text/javascript"> | |
/* | |
* * Changelist - Chain of responsibility pattern 1.0.0.0 - first release, basic implementation | |
* * Example based on Derek Banas' 'Chain of Responsibility' video. iHeartDerek! | |
*/ | |
//Request - is the desired action to be taken | |
var requestObj = function ( num1, num2, cmd ) { | |
return { | |
"num1": num1, | |
"num2": num2, | |
"cmd": cmd //'add', 'sub', 'multi', 'div' | |
} | |
}; | |
/* | |
* * Handler - processes the request passed to it. | |
* * Handlers usually work to a 'Handler' interface which may have a 'successor' property which will store the next handler in the chain {object instance} | |
* * and a 'handleRequest' method which is a class's implementation of how to handle the request passed to it. | |
* * If the handler can handle the request it will, else will pass the request onto its successor for further handling | |
*/ | |
var Add = function () { | |
var successor, | |
setSuccessor = function ( nextInChain ) { | |
successor = nextInChain || null; | |
}, | |
handleRequest = function ( request ) { | |
if ( request.cmd === 'add' ) {//if the request is to 'add', the Add handler will execute the request | |
console.log( request.num1 + " + " + request.num2 + " = " + (request.num1 + request.num2) ); | |
} else if ( successor ) {//Otherwise, provided the successor has been set, call the handleRequest() method of that object next in the chain | |
successor.handleRequest( request ); | |
} | |
}; | |
return { | |
"setSuccessor": setSuccessor, | |
"handleRequest": handleRequest | |
} | |
}; | |
var Sub = function () { | |
var successor, | |
setSuccessor = function ( nextInChain ) { | |
successor = nextInChain || null; | |
}, | |
handleRequest = function ( request ) { | |
if ( request.cmd === 'sub' ) { | |
console.log( request.num1 + " - " + request.num2 + " = " + (request.num1 - request.num2) ); | |
} else if ( successor ) { | |
successor.handleRequest( request ); | |
} | |
}; | |
return { | |
"setSuccessor": setSuccessor, | |
"handleRequest": handleRequest | |
} | |
}; | |
var Multi = function () { | |
var successor, | |
setSuccessor = function ( nextInChain ) { | |
successor = nextInChain || null; | |
}, | |
handleRequest = function ( request ) { | |
if ( request.cmd === 'multi' ) { | |
console.log( request.num1 + " * " + request.num2 + " = " + request.num1 * request.num2 ); | |
} else if ( successor ) { | |
successor.handleRequest( request ); | |
} | |
}; | |
return { | |
"setSuccessor": setSuccessor, | |
"handleRequest": handleRequest | |
} | |
}; | |
var Divide = function () { | |
var successor, | |
setSuccessor = function ( nextInChain ) { | |
successor = nextInChain || null; | |
}, | |
handleRequest = function ( request ) { | |
if ( request.cmd === 'div' ) { | |
console.log( request.num1 + " / " + request.num2 + " = " + request.num1 / request.num2 ); | |
} else if ( successor ) { | |
successor.handleRequest( request ); | |
} else { | |
console.log( "Unable to compute. Can only do addition, subtraction, multiplication and division." ); | |
} | |
}; | |
return { | |
"setSuccessor": setSuccessor, | |
"handleRequest": handleRequest | |
} | |
}; | |
/* | |
* * Client | |
* * 1. Create your objects for the chain | |
*/ | |
var step1 = Add(), | |
step2 = Sub(), | |
step3 = Multi(), | |
step4 = Divide(); | |
//2. Organise the order of responsibility by setting the successor for each object | |
step1.setSuccessor( step2 ); | |
step2.setSuccessor( step3 ); | |
step3.setSuccessor( step4 ); | |
//3. Create your requests | |
var request1 = requestObj( 2, 2, 'add' ); | |
var request2 = requestObj( 96, 8, 'div' ); | |
var request3 = requestObj( 81, 19, 'sub' ); | |
var request4 = requestObj( 9, 9, 'multi' ); | |
var request5 = requestObj( 36, 6, 'sq' ); | |
//4. Start the chain | |
step1.handleRequest( request1 );//returns 2 + 2 = 4 | |
step1.handleRequest( request2 );//returns 96 / 8 = 12 | |
step1.handleRequest( request3 );//returns 81 - 19 = 62 | |
step1.handleRequest( request4 );//returns 9 * 9 = 81 | |
step1.handleRequest( request5 );//returns "Unable to compute. Can only do addition, subtraction, multiplication and division." | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment