Нажмите здесь, чтобы опубликовать эту статью в LinkedIn »

Когда мы беремся за новый интерфейсный проект, дизайнеры предоставляют нам веб / мобильное представление веб-сайта. Иногда они отличаются друг от друга, и, как программисты, мы должны быть уверены, что пишем код, пригодный для повторного использования и простой в обслуживании для таких ситуаций.

Проблема:

Как создать простую систему, которая позволит нам отдельно создавать компоненты для настольных компьютеров, планшетов и мобильных устройств, не нарушая при этом кодовую базу?

Решение:

Их много. Я выберу свой любимый, который мне нравится использовать.

Познакомьтесь с отзывчивым сервисом

Обычно я создаю службу, которая отвечает за определение устройства или размера экрана, на котором пользователь видит веб-сайт. Это можно сделать как минимум двумя способами.

  1. Знаменитое регулярное выражение:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
   console.log('mobile device detected'
}

2. Ширина экрана.

var width = window.innerWidth;
 if (width <= 768) {
  console.log('mobile device detected')
 } else if (width > 768 && width <= 992) {
  console.log('tablet detected')
 } else {
  console.log('desktop detected')
 }

Какой использовать?

Требования проекта могут вынудить вас использовать оба или один из них. Решение остается за вами.
Практическое правило здесь заключается в том, что если есть функции, которые веб-сайт предлагает только на мобильных устройствах, например некоторые специальные всплывающие окна, кнопки, телефонные ссылки, - используйте первый метод. В противном случае всегда работает второй способ.

Пример responseive.service.js выглядит так:

Метод checkWidth() устанавливает свойство screenWidth в соответствии с размером экрана. При необходимости это свойство можно использовать в других сервисах и компонентах. Но это свойство не будет использоваться, если пользователь попытается изменить размер экрана на своем рабочем столе или повернуть свои мобильные / планшетные устройства в альбомную ориентацию. Для этого мы создали тему rxjs под названием isMobile. На эту тему можно подписаться в любом компоненте / сервисе, чтобы знать, смотрим ли мы на мобильное представление или нет.

Если сейчас что-то неясно, ничего страшного, потому что я еще не сказал вам, как использовать метод изменения размера Angular. Теперь посмотрим на код.

Вот образец app.component.html

Здесь мы используем метод изменения размера Angular window:resize. Каждый раз, когда размер div с классом app-body изменяется, срабатывает метод onResize().
Этот метод определен в файле app.component.ts:

Здесь мы сначала подписываемся на метод getMobileStatus() в файле responseive.service.ts. Помните, что Observable бесполезен, если на него не подписаны. После того, как вы подписались на него, вы вызываете метод onResize(). Это сделано для того, чтобы при первом заходе пользователя на веб-сайт вы знали, на каком экране находится пользователь. Допустим, после этого пользователь пытается изменить размер окна браузера. Будет запущен метод onResize(), который вызывает метод checkWidth() в responseiveService.

Если вы прокрутите вверх и проверьте службу, вы заметите, что метод onMobileChange() вызывается с аргументом true или false в зависимости от размера экрана. Этот метод является ключевым ингредиентом, поскольку он генерирует логическое значение, которое может быть уловлено каждым подписанным компонентом.
Итак, если пользователь изменяет размер окна браузера, размер экрана проверяется и выдается логическое значение. Любой компонент, подписанный на метод responsiveService.getMobileStatus(), узнает, смотрит ли пользователь на мобильное устройство, планшет или компьютер.

Таким образом, вы действительно можете уменьшить беспорядок в компонентах. В качестве примера возьмем этот компонент sample.com, который использует директиву * ngIf для отображения пользователю различных HTML в зависимости от того, какой размер экрана он использует.

Надеюсь, это понятно и полезно. Ваше здоровье!