Давайте сначала посмотрим на страницу:Адрес страницы. Мне потребовалось всего 5 минут, чтобы создать эту страницу онлайн. Конечно, это потому, что мне не нужно рассматривать какой-либо дизайн и бизнес, я просто хочу показать функцию всем, но я считаю, что это должно изначально позволить всем увидеть мощь нашей системы. Если вы хотите увидеть онлайн-страницу, вы можете увидеть здесь:619 продвижение
Следует отметить, что содержимое, отображаемое на каждой ВКЛАДКЕ на этой странице, отличается, и содержимое, отображаемое после переключения категории на первой ВКЛАДКЕ, также отличается, и в ВКЛАДКЕ или категории может быть несколько разных материалов.
Для сравнения можно зайти на Alipayоблачная ласточка бабочкаСоздайте систему и попробуйте. Очевидно, что невозможно создать такую сложную страницу с функциями, предоставляемыми Yunfengdie. Конечно, пример Yunfengdie здесь не потому, что он лучший в отрасли, а потому, что я нашел это более понятным, и у меня есть друг, который сказал мне, что это часто используется в Alipay. Кроме того, Alipay все-таки является лидером в технологической среде (они сами так говорят), так что он относительно репрезентативен.
Вот первые основные моменты нашей системы сборки:Контент может быть вложенным (или называется вложенным компонентом).. Это базовая возможность, которая учитывалась в начале проектирования нашей системы, ее необходимо поддерживать не только при редактировании, но и на базовом уровне на уровне выполнения страницы.
Создайте систему
Рано или поздно веб-страница, которую вы видите, может не принадлежать группе людей с именемFront-end инженер-разработчикНаписано, но любой может создать по желанию. ---- от брата Сэма
Я считаю, что все использовали некоторые системы построения страниц более или менее.Древний Dreamware также является одним из первых практиков построения страниц, но он предпочитает дизайн пользовательского интерфейса и, очевидно, не поддерживает бизнес-функции. Это тоже понятно.Лет десять назад фронтенд инженеров было очень мало.Большинство из них вырезали картинки.После вырезания картинок пусть бэкенд заполняет шаблон для заполнения данных для доступа к странице.
Конструкция фронтенд-страницы современной эпохи явно отличается от той, что была в то время.Поскольку фронтенд-фреймворк постепенно унифицирует стандарты разработки всего фронтенда, способ разработки фронтенд-проекта также изменился с предыдущая отдельная страница к текущей отдельной системе проекта, аналогичной мобильному приложению. Рендеринг страницы в основном не проходит через серверную службу, а рассчитывается и обрабатывается внешним интерфейсом в браузере. Поэтому вместо вызоватитульная страницамы предпочитаем звонитьИнтерфейсное приложение.
Технологические изменения часто приводят к изменениям в форме продукта.В основном современные интернет-компании придерживаются цели быстрого итеративного роста, поэтому независимо от того, на какой стадии находятся интернет-компании, пока у них есть потребности в маркетинге, они будут надеяться иметь система построения страниц, потому что он может помочь нам решить многие проблемы:
- Операционные продукты создают свои собственные страницы, эффективные
- Вмешательство разработчика не требуется, дросселирование
- Строители могут делать это в соответствии со своими потребностями, устраняя необходимость затрат на связь и возможное недопонимание, приводящее к неудовлетворительному конечному результату.
В дополнение к вышеупомянутому улучшению производительности, поскольку компоненты построения системы относительно однородны и стабильны, опущены некоторые низкоуровневые ошибки, которые разработчики могут допустить в процессе реализации маркетинговых страниц (в конце концов, люди всегда являются самой большой переменной). ).
Подводя итог, построение системы, естественно, является более интересной и глубокой темой в области интерфейса.
характерная черта
Сказав так много, в чем разница между нашей строительной системой и строительной системой на рынке? Прежде чем обобщить особенности различных функций, позвольте мне сделать концептуальное резюме:
В начале проектирования мы не стремились к функциональности, а строились на реализации возможностей фронтенд-фреймворка.
Как понять эту фразу? Фронтенд нашей страницы построен на фреймворке vue, поэтому, как фреймворк, vue может удовлетворить почти все наши требования к возможностям в фронтенд-разработке, почему? Я примерно подытожил несколько моментов:
- Компонентизация, абстрагирование компонентов через свойства
- Вложение между компонентами для достижения сплайсинга контента
- Рендеринг и обновление через отношение сопоставления состояния => пользовательского интерфейса
Поскольку для большинства страниц общего назначения на странице - это расположение и комбинация различных элементов, а также некоторые стили. Основное обновление страницы также изменяется в соответствии с обновлением соответствующих данных. Даже ответ события, в значительной степени мы можем рассматривать событие, изменяя одно из наших государств, а затем привести к изменению Page Ui. Это также практический принцип, проводимый текущими основными фронтальными каркасами.
Исходя из этого, пока наша система сборки может точно реализовать вышеуказанные основные функции, можно даже считать, что наша система сборки достигла того же уровня масштабируемости, что и фреймворк Vue.
Конечно, можно сказать, что ядром vue является отзывчивость, и это правда, это основная технология, реализуемая фреймворком vue. Но в процессе создания продукта на основе vue нас волнует не его внутренняя реализация, а больше его открытый API и возможности.Например, и vue, и react имеют возможность абстрагировать компоненты на основе свойств. Это Возможности схожи, хотя их внутренние реализации сильно различаются.
Зная основную концепцию нашей строительной системы, мы можем говорить об особенностях нашей строительной системы:
- вложение компонентов
- Межкомпонентная связь
И на этой основе мы можем удерживать эти представления:
- Объединение базовых компонентов в новый компонент и предоставление другим пользователям возможности настраивать и использовать
- Взаимодействие между комплексными компонентами, такими как кнопка в компоненте, нажата, чтобы скрыть другой компонент
Видно, что при редактировании формы вкладки мы можем выбрать содержимое, используемое на каждой вкладке, и другие компоненты.
Не стоит недооценивать эту способность, базовая способность может привнести в продукт бесконечное воображение.
Кроме того, мы фактически добились возможности связывания между компонентами, но это не было отражено в продукте, потому что продукт не нашел хорошего способа выразить это, чтобы пользователи могли использовать эту функцию. Проще говоря, эксплуатация детской обуви не может понять, какая связь между компонентами, а продукт пока не может придумать хороший способ снизить стоимость обучения, поэтому пока он не открыт. . Но все же вышеприведенная фраза, чем больше базовых возможностей, тем больше дизайнерское пространство продукта.
Сегодня мы представим этот продукт, и детали не будут подробно обсуждаться.Общая архитектура нашей строительной системы на самом деле очень сложна, в том числе:
- Система интерфейса доступа к компонентам
- Версия компонента, версия среды выполнения и метод обслуживания версии страницы
- Инструмент публикации компонентов, аналогичный npm, интегрирующий функции разработки и отладки локальных компонентов.
- Как компонент поддерживает свои реквизиты и генерирует форму на основе свойств компонента при редактировании
- Как получить доступ к каждой странице
- ...и так далее ряд функций для повышения удобства использования и эффективности
Они будут распространяться медленно в будущем.В то же время, набор инструментов для создания форм через json-схему был реализован во время разработки.Скоро он будет с открытым исходным кодом, и мы с нетерпением ждем его.
Наконец, недавно была разработана функция предварительного рендеринга, которая еще больше улучшила первый опыт просмотра, сократила время белого экрана в процессе загрузки js-файлов и улучшила работу со страницей более чем на одну степень. Ссылка ниже, можете попробовать сами:
Его рекомендуется просматривать на мобильном телефоне, ведь он не оптимизирован для ПК.