项目背景
电子相册，一个可以可视化编辑的H5网页，用户只需要选择相应的模板进行组合，替换页面里的素材就能制作出一套可以媲美专业人员进行开发的H5宣传页。
使用者是没有任何开发经验的用户，这种情况对系统的可用性和拓展性的要求非常的高，因为每个人的想法是不一样的，这样就导致系统对接的需求是多变的，系统必须要有非常高的可拓展性，才能非常灵活的适应用户的需求。所以我们应该怎样去设计这个系统呢？用玩具做一个比喻，系统的用户可以用孩子来比喻，每个孩子对玩具的喜好不一样，我们不能提供一个做好的玩具给所有的孩子，而是应该提供一些模块给他们让他们自由发挥，组装自己喜好的玩具；所以系统的设计应该像乐高积木一样，供用户自由的去搭建和组装自己喜欢的玩具，而不是做一个现成的玩具给用户。
编辑器的架构
系统的核心流程图
思路分析：用户通过编辑器将编辑好的数据存到服务端，C端的浏览页面只需要一个容器，可以理解为一个div，在加载页面的时候，调用后端接口异步的去获取页面配置，页面配置单纯的就是个Json字符串。配置数据取出来之后，渲染引擎开始解析Json，最后再通过Vue组件的Render方法渲染页面。
思路很清晰了，但如何实现呢，我提炼出了几个核心的问题。
- Json格式如何定义？
- Json如何和组件对应起来？
- 组件是怎么渲染出来的？
- 组件间如何通信？
基础组件
组件是页面里最小的单位，比如一个按钮组件，有不同的颜色，大小等等可以进行配置的属性。
// button.js
export default {
name: 'button',
render() {
const {
color,
textAlign,
backgroundColor,
fontSize,
lineHeight,
borderColor,
borderRadius,
borderWidth,
text
} = this;
const style = {
color,
textAlign,
backgroundColor,
fontSize: fontSize,
lineHeight: lineHeight + 'em',
borderColor,
borderRadius: borderRadius + 'px',
borderWidth: borderWidth + 'px',
textDecoration: 'none'
};
return (
<button style={style}>
{text}
</button>
)
},
props: {
text: {
type: String,
default: ''
},
vertical: {
type: Boolean,
default: false
},
backgroundColor: {
type: String,
default: "#ffffff"
},
color: {
type: String,
default: "#ffffff"
},
fontSize: {
type: Number,
default: 14
},
lineHeight: {
type: Number,
default: 1
},
borderWidth: {
type: Number,
default: 1
},
borderRadius: {
type: Number,
default: 4
},
borderColor: {
type: String,
default: "#ffffff"
},
textAlign: {
type: String,
default: "center"
}
}
}
将这些属性抽离出来后就形成了系统里最小的数据单元。
数据组装和分类
俗话说的好，人不可能一口吃成胖子，数据的组装也是，需要分步骤，分类别地来组装。 这是比较复杂的一个模块，页面的交互非常的多，细节也非常的多。数据组装模块承载的主要功能是根据用户的操作输出一份H5页面的配置数据，这份配置数据最终由渲染引擎来处理。主要有三个核心的组装步骤：
- 将多个不同功能的组件组装成单个的页面（element.js）
- 将多个页面组装成一套模板（page.js）
- 将多个模板进行自由切换（template.js）
组件标准化设计
组件的组装需要有具体的规则，不能随随便便的把一堆数据组合到一起，所以我们需要先对各个组件做一个标准化的设计，用一个约定好的JSON数据格式来装载数据。
这里总共定义了三个基础的工厂类，来按照一定的规则组装数据，输出标准化的组件。 下面来说说这三个类分别的作用
element.js 元素类就是一个组件工厂，把定义好的基础组件和JSON格式的配置项放进去，它会返回一个定制的标准化的组件。
// element.js
class Element {
constructor (ele) {
this.name = ele.name;
this.uuid = ele.uuid || +new Date();
this.pluginProps = this.getPluginProps(ele);
this.commonStyle = this.getCommonStyle(ele);
this.animations = ele.animations || [];
}
...
}
export default Element;
page.js 页面类，用于将各种组件组装成页面。
// page.js
class Page {
constructor (page = {}) {
this.uuid = page.uuid || +new Date() + parseInt(Math.random() * Math.pow(10,8));
this.pageId = page.pageId;
this.elements = page.elements;
this.coverUrl = page.coverUrl || '';
}
...
}
export default Page;
work.js 作品类，所有的页面的集合，包括所有的页面、作品封面、作品名称、是否发布等信息
// work.js
class Work {
constructor (work = {}) {
this.title = work.title || '标题';
this.templateId = work.templateId;
this.description = work.description || '描述';
this.sourceType = work.sourceType;
this.pages = work.pages || [new Page()];
this.coverImageUrl = work.coverImageUrl || '';
this.coverMusicUrl = work.coverMusicUrl;
this.isPublish = work.isPublish || 0;
}
...
}
export default Work;
数据生产和组装
基础的数据结构已经设定好了，接下来就是根据用户的操作，进行数据的生产和组装了。
技术点（组件通信）：
- vuex：用来同步和保存各个组件的数据。
- event bus：监听组件派发的事件，执行相应的函数。
vuex和event bus能简化组件间的通信，最大程度的降低组件之间的耦合。
使用vuex还有一个好处，它可以将所有的数据聚合到一起，方便形成一个配置文件。想想看，你如果把数据放到组件内部通过props或者event来传递的话，会非常的松散，最后还需要花很大的力气把数据进行聚合形成配置文件。
// store
...
const state = {
...
work: { pages: [] },
editingPage: { elements: [] },
editingElement: null,
...
}
...
页面渲染引擎
页面渲染引擎是系统最核心的部分，而render函数又是渲染引擎最核心的部分，vue的render函数接收三个参数，一个是需要创建的HTML的节点的名称、组件选项对象或者一个函数，另一个是节点需要的属性即json格式的配置文件，还有一个是子集虚拟节点。
技术点：
- render 函数
// 需要编译器
new Vue({
template: '<div>{{ hi }}</div>'
});
// 不需要编译器
new Vue({
render (h) {
return h('div', this.hi)
}
});
render(h) {
return (
...
const data = {
...
class: 'element-on-edit',
props: element.getProps(),
on: {
input: ({ value, pluginName }) => {
if (pluginName === 't-text') {
element.pluginProps.text = value;
}
},
move: ({ value, pluginName }) => {
if (pluginName === 'm-image-box') {
element.pluginProps.pos = value;
}
}
}
};
{h(element.name, data)}
...
)
}
页面配置实时预览
页面的预览页和编辑页的主要区别是预览页不用响应用户的操作,只是数据的渲染
renderPreview (h, elements) {
return (
<div style={{ height: '100%', position: 'relative' }}>
{
elements.map((element) => {
return (
<div>{h(element.name, element.getPreviewData())}</div>;
)
})
}
</div>
)
}
总结
- 用工厂模式来生成标准化的json数据
- 用
vuex和event bus来简化组件之间的通信，聚合用户编辑过程中产生的数据，形成配置文件 - 用render函数来解析json格式的配置文件，渲染页面
