From ced5d880d02b3cafed2e5f3d3b4541956dbcf3e4 Mon Sep 17 00:00:00 2001 From: Denys Otrishko Date: Mon, 27 Jan 2020 23:06:49 +0200 Subject: [PATCH] Add basic description and implementation --- JavaScript/1-basic-arithmetic.js | 184 +++++++++++++++++ .../2-basic-arithmetic-diff-traversal.js | 188 ++++++++++++++++++ 2 files changed, 372 insertions(+) create mode 100644 JavaScript/1-basic-arithmetic.js create mode 100644 JavaScript/2-basic-arithmetic-diff-traversal.js diff --git a/JavaScript/1-basic-arithmetic.js b/JavaScript/1-basic-arithmetic.js new file mode 100644 index 0000000..b98863c --- /dev/null +++ b/JavaScript/1-basic-arithmetic.js @@ -0,0 +1,184 @@ +'use strict'; + +// Visitor pattern represents operation(s) to be performed on the elements of +// object structure. It allows to define new operations without +// changing the classes on which it operates. +// This allows to: +// * group related operations, and separate unrelated; +// * easily add new operations. Contrary to simple inheritance which would +// require changing whole hierarchy (i.e. adding another inteface to implement +// to the Base class); +// * peform operations on elements of differing interfaces dependent on the +// class of the element; +// * introduce state to the hierarchy traversal without explicitly passing any +// arguments (via Visitor's internal state); +// +// Among the downsides of the Visitor pattern are: +// * unnecessary complication of the hierarchy and class interaction if there +// is only a few operations; +// * makes it hard to add new elements to hierarchies that existing Visitors +// operate on (it requires changing every visitor of the hierarchy); +// +// Main components of the Visitor pattern are +// * abstract Visitor interface that defines 'visit' operation for each +// element/class; +// * concrete Visitor interface implementers that define particular operations +// to be performed. May contain local state that is preseved/used/modified +// during 'visits'; +// * Base Element that defines `accept(visitor)` operation to be implemented +// in the subclasses by calling the relevant Visitor method and concrete +// Element subclasses that implement the `accept(visitor)` method; +// * Element hierarchy that allows traversal one way or another +// (i.e. iteration, enumeration, implements Composite pattern); +// +// This example presents an hierarchy of basic arithmetic operations and +// various Visitors to perform different actions on them. The traversal is +// handled by the visitors themselves which leads to code duplication in +// `visitA` methods that handle containers but allows for more complex +// traversal patterns that each visitor can define separately. Another, more +// common way is to handle the structure traversal by the Elements in the +// `accept()` method (see second example for this approach) or have a separate +// traversor function. + + +// Elements hierarchy. +// +class BaseElement { + accept(visitor) {} +} + +class PlusElement extends BaseElement { + constructor(left, right) { + super(); + this.left = left; + this.right = right; + } + + accept(visitor) { + visitor.visitPlus(this); + } +} + +class MulElement extends BaseElement { + constructor(left, right) { + super(); + this.left = left; + this.right = right; + } + + accept(visitor) { + visitor.visitMul(this); + } +} + +class LiteralElement extends BaseElement { + constructor(value) { + super(); + this.value = value; + } + + accept(visitor) { + visitor.visitLiteral(this); + } +} + + +// Visitors +class BaseVisitor { + visitPlus(plusElement) {} + visitMul(mulElement) {} + visitLiteral(literalElement) {} +} + +class PrintVisitor { + #expr = ''; + + visitPlus(plusElement) { + this.#expr += '('; + plusElement.left.accept(this); + this.#expr += ' + '; + plusElement.right.accept(this); + this.#expr += ')'; + } + + visitMul(mulElement) { + this.#expr += '('; + mulElement.left.accept(this); + this.#expr += ' * '; + mulElement.right.accept(this); + this.#expr += ')'; + } + + visitLiteral(literalElement) { + this.#expr += String(literalElement.value); + } + + get expression() { + return this.#expr; + } +} + +class CalculateVisitor { + #result = 0; + + // It is possible to implement this visitor in-place (without creating new + // visitors to calculate sub expressions) though that would be a bit more + // complex. + + visitPlus(plusElement) { + const leftVisitor = new CalculateVisitor(); + plusElement.left.accept(leftVisitor); + const rightVisitor = new CalculateVisitor(); + plusElement.right.accept(rightVisitor); + this.#result = leftVisitor.result + rightVisitor.result; + } + + visitMul(mulElement) { + const leftVisitor = new CalculateVisitor(); + mulElement.left.accept(leftVisitor); + const rightVisitor = new CalculateVisitor(); + mulElement.right.accept(rightVisitor); + this.#result = leftVisitor.result * rightVisitor.result; + } + + visitLiteral(literalElement) { + this.#result = Number(literalElement.value); + } + + get result() { + return this.#result; + } +} + +const example1 = new PlusElement( + new MulElement( + new LiteralElement(3), + new PlusElement( + new LiteralElement(5), + new LiteralElement(7) + ) + ), + new PlusElement( + new LiteralElement(2), + new LiteralElement(4) + ) +); + +const printGroup = (title, fn) => { + console.group(title); + fn(); + console.log(); + console.groupEnd(); +} + +printGroup('PrintVisitor example', () => { + const printVisitor = new PrintVisitor(); + example1.accept(printVisitor); + console.log(printVisitor.expression); +}); + +printGroup('CalculateVisitor example', () => { + const calcVisitor = new CalculateVisitor(); + example1.accept(calcVisitor); + console.log(calcVisitor.result); +}); diff --git a/JavaScript/2-basic-arithmetic-diff-traversal.js b/JavaScript/2-basic-arithmetic-diff-traversal.js new file mode 100644 index 0000000..ff5a46e --- /dev/null +++ b/JavaScript/2-basic-arithmetic-diff-traversal.js @@ -0,0 +1,188 @@ +'use strict'; + +// This example presents an hierarchy of basic arithmetic operations and +// various Visitors to perform different actions on them the same way the first +// example does but moves the structure traversal to the Elements's `accept()` +// method. +// In this example another Element was added to denote parentheses - +// ParenElement. The lack of ParenElement in the previous example makes it very +// hard to take operation priority into account with this traversal strategy. + + +// Elements hierarchy. +// +class BaseElement { + accept(visitor) {} +} + +class PlusElement extends BaseElement { + constructor(left, right) { + super(); + this.left = left; + this.right = right; + } + + accept(visitor) { + this.left.accept(visitor); + visitor.visitPlus(this); + this.right.accept(visitor); + } +} + +class MulElement extends BaseElement { + constructor(left, right) { + super(); + this.left = left; + this.right = right; + } + + accept(visitor) { + this.left.accept(visitor); + visitor.visitMul(this); + this.right.accept(visitor); + } +} + +class ParenElement extends BaseElement { + constructor(value) { + super(); + this.value = value; + } + + accept(visitor) { + visitor.visitParen(this); + } +} + +class LiteralElement extends BaseElement { + constructor(value) { + super(); + this.value = value; + } + + accept(visitor) { + visitor.visitLiteral(this); + } +} + + +// Visitors +class BaseVisitor { + visitPlus(plusElement) {} + visitMul(mulElement) {} + visitLiteral(literalElement) {} + visitParen(parenElement) {} +} + +class PrintVisitor { + #expr = ''; + + // Note the lack of code duplication to handle these cases. + visitPlus(plusElement) { + this.#expr += ' + '; + } + + visitMul(mulElement) { + this.#expr += ' * '; + } + + visitLiteral(literalElement) { + this.#expr += String(literalElement.value); + } + + visitParen(parenElement) { + this.#expr += '('; + parenElement.value.accept(this); + this.#expr += ')'; + } + + get expression() { + return this.#expr; + } +} + +class CalculateVisitor { + #result = 0; + #pendingOperation = null; + + // Note the lack of code duplication to handle these cases. + visitPlus(plusElement) { + this.#pendingOperation = '+'; + } + + visitMul(mulElement) { + this.#pendingOperation = '*'; + } + + visitLiteral(literalElement) { + const val = Number(literalElement.value); + this.handleValue(val); + } + + visitParen(parenElement) { + const visitor = new CalculateVisitor(); + parenElement.value.accept(visitor); + this.handleValue(visitor.result); + } + + handleValue(value) { + switch (this.#pendingOperation) { + case '+': + this.#result += value; + break; + case '*': + this.#result *= value; + break; + default: + this.#result = value; + } + this.#pendingOperation = null; + } + + get result() { + return this.#result; + } +} + +class Expression { + #elements = []; + + add(element) { + this.#elements.push(element); + } +} + +const example1 = new PlusElement( + new MulElement( + new LiteralElement(3), + new ParenElement( + new PlusElement( + new LiteralElement(5), + new LiteralElement(7) + ) + ) + ), + new PlusElement( + new LiteralElement(2), + new LiteralElement(4) + ) +); + +const printGroup = (title, fn) => { + console.group(title); + fn(); + console.log(); + console.groupEnd(); +} + +printGroup('PrintVisitor example', () => { + const printVisitor = new PrintVisitor(); + example1.accept(printVisitor); + console.log(printVisitor.expression); +}); + +printGroup('CalculateVisitor example', () => { + const calcVisitor = new CalculateVisitor(); + example1.accept(calcVisitor); + console.log(calcVisitor.result); +});