Фронтенд-инжиниринг — это, по сути, один из видов программной инженерии. Разработка программного обеспечения сосредоточена на производительности, стабильности, доступности, ремонтопригодности и т. д., при этом основное внимание уделяется базовой эффективности разработки и эффективности эксплуатации, а также думается об эффективности обслуживания. Вся работа, направленная на это, является «инженерным проектированием». Инженерия — это идея, а не технология.
В этой статье вы можете узнать:
- Как сделать небольшую программу поддерживает SCSS;
- как скомпилировать проект через gulp;
- Пакеты модулей, обычно используемые в проектах;
- Как элегантно взаимодействовать между апплетом и веб-представлением;
- Централизованно управляйте своими проектами, чтобы улучшить ремонтопригодность;
- Написание небольших инструментов для повышения эффективности разработки;
Весь полный текст основан на оригинальной разработке апплета, и разработка различных сторонних фреймворков не включена в этот список. Я не буду подробно расписывать процесс построения всего проекта, но выделю некоторые важные моменты, которые, как мне кажется, существуют в процессе разработки, и изложу их подробно.
Ямы, с которыми можно столкнуться в процессе разработки обычных небольших программ
Перечислите некоторые общие
- Сам апплет не поддерживает обычно используемый прекомпилятор css, в результате чего спецификации стилей случайным образом разбросаны по разным файлам, которыми невозможно управлять единообразно.В современной разработке интерфейса меньше, sass или стилус могут повысить эффективность css;
- Отсутствие единого запроса на перехват запросов;
- Отсутствие единого управления маршрутизацией;
- Отсутствие централизованного управления адресом API и переменными среды ENV;
- Отсутствие единого управления чтением локального кеша;
- Дублирование страниц веб-просмотра;
- Не поддерживает расширенный синтаксис выше ES7, такой как асинхронное ожидание и другие функции;
- Независимо от того, является ли это пробной версией или версией для разработки, может быть только одна среда, после выпуска тестовой среды предварительного просмотра ее сложно переключать;
- Прежде чем выходить в интернет, вам нужно вручную изменить онлайн-среду, которая подвержена ошибкам...
Как решить?
Чтобы решить инженерную задачу, нам нужно начать с двух точек зрения:развивать && развертывать.
развивать
Question
- Как повысить продуктивность разработки?
- Как уменьшить сложность обслуживания кода?
Program
- Сформулировать спецификации разработки и улучшить способность к командной работе;
- Используйте инструменты автоматизированной компиляции, чтобы проекты могли поддерживать различные плагины и инструменты для повышения эффективности;
- Разработка модуля/компонента;
- Все места, которые нуждаются в центральном управлении, упакованы равномерно;
развертывать
- переключатель среды;
- прессованная упаковка;
Строительство проекта
полная структура каталогов
Процесс развития
Выбор инженерной программы
Для широко используемых в настоящее время инженерных решений веб-пакеты, роллапы, парцеллы и т. д. обычно используются при упаковке и обработке одностраничных приложений, в то время как небольшие программы по своей сути являются «многостраничными приложениями» и имеют некоторые специфические конфигурации. По решаемой задаче это не что иное, как компиляция файлов, их модификация и копирование.Для этих требований мы считаем, что gulp на основе потока очень подходит для обработки, и настраивать многостраничные приложения проще, чем webpack . Поэтому рекомендуется использовать инженерное решение малых программ.gulp.
Start
Инициализируйте проект со следующей структурой
-
srcкаталог для разработки -
dist(Отображается после включения компиляции) — это каталог предварительного просмотра/загрузки. -
.gitignoregit загрузить игнорировать файлы -
gulpfile.jsфайл конфигурации сборки -
CHANGELOG.mdЖурнал изменений версий -
README.mdпроектная документация -
package.jsonфайл конфигурации проекта
Скомпилированные плагиныДля самостоятельной установки используйте npm или yarn, процесс установки описан не слишком много, да и искать его самостоятельно не будете.
"gulp": "^3.9.1"
"gulp-sass": "^4.0.2"плагин компилятора scss
"gulp-postcss": "^6.4.0"Мощный плагин для обработки css
"gulp-rename": "^1.2.2"изменить имя файла
"gulp-replace": "^1.0.0"заменить содержимое
"gulp-changed": "^3.2.0"обнаруживать изменения
"autoprefixer": "^6.5.1"добавить префикс автоматически
Как использовать ссс?
Конфигурация gulp и упаковка sass очень проста, единственное, на что следует обратить внимание, это использование @import, wxss поддерживает импорт стилей, но, как было сказано выше, апплет является прирожденным многостраничным приложением, и каждая страница соответствует wxss, поэтому упаковка sass будет Импортированный файл упаковывается в текущий файл, что приводит к увеличению размера текущего файла. Поскольку WeChat ограничивает код одного пакета не более чем 2M, когда создается все больше и больше CSS, этот метод упаковки неизбежно будет делать файл стиля все больше и больше.
Решить проблемы импорта импорта
Как решить проблему импорта импорта на самом деле относительно просто, Грубо говоря, когда sass обрабатывает, достаточно позволить ему не обрабатывать операторы в части импорта. Есть два способа сделать это, первый — переписать исходный код, обработанный sass, и пропустить его при встрече с оператором импорта. Во-вторых, прежде чем передать файл в sass для обработки, мы сначала закомментируем оператор импорта, чтобы он был проигнорирован во время обработки sass.Когда обработка sass завершена, просто откройте закомментированный оператор. Очевидно, что стоимость первого относительно высока, и его непросто обслуживать, поэтому мы используем второй.
Имея дело с импортом, есть еще одно место, на которое следует обратить внимание. В sass, помимо импорта CSS, импорт также может импортировать переменные и функции. Поэтому при обработке тоже нужно обращать внимание на различие.Переменные и функции лучше всего хранить в отдельной файловой директории, а при импорте переменные и функции должны быть переданы в sass для обработки, то есть их нельзя закомментировано. Поэтому мы отдельно настроили место, где хранятся переменные и функции sass, чтобы когда мы сталкиваемся с таким оператором импорта при упаковке, мы пропускали его и передавали в sass для обработки, иначе это означает, что общий файл стиля был введено, поэтому перед тем, как передать его в sass для обработки, мы сначала закомментируем его, а затем откроем комментарий после завершения обработки sass.
Полная реализация поддержки scss выглядит следующим образом:
- Указывает каталог обработки файла
- gulp-replace аннотирует операторы @import путем сопоставления регулярных выражений
- Определите, существует ли текущий оператор @import в пути конфигурации файлов переменных и функций.
- Напишите, если не существует, пропустите, если есть
- включить gulp-sass для компиляции файлов scss,
- Совместимая обработка стилей для младших версий ios и android через postcss
- gulp-rename меняет суффикс файла на .wxss
- gulp-replace открывает комментарии с помощью регулярных выражений, соответствующих операторам @import
- Наконец, войдите в каталог dist
код показывает, как показано ниже
Скопируйте остальные страницы, будьте осторожны, чтобы исключить файлы scss, или используйте gulp-clean для очистки ненужных файлов.
Создать задачу мониторинга
Создать задачу выполнения по умолчанию
Поместите сгенерированный каталог dist в инструмент разработки апплета в качестве корневого каталога, чтобы обновить апплет предварительного просмотра в режиме реального времени.На данный момент ваш проект полностью поддерживает scss.
Улучшите ремонтопригодность вашего кода — инкапсуляция
перехватчик запроса запроса
wx.requestЭто наиболее часто используемый API в небольших программах.В реальных проектах будет много потребностей, которые нужно перехватывать/отправлять/обрабатывать единообразно, поэтому нам нужно повторно инкапсулировать wx.request для поддержки различных требований для достижения удобства сопровождения кода. Сам апплет уже поддерживает синтаксис обещания,
использовать здесьpromiseупаковать в общий.thenформа
Что делать?
- Общие параметры могут быть отправлены единообразно через заголовок и данные, такие как токен аутентификации запроса, идентификатор пользователя и другая информация...
- Обработка перехвата ошибок может выполняться единообразно, например, глобальная оценка состояния входа в систему, обработка специального кода...
- Он может адаптироваться к среде запроса в соответствии с конфигурацией, такой как Mock, Dev, Test, Slave, Prod...
Особенности, которые необходимо поддерживать
- метод запроса
- Передача параметров
- обратный вызов успеха
- обратный вызов с ошибкой
- Включить ли фиктивные данные
- Отображать ли загрузку при запросе
- Показывать ли всплывающее уведомление, когда запрос неверен
Код
существуетapp.jsВнесите его в файл входа и смонтируйте его на объект App.Когда вам нужно его вызвать, вы можете передать егоgetApp()способ позвонить
index.jsНапример, введение API будет представлено позже:маршрутизатор
Основная цель инкапсуляции маршрутизации — предотвратить разрозненные файлы адресов маршрутизации, которыми нельзя управлять централизованно.
Функции, которые необходимо поддерживать
- Нет маршрутизации параметров и маршрутизации параметров
- аббревиатура адреса маршрута
- Передача параметров
- Задержка перехода
- Тип прыжка
КодОпределите объект, в котором хранится адрес маршрутизации, который напрямую соответствует значению ключа при использовании.
path(路由地址)、query(参数)，duration(跳转延时)，openType(跳转方式);Место хранения
разумныйStroageИнкапсуляция методов позволяет более элегантно управлять локальным кешем. Эта функция должна поддерживать три часто используемыхsetItem(设置缓存)、getItem(读取缓存)、clear(清除缓存)метод, и лучше всего организовать набор спецификаций для записи в кеш внутри вашей команды.Не разбрасывайте его по всему миру.Вы должны разделить и получить доступ по некоторым модулям,чтобы лучше поддерживать информацию о вашем локальном кеше .
Код
Поддерживается как запись, так и чтениеkey ---> valueОбычный способ также совместимkey--->value--->moduleРежим модуля по умолчанию установлен в синхронный режим.Причина добавления catch - чтобы апплет не выдавал аларм и не устанавливал ошибки кеша в особых случаях.Если сообщается о синхронной ошибке, используется асинхронная отказоустойчивость.setItemкэш записи
Адрес API и управление переменными среды ENV
Переменные API-адреса и ENV-среды могут быть настроены в виде двух отдельных файлов конфигурации. Файл API хранит только путь интерфейса, а Env хранит несколько переменных среды. Объект среды сконфигурирован с различными доменными именами текущей среды, а затем вapp.jsНастройте текущую переменную среды в качестве значения ключа, чтобы она соответствовала среде в ENV, подключите соответствующую среду к объекту приложения и взаимодействуйте с ранее инкапсулированным fetchApi дляenv+urlспособ добиться автоматической адаптации к окружающей среде.
API
единый веб-просмотр
Апплет WeChat предоставляет возможность встраивать HTML-страницы в апплет.Начиная с базовой библиотеки апплета WeChat 1.6.4, в апплет можно поместить компонент для связывания HTML-страницы. Благодаря этому мы можем легко интегрировать страницу h5, совместно используемую несколькими концами, в апплет, что значительно снижает для нас рабочую нагрузку.
Если у вас есть несколько страниц веб-просмотра, которые необходимо интегрировать, вам на самом деле не нужно создавать отдельный файл для каждой страницы, вам нужно просто инкапсулировать общую страницу веб-просмотра с маршрутизацией для централизованного управления страницами веб-просмотра.
Код
wxml представляет компоненты веб-просмотра и анимацию загрузки, компоненты веб-просмотра получают адреса и загружают успешные обратные вызовы.
Как решить проблему переключения нескольких сред
В отличие от веб-страницы h5, пока апплет развернут в соответствующей среде, вы можете свободно вводить указанное имя домена среды для тестирования, но у апплета нет URL-адреса, как у приложения, у него есть только сама предварительная версия, и обычный процесс происходит каждый раз. Когда учащимся тестирования необходимо провести тестирование в разных средах, им нужно найти студентов-разработчиков, чтобы они вручную изменили среду и повторно выпустили тестовую версию. Такой процесс очень негибкий, поэтому нам нужно придумать способ, позволяющий небольшой версии программы свободно переключаться между несколькими средами без ручного изменения конфигурации кода и публикации.
Как добиться?Есть много идей для реализации.Главная проблема, которую нужно решить, это как переключать окружение.Здесь я использую апи апплета, воспринимающего гравитацию, для имитации встряхивания, и втираю переключающее окружение в скрытую маленькую пасхалку. tester Просто встряхните всплывающий список параметров среды и щелкните соответствующий параметр, чтобы изменить свойство среды env в конфигурации объекта приложения для успешного переключения среды.
Код
Как автоматически упаковать среду развертывания, чтобы предотвратить возникновение ошибок при настройке вручную
На самом деле здесь до сих пор используется gulp для реализации упаковки кода в разные окружения, его очень легко настроить, это не что иное, как настроить переменные окружения app.js при упаковке через gulp-replace, но нужно взаимодействовать с Инструменты разработки WeChat. Вам нужно только включать эту функцию каждый раз, когда вы выпускаете обзор версии пользовательской команды обработки.
gulpfile.js
Выше перечислены инженерные решения, часто используемые в процессе разработки. Надеюсь, это послужит ориентиром для всех. Если у вас есть какие-либо вопросы, пожалуйста, поправьте меня.