Как настоящий «фуллстек» все могу все умею программист, я часто пишу обе части кода, и часто это достаточно неприятные минуты «яваскрипт» ненависти.
С этим надо как-то бороться, и отличным примером борьбы является использование typescript. В качестве примера будет использован алгоритм игры «жизнь» (см https://ru.wikipedia.org/wiki/Жизнь_(игра))
В PhpStorm поддержка typescript включается плагином, после этого достаточно создать первый файл *.ts и указать параметры компиляции в tsconfig.json (я предпочитаю складывать код js в отдельную папку, чтобы на него не натыкаться при разработке). Я накручиваю сразу все остальные штучки из npm, так как дальше проект обрастает обычно компиляцией css, дополнительными либами и прочая прочая прочая). Полный пример кода можно скачать тут
Шаг 1. Наивный Javascript
Чистый вариант кода, который абсолютно «чистояваскрипт» и кучка переменных. Недостатков масса, и самый «больной» невозможность создать вторую матрицу рядышком с первой. Просто попробуйте.
Шаг 2. Наивный Typescript
Внесем все в класс, но оставим «наивность» работы с dom деревом — и прощай производительность (this.showTable() — полностью перерисовывает таблицу на каждом шаге)
Шаг 3. Экономный Typescript
Вынесем все что можно в константы вообще, а саму клеточку привяжем к ячейке…
Шаг 4. Наследование и почему собственно Typescript
А теперь сделаем вторую матрицу непохожей — пусть жизнь в ней «расползается» из центра игрового поля. Для этого расширим класс матрицы и вынесем «генератор» начального состояния поля в зависимую от положения функцию.