0x00 Предисловие
Я фронтенд-инженер из Ant Financial-Insurance Business Group. Я пишу код в бизнес-отделе крупной фабрики первого уровня. Это очень сложно, но и очень полезно. Бизнес-код отличается от кода фреймворка, личных проектов или проектов с открытым исходным кодом. Он характеризуется сложной логикой, множеством прямых зависимостей, плохим повторным использованием и короткими циклами итераций. Код, который вы так усердно написали сегодня, может выйти в автономный режим после недели онлайн-операции. Инженеры, которые умеют писать код фреймворка и создавать базовую инфраструктуру, не всегда могут хорошо писать бизнес-код.
Некоторые люди говорят, что бизнес-код — это не что иное, как шаг за шагом, элегантный или нет? какая разница? . Но настоящие бизнес-правила намного сложнее, и их нельзя легко решить, просто придерживаясь тыкв. Написание плохого кода может занять вдвое больше времени, чтобы найти и решить проблему, товарищ по оружию.
иногда дляСокращение затрат на повторную разработку и многократное уточнение и ускорение функций с ценностью повторного использования., нам нужно разумно абстрагировать бизнес-код и даже тщательно его разработать.Нелегко написать бизнес-код элегантно. Я всегда считал, что самая большая разница между программированием и перемещением кубиков заключается в том, чтодизайнДва слова: написание кода — это тоже искусство. Воспользуйтесь этой возможностью сегодня, чтобы встатьВзгляд фронтенд-инженера, чтобы поделиться с вами передовыми методами написания бизнес-кода.
0x01 Прогрессивный рефакторинг
Инкрементальный рефакторингнепрерывнона существующем кодеАбстракция, разделение и композиция. Прежде чем заняться рефакторингом кода, вам нужно ответить на два вопроса:
1、什么样的代码需要重构？
2、何时进行重构？
Дизайн не делается в одночасье. Иногда только после написания обнаруживается, что некоторый код можно извлечь и использовать самостоятельно. Код, который необходимо рефакторить, должен соответствовать нескольким условиям:
1、代码后期可复用
2、代码无副作用
3、代码逻辑单一
Преждевременный рефакторинг может привести к потере большого количества времени, поскольку требования меняются слишком быстро; поздний рефакторинг приведет к тому, что риск изменений будет слишком высоким и трудным для сопровождения из-за сложной логики кода и слишком большого количества одинаковых незавершенных работ по коду. Инкрементный рефакторинг показан на следующем рисунке (красная часть — добавленный код):
Во-первых, мы добавили функции в один и тот же исходный файл и обнаружили, что часть кода не имеет побочных эффектов и может быть разделена, поэтому код разделен в одном файле, чтобы сформировать множество модулей с одной функцией. После такой взаимности обнаруживается, что размер одного файла становится все больше и больше.В это время модули, связанные с функциями, могут быть извлечены и помещены в отдельные файлы для унифицированного управления, такие как помощники, компоненты, константы, и т.п.
0x02 высокая сплоченность низкая связанность
Высокая связность и низкая связанность всегда были вечной темой в области проектирования программного обеспечения.Цель рефакторинга — улучшить связность кода, уменьшить степень связанности между функциями и снизить стоимость постобслуживания, особенно написания бизнес-код довольно важно.
Например, новое требование хочет добавить функцию красного конверта на существующую страницу продукта, чтобы привлечь пользователей для активации определенной функции.По нормальной логике мне нужно:
1、在当前页面中引入相关依赖
2、初始化，查询红包相关信息
3、用户点击时，触发红包发送
Белая часть представляет собой код предыдущей версии, а красная часть представляет собой код, который необходимо изменить для выполнения этого требования:
Таким образом, эта функция красного конверта серьезно связана с предыдущим кодом.Если это временное требование, которое нужно запустить только на неделю, то отключать код очень рискованно; если страницу продукта нужно повторяться во время онлайн-операции. , чем дальше, тем неяснее кто есть кто. Разумный дизайн должен выглядеть так:
Разделите функциональный код, не связанный с кодом продукта, поместите его в другой файл, чтобы сохранить состояние всего жизненного цикла внутри, и выставьте наружу только небольшое количество интерфейсов или методов.Таким образом, преобразование только страницы продукта потребности:
1、引入红包组件
2、用户点击时，调用红包组件的发奖方法
Такие изменения минимальны, явны и управляемы. другими словами,Вся функция красного конверта обладает высокой связностью и мало связана с кодом продукта.. Эта практика также приносит еще одно преимущество: я получаюмногоразовыйКомпонент красного конверта!
0x03 Разумная избыточность
Бизнес-требования изменчивы, как и написанный код.Частые абстракции, вероятно, приведут к чрезмерному дизайну, а абстракция, вероятно, станет очень сложной с увеличением числа итераций. В бизнес-сценарии филиала с несколькими переменными, например, истек ли срок действия, посещалось ли действие и была ли задача выполнена, будет несколько вложенных структур «если-иначе», и рекомендуется разработать избыточный код Выбор. Вот пример, иллюстрирующий разумную избыточность:
например, есть такое требование, которое вначале очень простое и требует проектирования двух операционных кабин:
Затем абстрагируйте компонент:
const Item = ({ title, content }) => (
<div>
<h4>{title}</h4>
<p>{content}</p>
</div>
);
Требование теперь требует добавления тега горячего текста к названию первой будки:
Это также легко:
const Item = ({ title, content }, index) => (
<div>
<h4>{title}{index === 0 && <span>hot</span>}</h4>
<p>{content}</p>
</div>
);
Требования снова изменились, требуя: убрать контент в первой будке, и добавить кнопку внизу, добавить гиперссылку справа от названия второй кабинки и добавить подзаголовок:
Сейчас немного противно:
const Item = ({ title, content }, index) => (
<div>
<h4>
{title}
{index === 0 && <span>hot</span>}
{index === 1 && <a href="xxx">去看看</a>}
</h4>
{index === 1 && <h5>副标题</h5>}
<p>
{index !== 0 && content}
{index === 0 && <button>领福利<button>}
</p>
</div>
);
Видно, что раньше абстракция была хороша, а сейчас требования меняются, код совсем другой, а логика суждения двух состояний (первого и второго) смешана посередине. Реальная ситуация, вероятно, будет более сложной, чем эта. Когда логику чередования с несколькими состояниями трудно четко выразить с помощью набора кодов, разумная избыточность является хорошим выбором. Перепишите приведенный выше пример с двумя if следующим образом:
// 第一个展位
if (index === 0) {
return (
<div>
<h4>标题一<span>hot</span></h4>
<p><button>领福利<button></p>
</div>
);
}
// 第二个展位
if (index === 1) {
return (
<div>
<h4>标题二<a href="xxx">去看看</a></h4>
<h5>副标题</h5>
<p>内容</p>
</div>
);
}
Разумное резервирование на самом деле является своего рода реконструкцией, в соответствии с бизнес-логикой и масштабом кода, будь то аналогичная абстракция или избыточность кода, на самом деле это проявление прогрессивного рефакторинга. Независимо от того, какой метод выбран, если бизнес-логика может быть четко выражена, а код всегда можно поддерживать в читаемом и поддерживаемом виде, все в порядке.
Вот пример чрезмерной абстракции.
0x04 Отклонить чрезмерную абстракцию
Глубокая абстракция в коде JavaScript иногда не очень хороша.Студенты с опытом ООП (объектно-ориентированного программирования) склонны к предвзятому дизайну: все структуры данных хотят быть инкапсулированы в класс (класс). На самом деле Class — это плохой дизайн в JavaScript, это не совсем класс. Несколько лет назад я видел, как однокурсник по интерфейсу Java написал такой код:
class DataItem {
constructor(id, name, value) {
this.id = id;
this.name = name;
this.value = value;
}
}
class DataCollection {
constructor() {
this.items = new Array();
}
insert(item) {
this.items.push(item);
}
}
const item1 = new DataItem(1, 'name1', 100);
const item2 = new DataItem(2, 'name2', 200);
const list = new DataCollection();
list.insert(item1);
list.insert(item2);
...
До меня донесся сильный запах Явы. Приведенный выше код не использует преимущества языка JavaScript, а также значительно увеличивает затраты на понимание.Если вы используете идею объектно-ориентированного программирования для написания внешнего кода, особенно бизнес-кода, это это действительно кошмар. Правильное написание выглядит следующим образом:
const list = [{
id: 1,
name: 'name1',
value: 100
}, {
id: 2,
name: 'name2',
value: 200
}];
Поскольку JS является слабо типизированным языком, слабо типизированный язык должен использовать преимущества слабых типов без слишком большого количества определений типов и абстракций классов, а самых примитивных объектов и функций достаточно для простых и сложных бизнес-сценариев. В частности, хочу отметить всем известный менеджер состояний Redux во фронтенде, в Redux состояние — это обычный объект, редьюсер — обычная функция, а действие — обычный объект, без каких-либо ограничений на типы. Потому что это просто, это мощно.
0x05 Зрение Шесть Дорог
Программирование на языке со слабой типизацией означает отсутствие компиляции.Проблема, присущая языку, не требующему компиляции, заключается в том, что в нем отсутствуют необходимые проверки типов перед запуском, а обнаружение проблемы во время выполнения часто может привести к очень серьезным сбоям. Это требует от разработчиков строго следить за качеством кода на этапе написания кода, особенно при написании бизнес-кода.
Интегрированная среда разработки (IDE) имеет ограниченные возможности для интеллектуального запроса кода JavaScript. Во многих случаях невозможно найти все ссылки на переменную или функцию через IDE. В этом случае следует эффективно использовать Ctrl + F для глобального поиска, чтобы гарантировать, что ваши одноточечные изменения не будут изменены, повлияют на другие места. Если вы используете TypeScript, помощь по проверке типов, поиску ссылок будет лучше.
0x06 Сводка
Сегодня я поделюсь с вами некоторым практическим опытом написания бизнес-кода:инкрементный рефакторингявляется мощным оружием для повышения надежности кода; дизайнВысокая сплоченность и низкая связанностьКод может позволить вам ускорить набор общих решений в процессе создания требований;Разумная избыточностьОн может упростить сложные сценарии, делая разработку эффективной и упрощая тестирование;Отклонить из-за абстракции, используйте простоту и гибкость. ДержатьЗрение Шесть ДорогХорошие привычки кода могут улучшить качество кода до более высокого уровня.
Наконец, я надеюсь, что каждый сможет получить опыт и чему-то научиться в реальном процессе разработки, постоянно думать и подводить итоги, а также элегантно писать бизнес-код, что является большой проблемой.
насчет нас:
МыТехническая группа Ant Insurance Experience, от Ant Financial Insurance Group. Мы молодая команда (без бремени исторического стека технологий), текущий средний возраст 92 года (убрать самый высокий балл 8х лет - лидер команды, убрать самый низкий балл 97 лет - брат стажер). Мы поддерживаем практически весь страховой бизнес Ali Group. В 2018 году созданное нами общее сокровище произвело фурор в страховой отрасли, а в 2019 году мы готовили и реализовывали несколько крупных проектов. Теперь, с быстрым развитием бизнес-группы, команда также быстро расширяется.Приглашаем всех мастеров фронтенда присоединиться к нам~
Мы надеемся, что вы обладаете: прочной технической базой, глубокими знаниями в определенной области (узлы/интерактивный маркетинг/визуализация данных и т. д.); способны быстро и непрерывно учиться в процессе обучения; оптимистичны, веселы, живы и общительны.
Если вы заинтересованы в том, чтобы присоединиться к нам, пожалуйста, отправьте свое резюме по адресу:yiyuan.lpy@antfin.com
Автор этой статьи: Ant Insurance - Experience Technology Group - Yiyuan
Адрес Наггетс:micooz