Два типа мышления
Параметры: +DRY, -KISS
В программировании (да и в жизни в целом) есть два типа мышления — условиями и связями. Второе, на сегодняшний день, является самым лучшим и оптимальным видом мышления, ведь благодаря ему не приходится останавливаться, вы можете его переиспользовать, и, тем самым, не повторяться. Но оно чуть сложнее первого типа мышления.
Приведем пример из жизни — у нас есть дорога, по ней едет транспорт. Первый образ мышления — это светофоры, которые переключаются чтобы одни ехали, а другие ожидали своего хода. Так вот второй способ мышления — это отсутствие светофоров и постройка дороги так, чтобы никто никого не ждал и не останавливался, все движение постоянно и, по своей траектории, перетекает от одного пути в другой.
Рассмотрим на примере кода. У нас есть enum — список типов данных на служебном языке:
STRING
BOOL
DATE
INTEGER
DATETIME
DECIMAL
Мы должны обработать этот список так, чтобы выводить человеко-читаемые слова в зависимости от типа данных.
Условным (первым) типом мышления мы бы сделали так:
1) Добавили выборку switch в компоненте
component.ext
switch (type) {
case 'DATE':
return 'Дата'
case 'STRING':
return 'Строка'
case 'BOOL':
return 'Булево'
case 'INTEGER':
return 'Число'
case 'DECIMAL':
return 'Десятичное'
case 'DATETIME':
return 'Время'
default:
return 'Без значения'
}
Типом мышления "Связи" (вторым) мы бы сделали так:
1) Создадим глобально (или локально) config file:
configs/data-types.js
// так же будет использоваться в select компонентах
export const dataTypes = [
{
name: 'Строка',
value: 'STRING'
},
{
name: 'Булево',
value: 'BOOL'
},
{
name: 'Дата',
value: 'DATE'
},
{
name: 'Число',
value: 'INTEGER'
},
{
name: 'Время',
value: 'DATETIME'
},
{
name: 'Десятичное',
value: 'DECIMAL'
}
]
2) Добавим рядом вид-по-ключу (позволяет сделать вид "value: name" из массива):
configs/data-types.js
export const dataTypesKeys = {}
dataTypes.forEach(({ value, name }) => dataTypesKeys[value] = name)
3) Добавим выборку в компоненте:
component.ext
import { dataTypesKeys } from 'src/configs/data-types'
const func = type => dataTypesKeys[type]
func('BOOL') // Булево
Подведем итоги способов мышления
1) С помощью первого образа мышления мы получили довольно простой механизм связи текста к служебным данным, но переиспользовать это мы уже не способны (лишь вынести в отдельную export функцию, но тогда мы потеряем чистоту статичных данных). А это большой минус, так как мы нарушаем DRY, хоть и потакаем KISS.
2) Второй способ мышления сложнее, но его можно переиспользовать и, благодаря ему, открывается множество способов на расширение, например мы можем модернизировать исходный массив в различные конфигурации объектов или массивов, как мы сделали под конец примера.
3) Благодаря второму способу мы можем с легкостью добавлять статичные данные и они будут доставлены во все компоненты и все зависимости.
4) Из минусов второго примера можно отметить, что при получении не записанного type мы получим undefined, а в первом мы способны поставить default опцию в switch и обработать это значение. Но нам стоит уточнить один важный факт: на back-end и на front-end статичные enum-ы должны иметь одинаковый набор данных, иначе это ожидаемая ошибка. Этот случай легко обходится во втором способе мышления добавлением нескольких символов:
component.ext
import { dataTypesKeys } from 'src/configs/data-types'
const func = type => dataTypesKeys[type] ?? 'Без значения' // look at me
func('BOOL') // Булево
5) Этот подход работает только на статичных данных, динамичные же мы получает с нашего API.
6) Таким образом мы создали единственный главный источник истины и положили его глобально в директорию configs.