我在闲鱼做搭建——魔鱼搭投编辑器介绍
背景
魔鱼搭投编辑器是一个前端页面可视化搭建工具，运营借助编辑器可以调用搭投的底层能力，在无需开发介入的情况下，自主修改页面内容；简单举几个需求场景增强一下体感：
1. 提升前端研发效率，收敛工程研发管理流程；
2. 动态数据源可配置投放，从而在网关层优化页面首屏性能；
3. 运营自主高效准确的干预投放数据；
架构
实现
搭建领域模型
P：即Page，指搭建系统中创建的页面；
M：指Module，指搭建系统所创建的页面中的模块；
T：TAG，指搭建系统中，页面中模块的每一个可用来投放数据的单位（资源位）；
在此之上，我们提供出排期策略模型Strategy，魔鱼设计一个模块只有一个TAG，因此每个模块都只有一个资源位，以魔鱼源码搭建为例图示一下模型间的关系：
可视化搭建效果演示：
• 配置修改所见即所得（广告位顺序）
• 排期策略切换所见即所得(不同排期展示的界面不同）
Schema表单
举个例子，开发要提供运营可配置banner图片(要求图片大小750*200，必填)和banner跳转链接(必填)，需要编写如下schema来描述表单：
{
"title": "腰通banner",
"type": "object",
"properties": {
"picUrl": {
"type": "image",
"title": "图片链接",
"x-format": "@image(750,220)",
"x-required": true
},
"url": {
"type": "string",
"title": "跳转链接",
"x-format": "@url()",
"x-required": true
},
}
}
而经过魔鱼表单组件渲染后，运营配置时则会看到如下效果：
1. 开发/运营的协作
2. 开发编写schema的效率问题
1. 场景化标准组件，数据类型和表单组件一一映射
export const SchemaField = createSchemaField({
components: {
image: Image,
string: Input,
Input,
Password,
boolean: Switch,
array: ArrayTable,
Space,
color: Color,
time: TimePicker,
cards: ArrayCards,
text: Input,
date: DateTime,
daterange: DatePicker.RangePicker,
textarea: Input.TextArea,
number: NumberPicker,
radio: Radio.Group,
plugin: Plugin,
select: Select,
Editable,
copy: CopyItem,
// UI组件
FormCollapse,
FormGrid,
FormLayout,
FormItem,
},})
@image('WidthxHeight', format, minSize, maxSize)
const handler = {
...
image: (
dimension: string,
format: string,
minSize: number,
maxSize: number,
uploaderOptions: any,
action?: string,
): IMoyuSchema => {
return {
'x-component': 'image',
'x-component-props': {
dimension,
format,
minSize,
maxSize,
uploaderOptions,
action,
},
'x-validator': async (value: any) => {
return checkImage({ dimension, format, src: value });
},
};
}
...
}
2. 制定闲鱼schema规范，约定大于配置
我们的需求是描述一个商品列表的配置表单，根据魔鱼的schema规范只需要写如下schema：
listDemo:{
type:'array', //指定该数据的类型为type
title:'商品列表',
items:{
type: 'object',
properties: {
... // 数组项 每一个商品的字段
},
},
}
}
基于这个思路，我们约定了动态数据，其他系统的插件iframe接入的规范，避免了schema文件编写维护困难的问题；
3. 本地研发工程插件提升研发体验
排期策略能力
为此，闲鱼策略中台为我们定制了策略排期能力，可以将模块的资源位和排期模型进行绑定，在此基础上我们设计实现了如下能力：
1. 提供时间穿梭能力，可以设定未来时刻来预览不同时间点页面的投放效果，达到验证页面的目的；
2. 排期接入圈人平台，配置不同人群下发不同排期，配合部署页面语法环境验证的功能，预览人群配置效果；
总结
