Behavioural Patterns: Strategy, Observer, Command, State and Chain of Responsibility

// The rule is an object you plug in, not an if/else inside Cart.interface DiscountStrategy { apply(total: number): number; }const none: DiscountStrategy = { apply: t => t };const tenPercent: DiscountStrategy = { apply: t => t * 0.9 };const flat5: DiscountStrategy = { apply: t => Math.max(0, t - 5) };const bulk = (minQty: number, pct: number) => (qty: number): DiscountStrategy =>  ({ apply: t => (qty >= minQty ? t * (1 - pct) : t) });class Cart {  private items: number[] = [];  constructor(private strategy: DiscountStrategy) {}  add(price: number) { this.items.push(price); return this; }  setStrategy(s: DiscountStrategy) { this.strategy = s; }     // change at run time  total() { return this.strategy.apply(this.items.reduce((a, b) => a + b, 0)); }}const cart = new Cart(none).add(40).add(60);console.log(cart.total());cart.setStrategy(tenPercent);console.log(cart.total());cart.setStrategy(flat5);console.log(cart.total());cart.setStrategy(bulk(2, 0.25)(2));console.log(cart.total());// In JavaScript a strategy is often just a function. Array.sort takes one.const words = ["pear", "fig", "banana"];console.log([...words].sort((a, b) => a.length - b.length));console.log([...words].sort((a, b) => b.localeCompare(a)));

100909575[ 'fig', 'pear', 'banana' ][ 'pear', 'fig', 'banana' ]

type Listener<T> = (event: T) => void;class Subject<T> {  private listeners = new Set<Listener<T>>();  subscribe(fn: Listener<T>): () => void {      // returns an "unsubscribe" function    this.listeners.add(fn);    return () => { this.listeners.delete(fn); };  }  publish(event: T) {    for (const fn of [...this.listeners]) {     // copy: listeners may unsubscribe while we loop      try { fn(event); } catch (e) { console.log("  listener failed:", (e as Error).message); }    }  }  get count() { return this.listeners.size; }}type PriceChange = { symbol: string; price: number };const prices = new Subject<PriceChange>();const offLog = prices.subscribe(e => console.log("log:", e.symbol, e.price));prices.subscribe(e => { if (e.price < 0) throw new Error("bad price"); });const offAlert = prices.subscribe(e => e.price > 100 && console.log("alert: high", e.symbol));prices.publish({ symbol: "ABC", price: 120 });prices.publish({ symbol: "XYZ", price: -1 });     // one listener throws, the others still runoffLog();                                          // forget to do this and the listener lives onoffAlert();console.log("listeners left:", prices.count);prices.publish({ symbol: "ABC", price: 130 });

log: ABC 120alert: high ABClog: XYZ -1  listener failed: bad pricelisteners left: 1

interface Command { do(): void; undo(): void; }class Editor {  text = "";  private undoStack: Command[] = [];  private redoStack: Command[] = [];  run(cmd: Command) { cmd.do(); this.undoStack.push(cmd); this.redoStack = []; }  undo() { const c = this.undoStack.pop(); if (c) { c.undo(); this.redoStack.push(c); } }  redo() { const c = this.redoStack.pop(); if (c) { c.do(); this.undoStack.push(c); } }}class Insert implements Command {  constructor(private ed: Editor, private at: number, private s: string) {}  do() { this.ed.text = this.ed.text.slice(0, this.at) + this.s + this.ed.text.slice(this.at); }  undo() { this.ed.text = this.ed.text.slice(0, this.at) + this.ed.text.slice(this.at + this.s.length); }}class Delete implements Command {  private removed = "";  constructor(private ed: Editor, private from: number, private len: number) {}  do() {    this.removed = this.ed.text.slice(this.from, this.from + this.len);   // remember for undo    this.ed.text = this.ed.text.slice(0, this.from) + this.ed.text.slice(this.from + this.len);  }  undo() { this.ed.text = this.ed.text.slice(0, this.from) + this.removed + this.ed.text.slice(this.from); }}const ed = new Editor();ed.run(new Insert(ed, 0, "hello world"));ed.run(new Delete(ed, 5, 6));console.log(JSON.stringify(ed.text));ed.undo();console.log(JSON.stringify(ed.text));ed.undo();console.log(JSON.stringify(ed.text));ed.redo();console.log(JSON.stringify(ed.text));ed.run(new Insert(ed, 5, "!"));            // a new command clears the redo stacked.redo();console.log(JSON.stringify(ed.text));

"hello""hello world""""hello world""hello! world"

// State pattern: each state is an object that knows what is allowed next.interface OrderState {  readonly name: string;  pay(o: Order): void;  ship(o: Order): void;  cancel(o: Order): void;}const illegal = (what: string, from: string) => { throw new Error(`cannot ${what} when ${from}`); };const Cancelled: OrderState = {  name: "cancelled",  pay: o => illegal("pay", "cancelled"), ship: o => illegal("ship", "cancelled"), cancel: o => illegal("cancel", "cancelled"),};const Shipped: OrderState = {  name: "shipped",  pay: o => illegal("pay", "shipped"), ship: o => illegal("ship", "shipped"), cancel: o => illegal("cancel", "shipped"),};const Paid: OrderState = {  name: "paid",  pay: o => illegal("pay", "paid"), ship: o => { o.state = Shipped; }, cancel: o => { o.state = Cancelled; },};const Pending: OrderState = {  name: "pending",  pay: o => { o.state = Paid; }, ship: o => illegal("ship", "pending"), cancel: o => { o.state = Cancelled; },};class Order {  state: OrderState = Pending;  pay() { this.state.pay(this); }  ship() { this.state.ship(this); }  cancel() { this.state.cancel(this); }}const o = new Order();const attempt = (label: string, f: () => void) => {  try { f(); console.log(label, "->", o.state.name); }  catch (e) { console.log(label, "failed:", (e as Error).message); }};attempt("ship", () => o.ship());attempt("pay", () => o.pay());attempt("pay again", () => o.pay());attempt("ship", () => o.ship());attempt("cancel", () => o.cancel());

ship failed: cannot ship when pendingpay -> paidpay again failed: cannot pay when paidship -> shippedcancel failed: cannot cancel when shipped

type Request = { amount: number; by: string };interface Handler { setNext(h: Handler): Handler; handle(r: Request): string; }abstract class BaseHandler implements Handler {  private next?: Handler;  setNext(h: Handler) { this.next = h; return h; }          // returns h so calls chain  handle(r: Request): string {    return this.canHandle(r) ? this.process(r) : this.next ? this.next.handle(r) : `nobody approved ${r.amount}`;  }  protected abstract canHandle(r: Request): boolean;  protected abstract process(r: Request): string;}class Limit extends BaseHandler {  constructor(private role: string, private max: number) { super(); }  protected canHandle(r: Request) { return r.amount <= this.max; }  protected process(r: Request) { return `${this.role} approved ${r.amount} for ${r.by}`; }}const lead = new Limit("lead", 1_000);lead.setNext(new Limit("director", 10_000)).setNext(new Limit("vp", 100_000));for (const amount of [200, 5_000, 50_000, 500_000]) console.log(lead.handle({ amount, by: "ann" }));// A function-style chain: each step returns a result or passes on (undefined).type Step = (r: Request) => string | undefined;const steps: Step[] = [  r => (r.amount < 0 ? "rejected: negative" : undefined),  r => (r.by === "" ? "rejected: no requester" : undefined),  r => (r.amount <= 1_000 ? "auto-approved" : undefined),];const run = (r: Request) => steps.map(s => s(r)).find(x => x !== undefined) ?? "needs a human";console.log(run({ amount: -1, by: "x" }), "|", run({ amount: 10, by: "x" }), "|", run({ amount: 5000, by: "x" }));

lead approved 200 for anndirector approved 5000 for annvp approved 50000 for annnobody approved 500000rejected: negative | auto-approved | needs a human

class Range {  constructor(private from: number, private to: number, private step = 1) {}  *[Symbol.iterator](): Iterator<number> {            // a generator makes the iterator for us    for (let i = this.from; i < this.to; i += this.step) {      console.log("  (producing", i + ")");      yield i;    }  }}const r = new Range(0, 100, 10);for (const n of r) { if (n >= 20) break; console.log("got", n); }   // stops early, lazyconsole.log([...new Range(0, 5)]);// Manual iterator protocol: an object with next() that returns { value, done }.const it = new Range(0, 2)[Symbol.iterator]();console.log(it.next(), it.next(), it.next());

  (producing 0)got 0  (producing 10)got 10  (producing 20)  (producing 0)  (producing 1)  (producing 2)  (producing 3)  (producing 4)[ 0, 1, 2, 3, 4 ]  (producing 0)  (producing 1){ value: 0, done: false } { value: 1, done: false } { value: undefined, done: true }

// Template Method: the parent fixes the order of steps; children fill in some steps.abstract class Importer {  run(raw: string): string {    const rows = this.parse(raw);    const good = rows.filter(r => this.validate(r));    this.save(good);    return `${this.name()}: saved ${good.length} of ${rows.length}`;  }  protected abstract name(): string;  protected abstract parse(raw: string): string[][];  protected validate(row: string[]): boolean { return row.every(c => c !== ""); }   // hook with a default  protected save(rows: string[][]): void { /* default: do nothing */ }}class CsvImporter extends Importer {  protected name() { return "csv"; }  protected parse(raw: string) { return raw.split("\n").map(l => l.split(",")); }}class PipeImporter extends Importer {  protected name() { return "pipe"; }  protected parse(raw: string) { return raw.split("\n").map(l => l.split("|")); }  protected validate(row: string[]) { return row.length === 2; }          // override the hook}console.log(new CsvImporter().run("a,1\nb,\nc,3"));console.log(new PipeImporter().run("a|1\nb|2|x\nc|3"));

csv: saved 2 of 3pipe: saved 2 of 3