236просмотров
19 января 2026 г.
Score: 260
Простой пример сокрытия императивного кода за декларативным интерфейсом Для начала вспомним, что декларативное программирование фокусируется на описании желаемого результата, вместо указания пошаговых действий. Основное преимущество этого стиля в том, что он делает код короче и выразительнее, скрывая детали реализации. Простой пример, где isLoading отвечает за блокировку кнопки Submit: function CreateOrder(props) { const [isLoading, setLoading] = createSignal(false); function onSubmit() { setLoading(true); props.onSubmit() .then(() => {/ ... /}) .catch(() => {/ ... /}) .finally(() => setLoading(false)); } return <Form onSubmit={onSubmit}>...</Form>; } Императивным тут является только onSubmit, который, помимо основной задачи, контролирует состояние формы через setLoading. Разделяем ответственность и скрываем часть императивного кода внутри useLoading: function CreateOrder(props) { const [isLoading, submit] = useLoading(props.onSubmit); function onSubmit() { submit() .then(() => {/ ... /}) .catch(() => {/ ... /}); } return <Form onSubmit={onSubmit}>...</Form>; } Теперь onSubmit выглядит чище и отвечает только за то, что и должен. П.С. Для SolidJS useLoading может выглядеть так: import { type Accessor, createSignal } from 'solid-js'; export function useLoading< T, P extends any[], A extends ((...args: P) => Promise<T>) | undefined >(action: A): [Accessor<boolean>, A] { const [loading, setLoading] = createSignal(false); const handler = action && (((...args: P): Promise<T> => { setLoading(true); return action(...args).finally(() => setLoading(false)); }) as A); return [loading, handler]; }
236
просмотров
1729
символов
Нет
эмодзи
Нет
медиа

Другие посты @around_dev

Все посты канала →
Простой пример сокрытия императивного кода за декларативным — @around_dev | PostSniper