Към съдържанието
wannacode

Template Method и Iterator

Накратко: Template Method пази общия скелет на алгоритъм в базов клас, а подкласовете попълват стъпките; Iterator дава елементите един по един, без да показва как се пазят.

Проблем

Два отчета с един и същ скелет

Счетоводството иска поръчките в CSV, а сайтът иска същите в HTML таблица. Отказаните поръчки не влизат в отчета. Някой написа CSV, а после копира функцията за HTML:

function exportCsv(orders) {
  const lines = ["поръчка,сума"];
  let total = 0;
  for (const order of orders) {
    if (order.cancelled) {
      continue;
    }
    lines.push(`${order.id},${order.total.toFixed(2)}`);
    total += order.total;
  }
  lines.push(`общо,${total.toFixed(2)}`);
  return lines.join("\n");
}


function exportHtml(orders) {
  const lines = ["<table>", "<tr><th>Поръчка</th><th>Сума</th></tr>"];
  let total = 0;
  for (const order of orders) {
    lines.push(`<tr><td>${order.id}</td><td>${order.total.toFixed(2)}</td></tr>`);
    total += order.total;
  }
  lines.push(`<tr><td>Общо</td><td>${total.toFixed(2)}</td></tr>`);
  lines.push("</table>");
  return lines.join("\n");
}
const orders = [
  { id: 1001, total: 80, cancelled: false },
  { id: 1002, total: 25.5, cancelled: false },
  { id: 1003, total: 40, cancelled: true },
];
console.log(exportCsv(orders));
console.log(exportHtml(orders));
Изход
поръчка,сума
1001,80.00
1002,25.50
общо,105.50
<table>
<tr><th>Поръчка</th><th>Сума</th></tr>
<tr><td>1001</td><td>80.00</td></tr>
<tr><td>1002</td><td>25.50</td></tr>
<tr><td>1003</td><td>40.00</td></tr>
<tr><td>Общо</td><td>145.50</td></tr>
</table>

Двата отчета показват различна сума: CSV е 105.50 €, а HTML е 145.50 €. Правилото „отказаните не влизат“ го има само в първото копие. Двете копия правят едно и също: отварят, пишат заглавие, обхождат поръчките, пишат сбора и затварят. Различни са само редовете, които пишат. Третият формат ще е трето копие, и правилото пак трябва да се помни на още едно място.

Идеята

Template Method: скелетът е един, стъпките са различни

Каквото не се сменя, е редът на стъпките и правилата между тях: отваряне, заглавие, по ред за всяка поръчка без отказаните, сбор, затваряне. Каквото се сменя, е как изглежда всяка стъпка.

Скелетът отива в базовия клас Report, в метода export. На всяко място, където форматите се различават, той вика стъпка: header, row, footer. Подкласът пише само стъпките. Стъпка, която не е задължителна (open и close, които CSV не ползва), има празно тяло в базовия клас и се казва кука (hook).

Това е шаблонът Template Method (шаблонен метод). Ролите са две:

  • базовият клас със скелета: той решава реда и вика стъпките;
  • подкласовете: CsvReport и HtmlReport пишат стъпките и не викат нищо сами.

Виж го

Скелетът и двата отчета

В JavaScript abstract няма. Задължителната стъпка в базовия клас хвърля грешка, ако подкласът не я е написал. Двете куки са празни:
class Report {
  export(orders) {
    const lines = [];
    this.open(lines);
    this.header(lines);
    let total = 0;
    for (const order of orders) {
      if (order.cancelled) {
        continue;
      }
      this.row(lines, order);
      total += order.total;
    }
    this.footer(lines, total);
    this.close(lines);
    return lines.join("\n");
  }


  open(lines) {}


  header(lines) {
    throw new Error("header() трябва да се напише");
  }


  row(lines, order) {
    throw new Error("row() трябва да се напише");
  }


  footer(lines, total) {
    throw new Error("footer() трябва да се напише");
  }


  close(lines) {}
}

Двата отчета пишат само редовете си. CsvReport не пише куките, затова ползва празните от базовия клас:

class CsvReport extends Report {
  header(lines) {
    lines.push("поръчка,сума");
  }


  row(lines, order) {
    lines.push(`${order.id},${order.total.toFixed(2)}`);
  }


  footer(lines, total) {
    lines.push(`общо,${total.toFixed(2)}`);
  }
}


class HtmlReport extends Report {
  open(lines) {
    lines.push("<table>");
  }


  header(lines) {
    lines.push("<tr><th>Поръчка</th><th>Сума</th></tr>");
  }


  row(lines, order) {
    lines.push(`<tr><td>${order.id}</td><td>${order.total.toFixed(2)}</td></tr>`);
  }


  footer(lines, total) {
    lines.push(`<tr><td>Общо</td><td>${total.toFixed(2)}</td></tr>`);
  }


  close(lines) {
    lines.push("</table>");
  }
}
const orders = [
  { id: 1001, total: 80, cancelled: false },
  { id: 1002, total: 25.5, cancelled: false },
  { id: 1003, total: 40, cancelled: true },
];
console.log(new CsvReport().export(orders));
console.log(new HtmlReport().export(orders));
Изход
поръчка,сума
1001,80.00
1002,25.50
общо,105.50
<table>
<tr><th>Поръчка</th><th>Сума</th></tr>
<tr><td>1001</td><td>80.00</td></tr>
<tr><td>1002</td><td>25.50</td></tr>
<tr><td>Общо</td><td>105.50</td></tr>
</table>

class Report {
  export(orders) {
    const lines = [];
    this.open(lines);
    this.header(lines);
    let total = 0;
    for (const order of orders) {
      if (order.cancelled) {
        continue;
      }
      this.row(lines, order);
      total += order.total;
    }
    this.footer(lines, total);
    this.close(lines);
    return lines.join("\n");
  }


  open(lines) {}


  header(lines) {
    throw new Error("header() трябва да се напише");
  }


  row(lines, order) {
    throw new Error("row() трябва да се напише");
  }


  footer(lines, total) {
    throw new Error("footer() трябва да се напише");
  }


  close(lines) {}
}
Стъпка по стъпка, с думи
  1. new CsvReport().export(orders): скелетът е в Report. Той решава реда на стъпките.
  2. open: CsvReport не пише тази стъпка, затова върви празното тяло от Report. Не се добавя нищо.
  3. header: скелетът вика стъпката, а CsvReport пише своя ред.
  4. row за поръчка 1001: скелетът вика стъпката, а CsvReport пише своя ред.
  5. row за поръчка 1002: скелетът вика стъпката, а CsvReport пише своя ред.
  6. Поръчка 1003 е отказана: самият скелет я прескача с continue. Нито един отчет не трябва да помни това правило.
  7. footer: скелетът вика стъпката, а CsvReport пише своя ред.
  8. close: CsvReport не пише тази стъпка, затова върви празното тяло от Report. Не се добавя нищо.
  9. Сега HtmlReport: същият скелет, други стъпки.
  10. open: скелетът вика стъпката, а HtmlReport пише своя ред.
  11. header: скелетът вика стъпката, а HtmlReport пише своя ред.
  12. row за поръчка 1001: скелетът вика стъпката, а HtmlReport пише своя ред.
  13. row за поръчка 1002: скелетът вика стъпката, а HtmlReport пише своя ред.
  14. Поръчка 1003 е отказана: самият скелет я прескача с continue. Нито един отчет не трябва да помни това правило.
  15. footer: скелетът вика стъпката, а HtmlReport пише своя ред.
  16. close: скелетът вика стъпката, а HtmlReport пише своя ред.
  17. Два отчета, един скелет. И двата сбора са 105.50 €, защото правилото за отказаните е на едно място.

Сборът е 105.50 € и в двата отчета: правилото за отказаните е в скелета, на едно място.

Виж го

Скелетът не се пипа

В JavaScript final няма. Подклас може да напише свой export, и нищо не го спира. Липсваща стъпка се вижда чак когато скелетът стигне до нея:

class TextReport extends Report {
  header(lines) {
    lines.push("поръчка сума");
  }


  row(lines, order) {
    lines.push(`${order.id} ${order.total.toFixed(2)}`);
  }
}


console.log(new TextReport().export(orders));
Грешка
Error: footer() трябва да се напише

Затова всеки нов отчет се пуска поне веднъж, преди да стигне до счетоводството.

Виж го

Без наследяване: стъпките като функции

Стъпките не е задължително да са методи на подклас. Скелетът може да ги приеме като параметри: заглавието е текст, а редът и сборът са функции.

function exportOrders(orders, header, row, footer) {
  const lines = [header];
  let total = 0;
  for (const order of orders) {
    if (order.cancelled) {
      continue;
    }
    lines.push(row(order));
    total += order.total;
  }
  lines.push(footer(total));
  return lines.join("\n");
}
console.log(exportOrders(
  orders,
  "поръчка,сума",
  (order) => `${order.id},${order.total.toFixed(2)}`,
  (total) => `общо,${total.toFixed(2)}`,
));
console.log(exportOrders(
  orders,
  "<table>\n<tr><th>Поръчка</th><th>Сума</th></tr>",
  (order) => `<tr><td>${order.id}</td><td>${order.total.toFixed(2)}</td></tr>`,
  (total) => `<tr><td>Общо</td><td>${total.toFixed(2)}</td></tr>\n</table>`,
));
Изход
поръчка,сума
1001,80.00
1002,25.50
общо,105.50
<table>
<tr><th>Поръчка</th><th>Сума</th></tr>
<tr><td>1001</td><td>80.00</td></tr>
<tr><td>1002</td><td>25.50</td></tr>
<tr><td>Общо</td><td>105.50</td></tr>
</table>

Скелетът пак е на едно място, а отказаните пак не влизат.

В JavaScript това често е по-естественият начин: функцията е стойност, и наследяване не трябва. Подкласът си заслужава, когато стъпките са много или делят общи данни (например текущия номер на реда), които стоят по-добре в полета на един обект.

Проблем

Всеки, който иска поръчките, върти страниците

Поръчките са в система, която ги дава на страници: по две на заявка, защото заявката е бавна. Тук източникът е списък в паметта, а всяко зареждане печата ред, за да виждаш кога става:

class OrderSource {
  constructor(orders) {
    this.orders = orders;
  }


  fetchPage(number) {
    console.log(`зареждам страница ${number}`);
    const start = (number - 1) * 2;
    return this.orders.slice(start, start + 2);
  }
}

Отчетът, имейлът за клиентите и експортът искат всичките поръчки, и всеки върти страниците сам:

let number = 1;
let page = source.fetchPage(number);
while (page.length > 0) {
  for (const order of page) {
    console.log(order.id);
  }
  number++;
  page = source.fetchPage(number);
}
Изход
зареждам страница 1
1001
1002
зареждам страница 2
1003
1004
зареждам страница 3
1005
зареждам страница 4

Кодът, който иска само „всяка поръчка поред“, знае, че има страници, как се броят и че краят е празна страница. Същите редове са в три файла. Когато системата мине от номер на страница към „ключ за следващата страница“, сменяш и трите.

Идеята

Iterator: обхождането зад курсор

Извикващият иска едно: следващата поръчка, докато има. Как се стига до нея (списък, страници, файл, мрежа) е работа на някой друг.

Този друг е курсорът: обект, който помни докъде е стигнал и на въпроса „има ли още?“ отговаря сам, като зарежда следваща страница, само когато предишната свърши. Извикващият пише обикновен for...of и не знае за страниците.

Това е шаблонът Iterator (итератор). Ролите са две:

  • колекцията: това, което се обхожда. Тя дава курсор;
  • курсорът: помни мястото и дава следващия елемент.

Този шаблон е вграден във всеки от четирите езика: for...of работи с всеки обект, който дава курсор. В JavaScript курсорът е обект с next(), а най-лесно се прави с генератор: функция с function* и yield.

Виж го

Курсорът, който зарежда страниците

function* прави генератор: при извикване не прави нищо, а връща курсор. Всеки път, когато for...of поиска следваща поръчка, функцията върви до следващото yield, дава поръчката и спира точно там. Затова следващата страница се зарежда, едва когато текущата свърши:
function* allOrders(source) {
  for (let number = 1; ; number++) {
    const page = source.fetchPage(number);
    if (page.length === 0) {
      return;
    }
    for (const order of page) {
      yield order;
    }
  }
}

Извикващият не знае за страниците:

for (const order of allOrders(source)) {
  console.log(order.id);
}
Изход
зареждам страница 1
1001
1002
зареждам страница 2
1003
1004
зареждам страница 3
1005
зареждам страница 4

function* allOrders(source) {
  for (let number = 1; ; number++) {
    const page = source.fetchPage(number);
    if (page.length === 0) {
      return;
    }
    for (const order of page) {
      yield order;
    }
  }
}


for (const order of allOrders(source)) {
  console.log(order.id);
}
Стъпка по стъпка, с думи
  1. Цикълът иска първата поръчка. Още нищо не е заредено.
  2. Генераторът още няма страница, затова зарежда страница 1.
  3. 1001: първата поръчка от страницата отива в цикъла, а той я печата.
  4. 1002: от същата страница. Нищо не се зарежда.
  5. Страницата свърши. Едва сега курсорът зарежда страница 2.
  6. 1003 и 1004 от страница 2.
  7. Пак границата: страница 3.
  8. 1005: на страница 3 има само една поръчка.
  9. Страница 4 е празна: поръчки няма повече.
  10. Курсорът казва „няма повече“, и цикълът свършва. Цикълът така и не видя страница.

Изходът е същият, а броенето на страници е на едно място. Когато системата смени начина, по който дава страниците, сменяш генератора, а трите места, които обхождат, не се пипат.

Виж го

Какво прави for-each отвътре

for...of е кратък запис на този цикъл с курсора:

const it = allOrders(source)[Symbol.iterator]();
for (let step = it.next(); !step.done; step = it.next()) {
  const order = step.value;
  console.log(order.id);
}
Изход
зареждам страница 1
1001
1002
зареждам страница 2
1003
1004
зареждам страница 3
1005
зареждам страница 4
for...of вика [Symbol.iterator]() веднъж, а после next() на всяка стъпка, докато done не стане true. Генераторът е свой курсор: [Symbol.iterator]() връща самия него.

Ако искаш нещо, което се обхожда наново всеки път, както списъкът, направи клас, който при всяко обхождане дава нов генератор:

class AllOrders {
  constructor(source) {
    this.source = source;
  }


  [Symbol.iterator]() {
    return allOrders(this.source);
  }
}

Сега for (const order of new AllOrders(source)) тръгва отначало при всяко обхождане, точно както Iterable в Java.

Пробвай

Предвиди изхода

Цикълът спира след третата поръчка. Какво печата програмата?

let shown = 0;
for (const order of allOrders(source)) {
  console.log(order.id);
  shown++;
  if (shown === 3) {
    break;
  }
}
Отговор

Пробвай

Намери грешката

Имейлът до клиентите първо казва колко са поръчките, а после ги изрежда:

const orders = allOrders(new OrderSource(all));
let count = 0;
for (const order of orders) {
  count++;
}
console.log(`Поръчки: ${count}`);
for (const order of orders) {
  console.log(order.id);
}
Изход
зареждам страница 1
зареждам страница 2
зареждам страница 3
зареждам страница 4
Поръчки: 5
Броят е 5, а номерата не излизат. Кой ред трябва да смениш?

Избери реда с грешката.

Идеята

Кога не ти трябват

Template Method има цена: базов клас и наследяване, а наследяването е връзка, която трудно се развързва. Не си струва, когато:

  • форматът е един. Един функция без стъпки е по-ясен;
  • стъпките са една-две. Подай ги като функции, както в картата „Без наследяване“;
  • подкласовете искат да сменят и реда на стъпките. Тогава скелетът не е общ, и насилването му ражда стъпки с if вътре.

Свой Iterator не ти трябва, когато данните вече са в масив: той вече се обхожда. Пишеш свой, когато отзад има нещо, което не е колекция в паметта: страници, файл, който се чете ред по ред, дърво, или безкрайна поредица (номерата на фактурите).

Упражнение

Отчет в Markdown

Реши задачата в редактора си.

Markdown. Сайтът с документацията иска отчета като Markdown таблица. Напиши MarkdownReport, който пише само стъпките. Заглавието е два реда. Report и другите отчети не се пипат. С поръчките от урока:

Изход
| Поръчка | Сума |
|---|---|
| 1001 | 80.00 |
| 1002 | 25.50 |
| **Общо** | 105.50 |

Още задачи

  • Номер на реда. HTML отчетът номерира редовете (<td>1</td>, <td>2</td>), а отказаните не броят. Къде пазиш брояча: в скелета или в HtmlReport?
  • Първите N. Напиши генератор, който дава само първите N поръчки от друг курсор. Колко страници се зареждат за първите три?
  • Само големите. Обходи поръчките от източника и дай само тези над 30 €, пак без извикващият да знае за страниците.

Тест

Провери се

1. Магазинът иска отчет и в JSON. Какво пишеш при Template Method?
2. Защо стъпката open има празно тяло в базовия клас, а header не?
3. Цикъл обхожда генератора на поръчките и спира с break на втората. Колко страници са заредени?
4. Генератор е обходен веднъж до края. Какво прави вторият for със същия генератор?

Създаден от Иво Гергов като част от кампанията на Evo Tech за достъпно обучение по програмиране ·