Как разработать масштабируемую онлайн-платформу для создания веб-страниц
В этой статье в основном рассказывается о том, как спроектировать масштабируемую онлайн-платформу для создания веб-страниц, и объясняются некоторые предпосылки и окончательные эффекты, а также основная схема проектирования. Адрес опыта:godspen.ymm56.com
Каталог статей серии
- Открытие: правильный способ открыть код
- Как Ма Лян разработал масштабируемую онлайн-платформу для создания веб-страниц
- Волшебная ручка открыта, как мне ее использовать
задний план
Начиная с марта 2018 года, с быстрым развитием Yunman, он начал часто повторять различные действия.В то время самым быстрым способом было скопировать старые действия, затем изменить их по мере необходимости, а затем перейти в онлайн.Однако этот метод очень сложно. Вскоре возникло узкое место, вынудившее операционную группу найти несколько сторонних платформ для удовлетворения собственных операционных требований. Однако из-за слабой настройки и отсутствия доступа к информации о пользователях не было возможности использовать их в больших масштабах. количество, поэтому они могли только ждать, пока внешние ресурсы будут запланированы — довольно серьезная проблема.
- Каждое действие продукта требует вмешательства внешнего персонала, и даже замена простой иконки и простого макета требует планирования и ожидания, потребляя 50% внешних ресурсов.
- Страницы, созданные некоторыми доступными на рынке платформами онлайн-производства и продвижения, не могут быть хорошо интегрированы в их собственные бизнес-процессы.
- Для карусельной лотереи, если вы используете стороннюю платформу, вам нужно экспортировать лотерейный список после события, а затем импортировать его в свою платформу для сопоставления, а затем отфильтровать выигрышный список, что очень неудобно.
- Если пользователь отправляет новый номер мобильного телефона для нового номера мобильного телефона, используйте стороннюю платформу для отправки красного конверта. Вам нужно регулярно синхронизировать данные и отправлять красные конверты, вы не можете подключить собственную платформу для достижения реального времени.
В ответ на эти проблемы команде срочно нужна платформа для обеспечения операций по быстрому созданию активностей, и разработчики также могут сделать некоторое функциональное расширение на этой платформе. Лучше всего выполнять следующие требования:
- Богатые компоненты позволяют операторам создавать страницы самостоятельно.
- Каждая завершенная страница может быть установлена как страница шаблона, при условии, что в следующий раз операция может быстро создать страницу с помощью шаблона и просто изменить ее, а затем опубликовать.
- Предоставляет часто используемые анимации и запускает действия, создающие классные эффекты.
- Обеспечьте полный анализ данных каждого действия, чтобы облегчить работу и просмотреть эффект, обычные pv, uv, а также клики по элементам и функции статистики пользовательских страниц.
- Обеспечьте гибкое управление страницами, чтобы облегчить единое управление назначением разрешений другим коллегам по группам и параметрам проекта.
- Разработчики могут вставлять в компоненты скрипты для гибкого расширения функционала активности, что удобно в работе и использовании.
- Предоставьте унифицированную спецификацию разработки компонентов, чтобы облегчить разработку новых бизнес-компонентов и предоставить более удобный метод использования для операций.
В ответ на эти требования мы создали платформу Ma Liang — онлайн-редактор H5 для быстрого создания страниц H5. Пользователям не нужно осваивать сложные методы программирования, и они могут создавать красивые страницы с помощью простого перетаскивания и небольшого количества настроек, которые можно использовать для создания страниц в маркетинговых сценариях. В то же время он также предоставляет разработчикам полные возможности доступа к программированию, а также мощные возможности управления поведением компонентов и интерактивного управления в виде сценариев и компонентов.
основной дизайн
Далее мы поделимся нашим основным дизайном, на этот раз основное внимание будет уделено следующим аспектам.
- Мы представим общую архитектуру, чтобы понять основную идею общего редактирования для создания страниц на основе программирования данных.
- Мы познакомим вас с тем, как устроены основные компоненты, чтобы их возможности можно было свободно расширять.
- Мы опишем, как разработать редактор для достижения настраиваемых свойств панели управленияПримечания (Vue реализовано из-за общего пользования проекта, когда он введен позже, некоторая конкретная техническая реализация будет описана с использованием угла Vue. Мозговой комплемент с другими рамками)
Общая структура
- Общая структура
Общая архитектура относительно проста. Суть заключается в том, чтобы определить набор стандартных спецификаций данных, предоставить редактор для редактирования данных и предоставить синтаксический анализатор для анализа данных, а затем отобразить страницу. Процесс выглядит следующим образом.
- структура данных Из приведенного выше рисунка видно, что каждая страница состоит из множества узлов (узлов), и каждый узел может иметь вложенные дочерние узлы. Основная информация, содержащаяся в каждом узле, следующая:Заметки Информация об узле, упомянутая далее в статье, представляет собой следующие данные, соответствующие узлу.
{
"id": "truck/button1l",
"type": "truck/button",
"label": "按钮1l",
"version": "0.1.4",
"visible": true,
"style": {
"position": "absolute",
"width": "100px",
"height": "40px"
},
"animate": [],
"props": {
"text": "输入文字",
"type": "danger",
"click": []
},
"path": "https://ymm-maliang.oss-cn-hangzhou.aliyuncs.com/truck/button/0.1.4/index.js",
"script": "",
"events": []
}
Каждый компонент сравнивает основной элемент состоит из следующих
- Уникальный номер элемента id. Легкий доступ и коды операций
- type Тип компонента. Различные ресурсы скрипта будут загружены в соответствии с разными типами, а затем запуск загруженного скрипта создаст компонент VUE, а затем этот компонент будет подключен к глобальному VUE, поскольку каждый узел компонента является динамическим компонентом компонента. В настоящее время вам нужно только изменить данные :is динамического компонента, чтобы заменить содержимое.
- псевдоним компонента метки. Простота в использовании и понимании
- версия Версия компонента. Каждый компонент имеет свою версию.
- стиль компонента стиля
- props Параметры компонента. Каждый компонент имеет некоторые параметры инициализации, которые заполняются маркетологами в редакторе. Эти параметры хранятся здесь и будут подробно описаны в расширенных возможностях свойств редактора.
- скрипт расширяет скрипт. Каждый компонент может вставлять некоторый код скрипта для расширения функциональности компонента. Объекты, созданные этими скриптами, будут смешаны с объектом компонента, который будет подробно описан в дизайне компонента.
- Событие компонента событий. Каждый компонент может связать общие события DOM.
- дочерний дочерний узел.
- путь Путь к сценарию. Объекты компонента создаются путем загрузки скриптов по этому пути.
Страница выше включает изображение, два текста под изображением и элемент кнопки на узле-сестре изображения. Подробная структура данных соответствующей страницы выглядит следующим образом, вы можете почувствовать полную структуру.
{
"id": "node",
"type": "node",
"visible": true,
"style": {
},
"props": {},
"child": [
{
"id": "truck/image15j",
"type": "truck/image",
"label": "图片15j",
"version": "0.1.4",
"visible": true,
"style": {
"position": "absolute",
"width": "320px"
},
"animate": [],
"props": {
"url": "https://ymm-maliang.oss-cn-hangzhou.aliyuncs.com/ymm-maliang/access/ymm_1533366999689.png",
"click": []
},
"path": "https://ymm-maliang.oss-cn-hangzhou.aliyuncs.com/truck/image/0.1.4/index.js",
"script": "",
"events": [],
"child": [
{
"id": "truck/text3l",
"type": "truck/text",
"label": "文本3l",
"version": "0.1.4",
"visible": true,
"style": {
"position": "absolute"
},
"animate": [],
"props": {
"text": "文字内容1",
"click": []
},
"path": "https://ymm-maliang.oss-cn-hangzhou.aliyuncs.com/truck/text/0.1.4/index.js",
"script": "",
"events": []
},
{
"id": "truck/text3l5g",
"type": "truck/text",
"label": "文本3l",
"version": "0.1.4",
"visible": true,
"style": {
"position": "absolute",
"width": "114px"
},
"animate": [],
"props": {
"text": "文字内容2",
"click": []
},
"path": "https://ymm-maliang.oss-cn-hangzhou.aliyuncs.com/truck/text/0.1.4/index.js",
"script": "",
"events": []
}
]
},
{
"id": "truck/button1l",
"type": "truck/button",
"label": "按钮1l",
"version": "0.1.4",
"visible": true,
"style": {
},
"animate": [],
"props": {
"text": "输入文字",
"type": "danger",
"click": []
},
"path": "https://ymm-maliang.oss-cn-hangzhou.aliyuncs.com/truck/button/0.1.4/index.js",
"script": "",
"events": []
}
],
"script": [],
"animate": [],
"version": "0.1.0",
"events": []
}
Резюме одним предложением: страница рекурсивно генерируется многими узлами, каждый узел содержит такую информацию, как макет, событие, сценарий, параметр, версия и т. д., затем редактор редактирует эту информацию, а синтаксический анализатор анализирует информацию.
дизайн компонентов
Страница состоит из рекурсивно вложенных компонентов. Компоненты являются основной частью всего проекта. Чтобы компоненты имели возможность расширяться, мы используем метод mixin для функций компонентов, через базовую логику компонента + пользовательский script.form для генерации компонентов. Далее описывается общаяКомпонентная структураа такжепроцесс инициализации, легко понять, как мы это делаем.
- В левой части рисунка выше видно, что вся страница состоит из узловых узлов.Они представляют собой древовидную структуру.Каждый узловой узел содержит компонентный объект для отображения функции.Ниже представлена DOM-структура узлового узла. Вы можете видеть, что каждый узел является рекурсивным узлом, каждый узел содержит динамический компонент, и каждый динамический компонент визуализируется компонентом, чей nodeinfo.id является ключом.
<div class="node" v-show="visible" :style="nodeInfo.style">
<component :is="nodeInfo.id" v-bind="nodeInfo.props" :ref="nodeInfo.id" :style="componentStyle"></component>
<node v-if="nodeInfo.child" :info="item" v-for="item in nodeInfo.child " :key="item.id"></node>
</div>
- Процесс рендеринга можно увидеть в правой части изображения выше. Для достижения высокой масштабируемости компонентов функция каждого компонента состоит из двух основных частей.
- Код компонента, каждый компонент представляет собой реализацию сценария с определенными параметрами и определенными функциями, такими как изображения, форматированный текст, совместное использование, Jiugongge и другие компоненты, код компонента загружает соответствующий сценарий через соответствующие параметры типа и пути для получения объекта.
- Сценарии добавляются компонентами через редактор, и редактор может динамически добавлять сценарии для каждого компонента, чтобы улучшить возможности работы компонента. Как показано ниже, вы можете видеть, что компонент может добавлять несколько скриптов. Каждый сценарий на самом деле является компонентом vue, и код в нем создаст примесь объекта в окончательный компонент vue, поэтому вы можете расширить различные функции компонента для поддержки вашего специального бизнеса.
Логическая функция узла = логика компонента + сценарий 1 + сценарий 2 + сценарий 3... После того, как каждый компонент загрузит соответствующий js-скрипт в соответствии со своим типом, он смешает логику в компоненте nodeInfo.script, затем создаст окончательный компонент и зарегистрирует его в Vue.component для последующего использования.Основной код выглядит следующим образом.
// 通过加载到的组件脚本获得的全局对象创建vue对象 window['image_1.0.3'] load组件脚本运行后会生成的对象
var component = Vue.extend( window['image_1.0.3'])
// 遍历所有加入的脚本混合组件对象中
nodeInfo.script.forEach((value)=>{
component =component.extent(value)
})
// 以节点id为key，注册最终组件对象
Vue.component(nodeInfo.id,component)
// 修改该节点的动态组件 :is 参数为 该节点id
// done
Резюме в одном предложении: Расширяйте возможности компонентов за счет постоянного добавления новых пользовательских скриптов.
Дизайн редактирования свойств компонентов
Основная цель редактирования свойств заключается в том, что разработчик компонента предоставляет оператору некоторые настраиваемые параметры для заполнения и изменения в редакторе. Например, выбрав компонент, а затем панель свойств справа, вы можете установить некоторые свойства для этого компонента.
- Редактор обеспечивает базовое редактирование свойств
- Редактор может предоставлять расширенные возможности редактирования и редактирования, в основном для удобства работы, функции редактирования атрибутов компонента разработки характеристик и удобного для работы опыта работы.
Ниже описано, как мы делаем это для основного содержания этих двух сравнений.
Возможность редактирования основных атрибутов редактора
Для разработчика компонента одним из них является определение параметров компонента, которые должны быть представлены редактору для работы, а другим — определение элемента управления, через который обрабатывается значение, соответствующее свойству. Как упоминалось выше, в структуре данных общей архитектуры каждый узел имеет атрибут props, в котором хранится окончательное значение, настроенное с помощью настраиваемых параметров компонента.При инициализации компонента данные этого реквизита будут переданы. инициализирован. Определение того, какие параметры может принимать компонент, определяется в атрибуте props каждого компонента Vue, а роль редактора состоит в том, чтобы получить реквизиты, определенные каждым объектом, через редактор, а затем предоставить различные типы параметров в соответствии с типом каждого параметра. Элементы управления редактированием, такие как логическое значение, мы предоставим кнопки переключения, изображение мы предоставим элементы управления выбора изображения и так далее. Скрипт расширения также может расширять редактируемые свойства компонента.Ниже приведен пример скрипта расширения. Он в основном описывает поддерживаемые типы и определяемые форматы. Общий процесс выглядит следующим образом.
Давайте сначала рассмотрим пример свойств, которые может определять каждый компонент.
/**
*
* @param type: 字段类型，支持原生类型以及【码良输入类型】
*
* 码良输入类型:
* input 单行输入框
* text 多行输入框
* enum 列表单选 需提供选项字段defaultList， 支持数组、map结构
* image 图片选择
* audio 音频选择
* video 视频选择
* richtext 富文本
* number 数字
* function 方法设置
* data json数据
* date 时间选择
* checkbox 多选框 同enum 不提供defaultList字段时，输入值为布尔类型
* radio 单选框 同enum
*
*/
return {
props: {
// 原生类型
foo: {
type: String
},
// 图片输入
fooImage: {
type: String,
editer: {
type: 'image'
}
},
// 日期
fooDate: {
editer: {
type: 'date'
}
},
// checkbox 多选
fooCheckbox: {
type: Array, // 此项必须为Array
default: () => { // 且需提供初始值
return [] // ['day', 'hour', 'min', 'sec']
},
editer: {
label: '显示精度',
type: 'checkbox',
defaultList: [ // array 形式的选项
'day',
'hour',
'min',
'sec',
]
}
},
// checkbox 布尔
fooCheckboxBool: {
type: Boolean, // 此项必须为Boolean
editer: {
type: 'checkbox'
}
},
// enum 含选项
fooEnum: {
default: 'value1',
type: String,
editer: {
label: '我是字段名', // 将字段名显示为可读性更强的文本，不提供此项时，显示字段名
desc: '我是帮助文本', // 为字段提供提示信息，帮助理解字段的意义
type: 'enum',
defaultList: { // map结构的选项 key为值，value为显示文本
'value1': '条件1',
'value2': '条件2',
'value3': '条件3',
}
}
},
// 条件属性
ifFoo1: {
type: [Number],
default: 0,
editer: {
work: function () {
return this.fooEnum == 'value1' // 只有当 `fooEnum` 字段取值为 'value1' 时才显示此项
},
label: '条件属性1',
type: 'number',
}
},
ifFoo2: {
type: [Date, String],
default: null,
editer: {
work: function () {
return this.fooEnum == 'value2' // 只有当 `fooEnum` 字段取值为 'value2' 时才显示此项
},
label: '条件属性2',
type: 'date',
}
},
},
mounted: function () {
console.log('hello ' + this.foo)
console.log('hello ' + this.fooImage)
// ...
}
}
Добавленные настраиваемые свойства, соответствующие компонентам, расширенным приведенным выше сценарием, следующие.
Основной дизайн здесь является то, что в поле «Редактор» добавляется к каждому недвижимому спецификации для редактирования того, какой компонент поле содержит в среде редактора. Поля редактора в основном включают следующее.
{
label: '我是字段名', // 将字段名显示为可读性更强的文本，不提供此项时，显示字段名
desc: '我是帮助文本', // 为字段提供提示信息，帮助理解字段的意义
type: 'enum',
ignore: true, // 不在编辑器显示
work:function(){
// 如果满足什么条件才会显示
},
defaultList: { // map结构的选项 key为值，value为显示文本
'value1': '条件1',
'value2': '条件2',
'value3': '条件3',
}
}
- Имя метки, отображаемое в редакторе
- desc Это поле подробно описано в редакторе
- type изменить тип компонента этого свойства
- в редакторе слегка отображается ignore, обычно в этом свойстве предусмотрен расширенный режим редактирования, а режим по умолчанию нужно скрывать.
- work — это метод, возвращающий true для отображения свойства в редакторе, который используется для скрытия и отображения некоторых свойств редактирования в компоновке.
- defaultList Некоторые данные по умолчанию, обычно предоставляющие выбираемые значения по умолчанию, такие как выбор радио и раскрывающийся список.
Итоговое предложение: Редактор поддерживает каждый компонент, получая через каждый атрибут, в соответствии с типом операции для предоставления различных элементов управления, окончательное редактирование сгенерированных данных в nodeInfo.props.
Расширенные возможности редактирования атрибутов
Во многих случаях настраиваемые свойства компонента относятся к следующим типам в соответствии с нашим планом.
/**
*
* @param type: 字段类型，支持原生类型以及【码良输入类型】
*
* 码良输入类型:
* input 单行输入框
* text 多行输入框
* enum 列表单选 需提供选项字段defaultList， 支持数组、map结构
* image 图片选择
* audio 音频选择
* video 视频选择
* richtext 富文本
* number 数字
* function 方法设置
* data json数据
* date 时间选择
* checkbox 多选框 同enum 不提供defaultList字段时，输入值为布尔类型
* radio 单选框 同enum
*
*/
Если для каждого типа предусмотрен базовый компонент редактирования, можно выполнить 90% требований, однако по мере увеличения сложности компонентов настраиваемые свойства каждого компонента становятся странными, и возможны различные требования. Например, для простого множественного выбора исходные варианты можно только записать насмерть, и теперь для их получения нужно запросить интерфейс. Но мы не можем сделать эту логику в унифицированном редакторе или в компонентах, поэтому мы можем только предоставить механизм при создании компонентов, позволяющий студентам, разрабатывающим компоненты, разрабатывать компоненты, и в то же время разрабатывать пользовательский компонент для этого компонента. редактор и может быть интегрирован в нашу панель редактирования свойств. Общая структура выглядит следующим образом, окончательный эффект может относиться к части пользовательской панели на приведенном выше рисунке.
После того, как компонент упакован, обычно есть два необходимых скрипта, один из которых — js, соответствующий компоненту. Одним из них является скрипт js редактора, соответствующий компоненту. Расширение функций редактора на всей платформе одинаково: загрузка скриптов, создание объектов, регистрация в Vue, а затем их рендеринг через динамические компоненты. То же самое касается расширений свойств редактора. Загрузите скрипт редактора соответствующего компонента, а затем вживите его таким же образом. Я не буду здесь вдаваться в подробности. Здесь мы просто делимся конечным результатом нашей разработки компонента. Как показано ниже
- Интерфейс во время разработки компонента
- Как выглядит компонент в редакторе кода после публикации компонента
Компонент анимации показывают
Операционные действия обеспечивают поддержку некоторых простых анимаций, которые удобны для выполнения некоторых анимаций входа и выхода, а также улучшают ощущение взаимодействия действий.Мы используем набор анимаций CSS, предоставленный animate.css. Простая демонстрация представлена ниже
Синтетическое компонентное мышление
Компонент синтеза должен выбрать существующий узел и сохранить его как общий компонент, чтобы его можно было использовать непосредственно в следующий раз.
- Используйте составные компоненты
- Экспорт составных компонентов.
страница шаблона
Целью шаблона страницы аналогична для компонента компонента. Это предусматривать содержимое, которое уже было сделано, и операция может быть быстро выбрана и используется для достижения цели быстрой онлайн-активности. Ниже просто просто демонстрация
Суммировать
Чтобы предоставить набор удобных в эксплуатации и масштабируемых платформ для производства событий h5, мы создали эту платформу Ma Liang. Теперь платформа Ма Ляна теперь поддерживает требование Yunman о добавлении 5-10 новых страниц событий каждый день.95% событий, у которых уже есть шаблоны событий, могут быть созданы маркетологами с помощью шаблонов, внесены некоторые изменения стиля или изображения, а затем опубликованы в Интернете, весь процесс занимает всего несколько минут. Шаблон и составной шаблон мероприятия также постоянно осаждаются.Я считаю, что после периода осаждения, по мере того, как шаблон становится все более и более полным, быстрое производство и избирательность маркетинговых мероприятий будут сильнее.
продолжение следует
Контент, который будет постоянно обновляться позже
- Компонентный дизайн событий
- Дизайн статистики данных
- Инициатива с открытым исходным кодомnuggets.capable/post/684490…
В последующем мы поделимся некоторыми мыслями и оптимизациями, которые мы сделали в сотрудничестве с маркетингом. В то же время мы также готовимся к открытию исходного кода Liang. Есть еще много вещей, которые нужно улучшить. Я надеюсь, что скоро встретимся.
Авторы и участники
Ван Куньмин Юньман Шанхай Начальник внешнего интерфейса Ма Лян Дизайн основной архитектуры Основное развитие проекта Wei Mingyuan Ma Liang Участник основного шаблона Pan Aru Лю Ган, главный разработчик кода фоновой службы Ма Ляна. Форма Peng Hui, ступенчатая планка и другие компоненты
Контакт для вопросов:
Группа DingTalk
Группа WeChat (срок действия QR-кода может истечь) Рекомендуется добавить указанную выше группу DingTalk.