1. Предыстория и текущая ситуация
С ростом сложности фронтенд-разработки повсюду расцветают различные превосходные фреймворки для компонентов. В то же время мы сталкиваемся с быстрым развитием масштабов бизнеса и постоянным расширением команды инженеров, поэтому необходимо решать такие задачи, как интеграция ресурсов, разработка модулей, развертывание проектов и оптимизация производительности.
2. Цели
Согласно анализу предыстории и текущей ситуации, сейчас мы формулируем стандартизированный интерфейсный рабочий процесс, который может хорошо стандартизировать модульную разработку и интерфейсные ресурсы единого проекта, сделать обслуживание кода и взаимное сотрудничество проще и удобнее. , и сделайте автоматизацию фронтенд-разработки своего рода привычкой. В то же время он позволяет каждому повышать производительность, повышать эффективность разработки и лучше и быстрее завершать командную разработку.
3. Технический маршрут
SVNЭто система управления версиями с открытым исходным кодом.По сравнению с RCS и CVS, она использует систему управления ветвями, и цель ее разработки — заменить CVS. Многие службы контроля версий в Интернете перешли с CVS на Subversion. Проще говоря, SVN используется несколькими людьми для совместной разработки одного и того же проекта и совместного использования ресурсов.
GITЭто бесплатная распределенная система управления версиями с открытым исходным кодом для управления любым проектом, малым или большим, с гибкостью и эффективностью. Он использует библиотеку распределенных версий без поддержки программного обеспечения на стороне сервера, что делает выпуск и передачу исходного кода чрезвычайно удобными.
GULPЭто инструмент для создания кода в процессе разработки интерфейса и инструмент для создания проектов автоматизации. Он может не только оптимизировать ресурсы сайта, но и использовать различные инструменты для автоматизации многих повторяющихся задач в процессе разработки, что значительно повышает эффективность нашей работы.
WEBPACKЭто самый популярный интерфейсный модульный инструмент управления ресурсами и упаковки. Он может упаковать множество свободных модулей во внешние ресурсы, которые соответствуют развертыванию в производственной среде в соответствии с зависимостями и правилами. Вы также можете кодировать отдельные модули, загружаемые по запросу, и загружать их асинхронно, когда они действительно необходимы. Через преобразование загрузчика любая форма ресурса может рассматриваться как модуль.
SASSявляется препроцессором CSS. Это расширение синтаксиса CSS, оно может использовать такие функции, как вложение, микширование и наследование селекторов, а также может создавать таблицы стилей более эффективно и гибко. Со временем Sass скомпилирует легальный CSS для использования браузерами, а это означает, что его собственный синтаксис нелегко распознать браузерам (хотя он очень похож на синтаксис CSS, почти такой же), потому что это не стандартный формат CSS, динамические переменные и т. д. .. может использоваться внутри его синтаксиса, поэтому он больше похож на очень простой динамический язык.
RequireJSэто загрузчик модулей JavaScript. Он отлично подходит для использования в браузере, но его также можно использовать в других средах сценариев, таких как Rhino и Node. Загрузка модульных сценариев с помощью RequireJS улучшит скорость и качество загрузки кода.
artTemplateЭто новое поколение движков шаблонов JavaScript, которое обеспечивает скачки качества в режиме предварительной компиляции и в полной мере использует функции движка JavaScript, благодаря чему его производительность имеет чрезвычайно высокую производительность переднего и заднего плана. Тест эффективности рендеринга в Chrome в 25, 32 раза больше, чем у известных движков Mustache и Micro TMPL.
ReactJSЭто библиотека JavaScript, запущенная Facebook для создания пользовательских интерфейсов. Идея дизайна чрезвычайно уникальна, это революционная инновация, производительность выдающаяся, а логика кода очень проста. От самого раннего механизма пользовательского интерфейса до полного набора интерфейсных и серверных решений для веб-приложений.
VueJSЭто библиотека для разработки интерфейсов с открытым исходным кодом, которая обеспечивает эффективную привязку данных и гибкую систему компонентов через краткий API.
4. Промышленный стандарт
Стандарт W3C
5. Общий дизайн
5.1 Общая архитектура рабочего процесса
5.2. Подробный дизайн
5.2.1 Управление кодом
SVN: это централизованная система контроля версий. В использовании она немного похожа на архивное хранилище. Она поддерживает параллельное чтение и запись файлов, а также поддерживает управление версиями кода. Функции включают в себя извлечение, импорт, обновление, ветвление, переименование, восстановление. , слияние и т.д. Он относительно прост в использовании и не будет повторяться здесь.
GIT: это распределенная система контроля версий. Он использует подход библиотеки распределенных версий без поддержки программного обеспечения на стороне сервера. Команды операций включают в себя: клонирование, вытягивание, отправка, ветвление, слияние, отправка, перебазирование и т. д. Я не буду повторять конкретное использование.
Использование SVN и GIT: SVN подходит для управления проектами. Потому что он прост и удобен в использовании. Когда код включает в себя несколько групп участников или код имеет определенную степень секретности, им легко управлять с помощью svn.
Git предназначен для управления кодом. Для некоторых общих компонентов в группе или кода, такого как sdk, лучше использовать git для более быстрого управления и обновления.
5.2.2 Слой изображений
(1) Изображения могут храниться отдельно в соответствии со страницами и общедоступными модулями.
(2) Уникальные для страницы картинки хранятся в папке, что удобно для сжатия и синтеза спрайтовых картинок.
(3) Общие элементы изображения или элементы изображения, которые появляются несколько раз, хранятся в общей папке.
(4).Папка pic используется для хранения демонстрационных изображений статических страниц.Когда используется официальная среда, вещи в этом файле могут быть очищены.
Использование формата:
GIF
GIF — формат изображений, от которого постепенно отказываются. На смену ему появился формат PNG. PNG 8 имеет все функции GIF, за исключением того, что он не поддерживает анимацию, но у него больше преимуществ, чем у GIF, в том, что он поддерживает альфа-прозрачность и лучшее сжатие (GIF поддерживает только прозрачность индекса).
Однако, когда цвет изображения в определенной степени простой, а размер в определенной степени мал, размер изображения в формате gif меньше, чем у png8.
JPG
Поддерживается расширенное сжатие фотографических или фотореалистичных изображений, а степень сжатия может использоваться для управления размером файла изображения.
Сжатие с потерями снижает качество данных изображения, и эта потеря деградации накапливается по мере редактирования и повторного сохранения изображений JPG.
И JPG, и PNG8 подходят для изображений с меньшим количеством цветов, потому что JPG точно записывает несколько точек при растеризации, а остальные точки заполняются разностными значениями. Но когда количество цветов в изображении меньше определенного значения, например 256, PNG8 может быть более подходящим.
Файлы JPG не подходят для более простых изображений с большими участками одного цвета или с очень заметной разницей в яркости («резкости»).
JPG обычно обеспечивает наилучший эффект сжатия при хранении фотографических или реалистичных изображений, таких как фоновые изображения веб-сайтов, карусельные изображения, пользовательские аватары и т. д.
PNG
PNG можно разделить на три формата: PNG8, PNG24, PNG32.
Следующее число представляет собой максимальное количество значений цвета, которые этот формат PNG может индексировать и хранить. «8» означает 2 в 8-й степени, что составляет 256 цветов, а 24 означает, что 2 в 24-й степени дает около 16 миллионов цветов.
Максимально сжимает размер файла изображения с наименьшими искажениями.
Когда PNG используется для хранения изображений в градациях серого, глубина изображений в градациях серого может составлять до 16 бит, а при сохранении цветных изображений глубина цветных изображений может составлять до 48 бит, а также может храниться до 16 бит альфа-канала. данные канала.
Для более сложных изображений, требующих высокой точности, хотя PNG может быть сжат без потерь, файл изображения имеет большой размер и не подходит для размещения на веб-страницах.
Правила использования:
1. Используйте меньше элементов изображения и вместо этого попробуйте использовать CSS3.
2. Как можно меньше используйте формат png24, кроме полупрозрачных.
3. JPG подходит для фотоизображений или реалистичных изображений, а также для изображений с меньшим количеством цветов.
4. PNG8 подходит для простых изображений с небольшим количеством цветов (менее 256), большими областями схожего цвета или явной разницей в яркости.
5. PNG24 подходит для ситуации, когда картинка более сложная и имеет эффект прозрачности, а эффекта прозрачности нельзя добиться с помощью css.
6. Если на странице много мелких значков, рассмотрите возможность использования сначала веб-шрифта.Если веб-шрифт не соответствует требованиям, вы должны использовать спрайт css для объединения изображений, чтобы уменьшить размер общего изображения и уменьшить запросы страницы для повышения скорости доступа. Для справки см.библиотека шрифтов webfont
7. Изображения меньше 8k должны быть преобразованы в base64.
5.2.3 Уровень CSS
Слой CSS управляется SASS, это может быть более гибким, удобным и простым в обслуживании. Ссылка на технические характеристикиcss спецификация.
Правила использования:
1. Папка Include используется для хранения общедоступных модулей, сбрасываемых или многократно используемых миксинов и других глобальных общих стилей.
2. Папка «Компоненты» используется для хранения общих стилей на уровне компонентов, таких как общие стили кнопок, стили значков и стили всплывающих окон.
3. Лучший способ названия CSS является семантическим.
5.2.4 Слой HTML
Слой HTML в основном контролирует номер версии, который представлен ниже при использовании GULP. каноническая ссылка для htmlСпецификация HTML.
5.2.5. Уровень JS
5.2.5.1 Модульный стандарт JS --RequireJS
Используя знакомую спецификацию AMD, можно унифицировать все стандарты js. Модульная разработка и более удобный обмен кодом, загружаемым по запросу, повышают эффективность разработки. Js означает, что асинхронный файл RequireJS может быть загружен, зависимость между модулем управления, чтобы облегчить подготовку и обслуживание кода.
Принципы использования RequireJS:
Новые проекты могут использовать этот шаблон в качестве основы для расширения кода. Все определяют переменные в одной области, все определяют события в одной области, все привязывают события в одном месте и, наконец, инициализируют и предоставляют методы. Применение стандартного шаблона кода может сделать стиль кода у всех одинаковым, а учащиеся, которые вступят в свои права в будущем, с первого взгляда узнают, где находится код, и быстро приступят к работе.
5.2.5.2 Механизм шаблонов JS --artTemplate
Движок шаблонов artTemplate является относительно зрелым и имеет лучшую производительность. Поддерживает отладку во время выполнения, может точно найти оператор, в котором находится шаблон исключения, оператор шаблона является кратким, а браузер поддерживает завершение.
Правила использования artTemplate:
Вы можете использовать его в соответствии с его API.
5.2.5.3 MVVM и MVC-подобные фреймворки
5.2.5.3.1. ReactJS
ReactJS — это библиотека JavaScript для создания пользовательских интерфейсов, а использование виртуального DOM делает ее более производительной. В то же время он реализует односторонний поток данных ответа, что снижает дублирование кода, поэтому он проще, чем традиционная привязка данных.
Ввиду отсутствия поддержки IE в ReactJS, он больше подходит для использования в мобильных проектах.
Далее мы познакомимся с основами использования ReactJS.
5.2.5.3.1.1 HTML-шаблоны
5.2.5.3.1.2. ReactDOM.render()
ReactDOM.render — это самый простой метод React, который используется для преобразования шаблона в язык HTML и вставки указанного узла DOM.
5.2.5.3.1.3 Синтаксис JSX
Синтаксис JSX написан непосредственно на языке JavaScript без каких-либо кавычек. Это позволяет смешивать HTML и JavaScript, что просто и удобно.
5.2.5.3.1.4 Упакованные компоненты
React позволяет инкапсулировать код в компонент и вставлять этот компонент на веб-страницу, как обычный HTML-тег. Метод React.createClass используется для создания класса компонента.
5.2.5.3.1.5 Свойство PropTypes
Свойство PropTypes — это инструмент, используемый для проверки соответствия свойств экземпляра компонента требованиям.
Компонент Mytitle имеет свойство title. PropTypes сообщает React, что свойство title является обязательным и что его значение должно быть строкой. Если заголовок не является строкой во время процесса создания экземпляра, проверка завершится ошибкой и появится фоновое сообщение об ошибке.
5.2.5.3.1.6. this.state
Одним из нововведений React является представление о компонентах как о машине состояний с начальным состоянием в начале, а затем взаимодействием с пользователем, вызывающим изменение состояния, которое запускает повторную визуализацию пользовательского интерфейса. Состояние — это объект доступа к состоянию.
В примере на снимке экрана метод getInitialState используется для определения начального состояния, которое можно прочитать через свойство this.state. Когда пользователь щелкает компонент, вызывая изменение состояния, метод this.setState изменяет значение состояния.После каждого изменения метод this.render автоматически вызывается для повторного рендеринга компонента.
5.2.5.3.2. VueJS
VueJs — это компактный и простой в использовании фреймворк MVVM. API понятный и простой в использовании. Поддержка других основных браузеров, таких как ie8 и выше. Подходит для проектов со слабыми требованиями к мобильным устройствам и браузерам.
Основное использование VueJs:
5.2.5.3.2.1 Привязка данных
5.2.5.3.2.2 Двусторонняя привязка
5.2.5.3.2.3 Список визуализации
5.2.6 Инструменты автоматизированной сборки
5.2.6.1. GULP
GULP прост и удобен в использовании, это инструмент для создания проектов автоматизации переднего плана. Это может упростить и упорядочить много утомительной и повторяющейся работы. Как интерфейсный инструмент рабочего процесса, это хороший выбор. С богатыми компонентами он может делать больше автоматизированных вещей.
5.2.6.1.1 Использование GULP
1. Глобальная установка
2. Создайте файл с именем gulpfile.js в корневом каталоге проекта.
3. Запустите глоток
Пожалуйста, обратитесь к официальному веб-сайту за конкретным синтаксисом.
5.2.6.1.2. Hulp Использование плагинов
5.2.6.1.2.1 Консолидация CSS -- gulp-concat-css
5.2.6.1.2.2 Слияние js -- gulp-concat
5.2.6.1.2.3 Обфускация сжатия js --gulp-uglify
5.2.6.1.2.4 Минимизация CSS -- gulp-minify-css/gulp-clean-css
5.2.6.1.2.5 Мониторинг обновлений файлов -- gulp-livereload
Этот пример прослушивает обновления стиля.
5.2.6.1.2.6 Сжатие изображений -- gulp-imagemin
5.2.6.1.2.7 Создание карты спрайтов -- gulp.spritesmith
Sprite.css — это CSS, сгенерированный изображением Sprite.
5.2.6.1.2.8 Контроль версий -- gulp-rev-append
Плагин gulp-rev-append будет передавать обычный (?:href|src)=”(.)[?]rev=(.)["]Найти и заполнить номер версии по указанной ссылке. По умолчанию он генерируется по MD5 файла, поэтому файл не изменился, и номер версии не изменится.
Результат после запуска:
5.2.6.1.2.9 Компиляция sass -- gulp-sass
Есть много других плагинов, которые не будут представлены один за другим.
5.2.6.2. Webpack
webpackВ настоящее время это наиболее часто используемый загрузчик модулей и инструмент для упаковки.
webpackСкрипт написан в виде commonJS, но поддержка AMD/CMD тоже очень полная, что удобно для миграции кода старых проектов.
Он удобен в разработке и может заменить некоторую рутинную работу, такую как упаковка, сжатие и обфускация, преобразование изображения в base64 и т. д.
Сильная расширяемость, совершенный механизм подключаемых модулей, особенно функция поддержки горячего подключения React, привлекает внимание.
Ниже приведено краткое введение в основы использования Webpack.
5.2.6.2.1 Глобальная установка
5.2.6.2.2 Простота использования
бегать:
5.2.6.2.3. Loader
Сам Webpack может работать только с модулями JavaScript, если вы хотите иметь дело с другими типами файлов, вам нужно использовать загрузчик для преобразования.
LoaderЕго можно понимать как конвертер модулей и ресурсов, который сам по себе является функцией, принимающей в качестве параметра исходный файл и возвращающей результат конвертации. Таким образом, мы можем потребовать загрузить модуль или файл любого типа, например CoffeeScript, JSX, SASS или изображения.
module.loaders сообщает webpack, какой загрузчик использовать для каждого типа файла.
5.2.6.2.4 Смешивание GULP и Webpack
В gulp просто запишите конфигурацию в webpack({ ... }), не нужно писать webpack.config.js .
5.2.6.2.5 Использование Webpack в ReactJS
Установите react-hot-loader в ReactJS, а затем совместите с Webpack, чтобы добиться эффекта модификации и синхронизации обновлений.
6. Технические характеристики
6.1 Унифицировать стандарты, повысить эффективность работы и облегчить командную работу
Опираясь на известные в отрасли фреймворки, такие как RequireJS и SASS, унификация спецификаций внешнего кода способствует совместной работе команды в будущем.Использование эффективных инструментов построения, таких как GULP и Webpack, может повысить эффективность работы и снизить нагрузку. Это больше способствует сопровождению и масштабируемости кода.
6.2. Кроссплатформенность, поддержка гибких и изменяемых сценариев
Модульная конструкция и расширяемые шаблоны кода в сочетании с гибкими инструментами автоматизированной сборки подходят для разработки различных сценариев. Это также облегчает доступ новых членов.
Резюме: на самом деле это план дизайна, который я написал 2 года назад, и сейчас он не кажется продвинутым, даже немного отсталым. Выбрасывать это просто для того, чтобы дать вам идею.Выбор технологии и выпуск упаковки зависят от вашего конкретного бизнеса. План немного общий, и я надеюсь на ваше понимание.