如何设计与开发一个搭建组件

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。

通常来说，我们做搭建，需要有一套完整的基础设施，组件是搭建应用的基础。

搭建分为两部分，一部分是搭建部分，最终的产物应该是一段数据结构，表示一个页面；另外一部分是渲染部分，即拿到表示页面的数据，能渲染出页面来。

组件通常分为两部分，一个是内置的组件，一个是业务组件。内置的组件是已经开发好的组件，业务组件是当内置组件不满足要求的时候需要开发的。

那么如何开发一个组件

1. 首先要明确组件的逻辑及分类
2. 借助工具进行开发，调试及测试

组件分为哪几部分

1. 组件可编辑区的描述文件，表示组件的可编辑属性及这些属性的展示方式，描述组件有哪些能力，可以设置哪些数据。我们可以提供下能力的封装，方便属性的快速开发。也提供了一些能力的封装。
2. 编辑区视图，有时候我们需要的编辑时的展示和实际的展示不一定一致，所以可以单独设置编辑区视图
3. 视图文件，实际展示的时候需要的文件

所以总结起来，我们开发组件一共分为如下几个步骤：

1. 利用脚手架工具生成一个组件模版
2. 设计这个组件的接口，这个组件都需要配置哪些信息，这些信息的格式
3. 设计组件在编辑器中的视图
4. 确定组件在实际项目中的展示视图，注意这里就可以用到组件接口传过来的属性内容去做渲染了

所以可以看到，搭建组件的关键是一个生态的搭建，关系到组件的开发、预览及调试，重要是的基础设施的建设。