Используйте угловой интерфейс командной строки
Angular поставляется со встроенным интерфейсом командной строки, который помогает в формировании кода. Вы можете выполнять различные задачи, такие как тестирование, сборка, развертывание и т. Д., И делать рабочий процесс angular быстрее и проще.
Зачем? Рекомендуется для создания приложений angular, поскольку это сэкономит ваше время при установке и настройке необходимых зависимостей и их подключении к приложению.
Использование фиктивных и умных компонентов
Угловые компоненты следует разделять на умные и фиктивные. Интеллектуальные компоненты также известны как компоненты контроллера или компоненты уровня приложения. Фиктивные компоненты - это чистые компоненты или презентационные компоненты, которые следуют только за интеллектуальными компонентами.
Почему? В любом приложении компоненты должны быть написаны таким образом, чтобы его можно было использовать повторно. Фиктивные компоненты - это один из способов создания повторно используемых компонентов. Фиктивные компоненты не содержат данных приложения, и данные должны передаваться от интеллектуального компонента, а презентационный компонент должен присутствовать желаемым образом на основе переданных данных, что с меньшей вероятностью будет содержать ошибки.
Использовать trackBy
При использовании ngFor для перебора массива используйте trackBy, который вернет уникальный идентификатор.
Зачем? При изменении массива приложение angular повторно визуализирует все дерево DOM. Используя trackBy в ngFor, приложение angular знает, какой элемент был изменен, и DOM изменяется только для этого конкретного элемента.
// в шаблоне
‹Li * ngFor =” let item of items; trackBy: trackByFn »› {{item}} ‹/li›
// в компоненте
trackByFn (index, item) {
return item.id;
}}
Правильно используйте let и const
При объявлении переменных правильно используйте const и позвольте
Почему: код станет более читабельным, а использование соответствующих ключевых слов сделает более ясным содержание.
Пример: пусть фрукт = яблоко;
let myfruit = ’My $ {fruit}’
если правда){
myfruit = ’Мой $ {fruit}’
}
Итак, здесь переменная fruit остается постоянной, поэтому мы можем переписать код как
Пример: const fruit = apple;
let myfruit = ’My $ {fruit}’
если правда){
myfruit = ’Мой $ {fruit}’
}
Псевдонимы для импорта
Создание псевдонимов было бы огромным плюсом.
Почему:
Пример: импорт {SiteServiceService} из ../../../site/site-service.service ’;
В приведенном выше примере показано, что SiteServiceService был импортирован из трех папок позади, что трудно читать и понимать. Это можно изменить, добавив фрагмент кода в tsconfog.json и сделав импорт коротким и хорошо организованным.
{
«compileOnSave»: false,
«compilerOptions»: {
удалено для краткости,
«Пути»: {
«@ app / *»: [«app / *»],
«@ env / *»: [«environment / *»]
}
}
}
Теперь вы можете импортировать как
импортировать {SiteServiceService} из ‘@ app / site / site-service.service’;
Правильно используйте внедрение зависимостей
Post Angular 6, если служба создается с использованием angular CLI, ниже будет заметен фрагмент кода
@Injectable ({
providedIn: ‘root’
})
Таким образом, услуга предоставляется на корневом уровне приложения, и новый экземпляр не будет создан при импорте в 2 или более компонентах. Если одна и та же услуга предоставляется в 2 или более компонентах, то каждый раз будет создаваться новый экземпляр услуги. Следовательно, предоставляйте услуги на корневом уровне или на уровне модуля.
Модульная разработка приложения angular
Когда приложение angular растет, разделение приложения на основные, функциональные и общие модули облегчает жизнь. Каждый модуль будет иметь свои собственные компоненты, каналы, директивы, стили и службы.
Основные модули состоят из компонентов, которые будут использоваться во всем приложении, например (Header, Footer, SideMenu).
Функциональный модуль - это набор функций, ориентированных на приложение. Функциональный модуль взаимодействует с корневым модулем, компонентами, директивами, каналами, которые он разделяет, и услугами, которые он предоставляет.
Общие модули состоят из компонентов, служб, каналов и директив, которые могут совместно использоваться несколькими модулями и компонентами, но не обязательно для всего приложения.
Используйте отложенную загрузку
По возможности отложите загрузку функциональных модулей. Ленивая загрузка приложения означает, что вы будете загружать что-то только тогда, когда оно используется, вместо того, чтобы загружать все компоненты или модули сразу.
Почему: отложенная загрузка уменьшит размер загружаемого приложения и ускорит загрузку приложения, поскольку не загружаются все ненужные модули, которые не используются.
Всегда очищать подписки
После подписки на наблюдаемые всегда очищайте подписку, отказавшись от нее.
Почему: Если не отказаться от подписки на наблюдаемые объекты, это приведет к утечке памяти, поскольку наблюдаемый поток остается открытым.
Используйте takeUntil, если хотите прослушивать изменения, пока другой наблюдаемый объект не выдаст значение
частный _destroyed $ = новый предмет ();
public ngOnInit (): void {
iAmAnObservable
.pipe (
map (value = ›value.item)
// Мы хотим слушать iAmAnObservable, пока компонент не будет уничтожен,
takeUntil (this._destroyed $)
)
.subscribe (item = ›this.textToDisplay = item);
}
public ngOnDestroy (): void {
this._destroyed $ .next ();
this._destroyed $ .complete ();
}
Вы можете отказаться от подписки на несколько наблюдаемых, используя частную тему, как в примере выше.
Подписка в шаблоне
Избегайте подписки из компонента и вместо этого подпишитесь из шаблона, используя «асинхронный» канал для наблюдаемого.
Зачем? Подписка на наблюдаемый объект с помощью async pipe помогает в автоматической отмене подписки, что исключает ручное управление подпиской. Кроме того, уменьшается риск случайного отказа от подписки, что приводит к утечке памяти.
Пример: // шаблон
‹P› {{textToDisplay $ | async}} ‹/p›
// составная часть
this.textToDisplay $ = iAmAnObservable
.pipe (
map (value = ›value.item)
);
Не используйте вложенные подписки
Может возникнуть ситуация, когда вам нужно потреблять данные из нескольких наблюдаемых потоков. В таких случаях старайтесь избегать вложенной подписки и вместо этого используйте «forkjoin», «combLatest» или «switchMap».
Почему? Читаемость кода снижается, а сложность увеличивается. Производительность приложения может снизиться из-за вложенных подписок. Результат может быть несогласованным.
Использование конвейерных операторов
Используйте конвейерные операторы при использовании операторов rxjs
Зачем? Операторы конвейера выполняют только нужный нам код и будут включены при импорте.
Приведенный ниже фрагмент кода можно переписать с помощью конвейерного оператора.
импортировать «rxjs / add / operator / map»;
импортировать «rxjs / add / operator / take»;
iAmAnObservable
.map (значение = ›value.item)
.take (1);
as
импортировать {карту, взять} из «rxjs / operator»;
iAmAnObservable
.pipe (
map (value = ›value.item),
take (1)
);
Избегайте "любого" типа
Избегайте использования любого типа при объявлении типа ваших переменных.
Почему? Тип переменной или константы будет определяться присвоенным ей значением. Это вызовет непредвиденные проблемы.
Таким образом, вы можете избежать ошибок, вызванных отсутствующими типами, а также сделать повторный факторинг безопаснее и проще.
Использование правил линта
Использование tslint может обеспечить соблюдение определенных правил для приложения angular. И tslint имеет несколько встроенных опций, таких как «no-any», «no-console» и т. Д.
Зачем? Использование ts-lint повысит согласованность и удобочитаемость кода и уменьшит количество ошибок.
Компоненты должны отвечать за логику отображения
Избегайте наличия бизнес-логики в компонентах и постарайтесь ограничить только логику отображения внутри компонента.
Зачем. Компоненты предназначены для отображения и управления тем, что должно делать представление. Наличие бизнес-логики в сервисах обычно проще для модульного тестирования, а также может быть повторно использовано любым другим компонентом с той же бизнес-логикой.
Всегда избегайте длинных методов
Всегда старайтесь избегать написания одного длинного метода, вместо этого выделяйте операции на несколько более мелких методов и используйте их.
Почему. Длинные методы подвержены ошибкам, их трудно читать, понимать и поддерживать. Длинные методы также затрудняют рефакторинг
Держите его СУХИМ
Всегда старайтесь, чтобы он был СУХИМ (не повторяйтесь). Убедитесь, что у вас нет копии фрагмента кода в нескольких местах.
Зачем? Если вы хотите изменить логику кода, тогда потребуется больше времени для обновления во всех местах, а также это длительный процесс. Его сложно поддерживать, и в нем могут возникать ошибки. Приложение будет быстрее с меньшим количеством повторяющегося кода.
Добавить механизм кеширования
При вызове API ответ меняется не так часто, в таких случаях вы можете добавить механизм кеширования и сохранить данные и использовать их по мере необходимости.
Когда вы запрашиваете тот же API, данные из кеша будут обслуживаться, если данные хранятся в кеше, иначе сделать запрос.
Один из способов добиться кеширования - использовать сервис-воркер.
Почему: скорость работы приложения увеличивается за счет исключения дублирования вызовов API и выполнения вызовов API только при необходимости. Кроме того, один и тот же контент / информация не будет загружаться снова и снова.
Использование управления состоянием
Рассмотрите возможность использования управления состоянием для вашего приложения angular с помощью ngrx. Он использует концепцию redux, которая заключается в том, что любое изменение состояния выполняется путем запуска действия, которое, в свою очередь, отправляет тип и полезную нагрузку редуктору (чистые функции), и изменения выполняются.
Зачем? Ngrx / store изолирует всю связанную логику в одном месте и делает ее согласованной во всем приложении. ngrx / store в сочетании со стратегией обнаружения изменений angular приводит к более быстрому применению.
Неизменяемое состояние
При работе с ngrx / store состояние всегда должно быть неизменным. Вы можете добиться этого, используя ngrx-store-freeze.
Почему: из-за изменения состояния приложение ведет себя непоследовательно в зависимости от загруженных компонентов заказа. Это ломает модель редукции.
Всегда тестируйте свое приложение
Всегда тестируйте свое приложение с помощью Jasmine и Karma, чтобы избежать ошибок и ненужного нарушения пользовательского интерфейса. Попробуйте выполнить TDD (разработку, управляемую тестами), то есть сначала напишите все тестовые примеры, а затем начните разработку на основе тестовых примеров. Таким образом, ни один сценарий не будет пропущен.
Использование Angular Universal
Angular universal позволяет запускать приложение angular на сервере и выполнять рендеринг на стороне сервера, т. Е. (SSR), который обслуживает статические предварительно отрисованные HTML. Это ускоряет работу приложения, так как оно не ждет загрузки и анализа пакетов JS или загрузки angular.
Почему: приложение будет отображаться быстрее и значительно повысит его производительность. Это также позволяет сайту правильно отображаться в фрагментах предварительного просмотра страницы социальных сетей при совместном использовании. Он оптимизирован для SEO, так как angular universal генерирует статический контент и упрощает индексацию для поисковых роботов и делает его доступным для поиска.
