веб - передний конец доля JavaScript общих антишаблоны, Предисловие : антишаблон относится к неспособности разработать общую проблему повторяющихся шаблонов проектирования и неэффективны, говоря , что один и ту же ошибку. В данной статье описываются некоторые общие анти-шаблоны в JavaScript, а также способы их избежать.
HARDCODED
Hard кодировки ( Hard-кодирование) строки, число, дата ...... вы можете написать все мертвые люди пишут вещи будут мертвы. Это анти-модель , включая женщин и детей, но и наиболее широко используется антишаблоном. Hard-закодированы в наиболее типичным является , вероятно , машинный код (Platform-связанной), который относится к коду для конкретной машины или среды может правильно выполнить, может работать только на вашей машине, он может быть только в ОС Windows недогрузки.
Например, в написании сценария НПМ мертвый сценарий путь / Users / harttle / bin / fis3 , причина может заключаться в установке очень трудно и может быть установлен для того , чтобы избежать дублирования, они могут быть просто потому , что это так. В любом случае, это все мои коллеги приходят к вам , чтобы спросить, «Почему я здесь буду жаловаться.» Решение состоит в том, чтобы поместить его в управление зависимостями, если есть определенные требования к версии могут использовать пакет блокировку, если все остальное не может рассматриваться как внешние зависимости могут быть помещены в и удалены из локального файла конфигурации контроля версий (например , как Git).
Например, в Cli инструмент писать специальные папки Death / TMP, ~ / .cache или разделителей или \\ /. Такие строки могут быть получены в основном Node.js встроенного модуля (или другой средой выполнения API), такие , как использование os.homedir, os.tmpdir, как path.sep.
Повторите код
Повторите код ( Дублирование) особенно часто встречается в бизнес - коде, почти все от первоначального намерения поддержания стабильности бизнеса. Например: страница нужна хорошее окно поиска, и на странице B, есть ровно один. Тогда программист брат столкнулся с трудным выбором (если прямая копия будет слегка нарушена словами):
- B копию, хотят изменить способ A.
- В в окне поиска , чтобы реконструировать С, В и А из этого эталонного кода.
Из - за нехватки времени хотят оставить работу рано, или из - за изменения плохой потребности B , чтобы взять на себя ответственность (PM: Почему A B позволяет сделать плохой ответ на этот вопрос является более сложным, когда первый пропуск), поразмыслив решил взять программу через 2.
В этот момент вся эта история очень естественно и очень гладкой, что, вероятно , является причиной повторяющегося кода широко используется. Эта история имеет несколько точек на вопрос:
- B так легко изменить плохое описание B не считает повторное использование. Тогда вы не должны повторно использовать код B, если она не решает взять на себя техническое обслуживание.
- Ответственность B, чем изменить плохой программист брат: был ли ли автор написал тест B, страница тестер регрессионного тестирования B?
- Время работает не обязательно приводит к анти-паттерна, а не в качестве причины, чтобы убедить себя. Есть также краткосрочный план достижения элегантности.
Решение: извлечение кода Б перепланировка образует окно поиска сборки C, чтобы использовать его в странице. Одновременно использовать младший партнер в будущем, в том числе и авторы также призывают к B C мигрировать унифицированное обслуживание.
Ложный AMD
Модульные предназначено для обозначения функции программного обеспечения , разделенного на отдельные модули, причем каждый модуль содержит полную разбивку функции. В JavaScript, он специфичен для контекста сценария нарезают отдельный, многоразовый код означает.
Поскольку JavaScript в качестве исходной страницы сценария, есть много ссылок на глобальную область грамматики, а также многие методы , основанные на глобальных переменных. JQuery пример $, BOM обеспечивают окно, опуская Var определенные переменные. AMD это сообщество JavaScript ранее модульная спецификация. Это джентльменское соглашение, проблема заключается здесь. Есть бесчисленное множество способов , чтобы написать поддельные модули AMD:
- Нет возвращаемого значения. Да, то есть, к побочным эффектам.
- Требует прямое определение. Право, это должно быть выполнено немедленно.
- Побочные эффекты. Изменение окна или другие общие переменные такие как статические свойства других модулей.
- вопросы параллелизм. Неизвестные зависимости легко привести к проблемам параллелизма.
Влияют на общие побочные эффектах , точно так же глобальные переменные, недостатки почти все глобальные переменные: логика выполнения не легко понять, неявные отношения сцепления; письменный тест трудно. Ниже на конкретном примере:
| // Файл: login.js DEFINE ( 'вход', функция () { выборки ( '/ аккаунт / Войти'). то (х => { window.login = верно }) }) требуется ([ 'Войти']) |
Модуль AMD и писать непосредственно в <сценария> нет разницы, точнее неконтролируемой (реализация requirejs не является асинхронной). Она не может быть использована другими модулями (например, для достижения снова войти в систему после выхода), потому что он не вернулся любой интерфейс. Кроме того, наличие этого модуля параллелизм задач (Race Condition): Используйте window.login определить , является ли знак в контакте.
Решение состоит в том, чтобы поместить его абстрактные модули, контролировать его исполнение внешним знаком и получить результаты. В модульном хорошем проекте, конечное состояние всех генерируемой записи APP, общее состояние между модулями рисуются до ближайшего общего предка.
| определить (функция () { возвращать выборки ( «/ счета / логин») .then (() => истина) .catch (е => { console.error (е) вернуться ложным } }) |
расширение Примечания
Примечания намерение состоит в том, чтобы дать читателям лучше понять намерения кода, но на практике может быть как раз наоборот. Например, прямая жизнь:
| // судья Baidu версия телефона более чем 15 если (navigator.userAgent.match (/ Chrome: (\ d +)) [1] <15) { // ... } |
Ха - ха Когда вы читаете этот абзац, я считаю , что выше комментарий успешно потреблять ваше время. Если в первый раз вы видите такие комментарии могут быть невероятно, но истинные проекты большинства комментариев этого состояние. Поскольку код не всегда помнить , чтобы поддерживать указания по техническому обслуживанию, кроме поддержания кода, как правило , больше , чем один человек. Осложнения программы на языке C , чем переменная с именем «Чанг написал комментарий» также очень плохое учение.
Четкое решение использовать логику для размещения комментариев, пример код переписан следующим образом:
| если (isHttpsSupported ()) { // Функция извлекая + имя, чтобы избежать добавления комментариев } функционировать isHttpsSupported () { вернуть navigator.userAgent.match (/ Chrome: (\ d +)) [1] <15 } |
Функция-расширение
«Обычно» думают глобальные переменные и классы алгоритмов функционально-расширений являются осложнением. Но сложные бизнес-сценарии и алгоритмы действительно разные, первая имеют больше необходимости объяснять концепцию и эксплуатацию и отделку. Завершение бизнеса-логики наиболее эффективных методы и средства для извлечения переменного именования, чем (конечно, также имеет соответствующее закрытие или объект).
Но в реальном обслуживании бизнеса, остается рациональный не легко. При входе в десятки раз один и тот же файл , чтобы добавить бизнес - логику, ваша функция будет до тех пор , и вонючий , как шлюха привязок:
| Функция SubmitForm () { var username = $('form input#username').val() if (username === 'harttle') { username = 'God' } else { username = 'Mortal' if ($('form input#words').val().indexOf('harttle')) { username = 'prophet' } } $('form input#username').val(username) $('form').submit() } |
这只是用来示例，十几行还远远没有达到“又臭又长”的地步。 但已经可以看到各种目的的修改让 submitForm() 的职责远不止提交一个表单。 一个可能的重构方案是这样的：
| function submitForm() { normalize() $('form').submit() } function normalize() { var username = parseUsername( $('form input#username').val(), $('form input#words').val() ) $('form input#username').val(username) } function parseUsername(username, words) if (username === 'harttle') { return 'God' } return words.indexOf('harttle') ? 'prophet' : 'Mortal' } |
在重构后的版本中，我们把原始输入解析、数据归一化等操作分离到了不同的函数， 这些抽离不仅让 submitForm() 更容易理解，也让进一步扩展业务更为方便。 比如在 normalize() 方法中对 input#password 字段也进行检查， 比如新增一个 parseWords() 方法对 input#words 字段进行解析等等。
总结
常见的反模式还有许多，比如 == 和 != 的使用；扩展原生对象；还有 Promise 相关的 等等。