Общение в веб-интерфейсе

На основе унифицированного стека React/React-native

автор оригинальной статьиJerry

Атрибуты C-стороны продукта определяют, что горизонтальный охват стека интерфейсных технологий велик, а требования к высокой доступности интерфейсных приложений высоки. Текущие платформы разработки включают IOS, Android, React-native, Web, Языками разработки в основном являются Java, javascript и Object-C.

Как понять переднюю часть, как показано на следующем рисунке:

Это типичная модель среднего/малого внешнего интерфейса: Native обеспечивает вывод среднего уровня, а Web и ReactNative обеспечивают поддержку бизнеса.

Веб-разработчики должны заботиться о трех взаимодействиях и двух совместимости:

Взаимодействие с пользователем
- Взаимодействие с пользователем — это прототип дизайна, основанный на принципах взаимодействия человека с компьютером и архитектуре продукта.
- Схема взаимодействия пользователей будет скорректирована, поскольку результат толкает назад, например:
Получите доступ к сторонней веб-странице A, ожидая, что A будет отображаться на нашем сайте B в качестве подпроцесса, и во время процесса взаимодействия B Может общаться с процессом А. Из-за ограничений безопасности, как нелегальное лицо, часто не разрешается напрямую управлять элементами в A в B. В это время рекомендуется отображать A в виде всплывающего окна, и закрыть процесс А сразу после обработки. Перейдите к следующему шагу в B. Таким образом, учитывается эстетическое чувство, а процесс проектирования становится более разумным. Следовательно, для достижения бизнес-требований в слабых сценариях веб-разработка должна сообщать о проблемах и давать предложения.
фоновое взаимодействие
- Веб-разработчики, процесс фонового взаимодействия сокращает количество взаимодействий, явно требует данных, сокращает возврат избыточных данных, оптимизирует обработку ошибок
Взаимодействие с приложением
- Веб-разработка должна определять конкретные входные и выходные параметры и максимально повторно использовать существующие интерфейсы.
совместимость системы
- C-конечные продукты предназначены для большинства пользователей. Совместимость в системе должна рассмотреть возможность совместимости браузера различных производителей, совместимости версии браузера и совместимости платформы приложений. Совместимость браузера может быть решена независимо от перевода и прокладок. Совместимость платформы зависит от разработчиков приложений для обеспечения решений и сотрудничества в Интернете.
API версия совместимость
- Совместимость версий API, фоновый API, APP API. API не различает временную версию фонового процесса, только сопряженную оптимизацию интерфейса. APP необходимо учитывать фрагментированную версию, новые интерфейсные решения APP для того, как работать со старой версией APP.
Дизайн взаимодействия относится к ограничениям, согласованным дизайнерами в соответствии с бизнес-требованиями, в сочетании с потребностями и ограничениями каждой стороны, а определенные входы дают определенные результаты.
👆 Интерфейс — это документ, хорошее ограничение интерфейса, может уменьшить сложность и сотрудничество с каждой стороны.

стек технологий

HTML5 (краткое введение в более полезные технические моменты)
- PostMessage: решение междоменных проблем с взаимодействием между окнами
- LocalStorage/SessingStorage: веб-хранилище данных
- Холст: рисование графики, HTML в PDF
- Видео/аудио: воспроизведение потокового мультимедиа
- Ввод: заполнитель, тип ввода число/дата/текст/пароль, минимальная/максимальная длина, отключить
- requestAnimationFrame
- WebGL
- IndexDB
- .....
Sass/less/Css
- Блочная модель и различия между разными браузерами
- Схема адаптации мобильного терминала: rem, vm
  - rem: установка размера шрифта корневого узла HTML путем динамического расчета соотношения между размером экрана и размером дизайна.Отображение глобального стиля основано на адаптации шрифта корневого узла.
  - vm: на основе процента области просмотра
- дизайн модуля стиля
  - Извлечение общего стиля, модульное введение
  - предобработка стилей postCss
Ajax/fetch
- AxiosБиблиотека запросов инкапсулирована на основе xmlHttpRequest и часто используется в сценарии запроса сетевых ресурсов.
  - Абстрагируйте экземпляр Axios и инициализируйте различные объекты сетевых запросов в соответствии с различными сценариями с помощью конфигурации. Например: веб реализует фоновое взаимодействие между сервером API A и сервером API B, а фон определяет различные правила взаимодействия.
```
   const axios = require('axios');
   export const axiosA = axios.create('https://server.a.com',{
        baseURL:"https://exampleA.api.com"
   })
   export const axioB = axios.create('https://server.a.com',{
                         baseURL:"https://exampleB.api.com"
                    })
```
- fetchИнтерфейс абстрагирует объекты заголовков, запросов и ответов.
DOM/BOM API
- Интерфейс DOM CRUD
- Поток событий DOM, захват событий, цель события, пузырьковое распространение событий
- Интерактивный интерфейс браузера BOM, навигация по пути, запрос информации о браузере, преобразование base64, информация об экране
Синтаксический сахар, такой как ES6
- Object
- const/let
- Promise
- class
- Символ (новый базовый тип)
- async/await (как реализовать?)
- ...
React
- Жизненный цикл
  - Функция создания цикла
  - Функция хука цикла обновления
  - уничтожить компонентWillUnmount
- Общение отца и сына/общение брата
  - Значения передаются между компонентами связи родитель-потомок, данные передаются в одном направлении,
  - Общение между братьями и сестрами, управление информацией о синхронизации состояния через общий родительский компонент
- Управление состоянием, глобальное управление состоянием, управление состоянием компонента
  - Глобальный статус: окно подсказки, маршрутизация, управление разрешениями
  - Управление состоянием компонента: данные страницы, эффекты взаимодействия
- Усовершенствованный дизайн компонентов
- Универсальный дизайн компонентов пользовательского интерфейса
- Воспроизведение компонентов
- Оптимизация производительности рендеринга
- Механизм обновления дерева Virtual DOM
- разрезание времени
React-router
- Концепция дизайна React-маршрутизатора
- компонентный дизайн
- Разделение кода на основе маршрутов
Redux
- Концепция дизайна REDUX
- Управление общими данными
- Дизайн согласованности данных
Antd/Antd-mobile
- Настроен с использованием
- нагрузка по требованию
echart
- Внешний дизайн модели данных
- дизайн бизнес-компонента
Babel
- Babel 6/Babel 7
- Presets/Plugins/Transform/Polyfill
- Понижение синтаксиса (мобильная совместимость)
Eslint
- проверка стиля кода аирбнб
- Как использовать Конфигурация упаковщика использует Конфигурация редактора IDE с помощью
webpack
- Базовая конфигурация
- Вставить использование
- Индивидуальная локализованная среда разработки
- Анализ упаковки
npm/yarn
- Спецификация разработки пакета npm
- сценарии использования пряжи
- nrm
- nvm
- зеркальный переключатель
git
- Процесс разработки Git.
- git советы
- Объединенный код, разрешение конфликтов
- git rebase и как перебазировать
Browser Environment
- Меры безопасности браузера
  - Та же политика происхождения
  - Политика защиты контента
- Браузер работает
- Инструменты разработчика браузера
- Совместимость с браузером
Спецификация CommonJS
- История развития
HTTP-протокол Протокол прикладного уровня основан на протоколе связи TCP/IP. Формат сообщения HTTP: строка запроса, заголовок запроса, пустая строка и данные запроса должны состоять из четырех частей.
- тайник Чтобы улучшить веб-производительность, вы должны сначала понять стратегию хранения кеша, стратегию аннулирования и стратегию сравнения кеша.
- cookie
- CORS
- Session
- Версии HTTP
- CSP
- Коды состояния HTTP
- HTTP Method
- HTTP Headers
Nginx
- Обратный прокси и прямой прокси
- Подробное интерфейсное использование
  - Правила сопоставления путей конфигурации одностраничного приложения
  - Прозрачная передача информации заголовка пользовательского запроса
  - gizp-конфигурация
  - переадресация через прокси
Jekins
- Шаги интеграции Дженкинса
- Подробное объяснение нескольких сред
Фреймворк пользовательского интерфейса
- Bootstrap
веб-фреймворк
- React
- Vue
- Angular
React-нативный фреймворк
- основные компоненты
- макет
- конфигурация маршрутизации
сторонняя библиотека
- lodash
- moment
- Crypto-js
- xlsx
- codemirror
- medium-editor
- shelljs
- yeoman
Webview
- основные понятия веб-просмотра
- Различия между разными платформами
- Отличия разных версий системы
- Кроссплатформенная коммуникация
Typescript/Flow
- Сцены для использования Большая интерфейсная команда, без рендеринга интерфейса на Тайване - небольшой режим совместного интерфейса
SEO дружественный
- поисковый робот
- Поделиться на социальных платформах
- рендеринг на стороне сервера
- богатый медиа объект
Лицензия MIT\BSD, понимание лицензий с открытым исходным кодом поможет нам избежать рисков, связанных с авторскими правами, в процессе выбора фреймворков с открытым исходным кодом.