JSON 数据搭建 Vue 页面

今天给大家带来的是一个使用 JSON 数据来进行页面搭建的工具 juggle
此项目是基于公司内部一个开发工具重新整理并开源的。
目前功能还不是特别完善，但是基本的渲染引擎可以正常工作。
先看一个演示的 demo，你所看到的都是通过 JSON 渲染而成：
http://juggle.isjs.cn/report.html?pageCode=0001

GitHub

https://github.com/adminV/juggle

起源：

内部在上线此工具之前我们的工作方式比较原始，当有新需求过来，就基于统一的项目模板进行开发，已有组件如果满足需求，将代码 Copy 到新页面进行开发。 即使两个页面有 90% 相似，都需要从头开始开发，开发时间包含了找组件，调试组件，对接新数据，自测等环节，乐观情况下开发时间也在 3 个小时左右。开发完成后交由 QA 同学按照新页面来进行测试，测试时间也需要 4 个小时。也就是一个页面的复制 + 修改 + 测试的时间就需要 1 天。 这样的开发速度面对极其频繁的需求迭代时，比如 ABtest 多需求上线，一天上线 5+ 个需求，就会出现瓶颈，增加人力也不能有质的提高。 最早 CTO 提出的解决方案是参考大数据平台的报表渲染页面，将页面组件化，模板化，实现页面的灵活配置、搭建。 最终目标是能实现页面的可视化拖拽布局，将一些简单需求交给 PM 或者运营。 工具上线后的效果很好 ,如果全部都是已有组件的化，搭建一个页面只需要 10 分钟，算上自测 30 分钟就可以提测。因为都是已有组件，所以测试只需要简单的进行验证即可。 这样一来整个开发周期缩短到了 1 个小时，并且达到了组件管理、复用的目的。

方案：

首先明确目标，为什么这么做：

1. 减少重复开发成本，多个页面，多个项目共有的自定义组件，需要有一套公共的仓库来进行维护。
2. 将简单工作交给 PM 或者运营。
3. 提高开发效率，以往做一个新页面的开发时间，使用配置生成只需要 10 分钟。
4. 提高测试效率，组件未升级的情况下不需要进行深度测试，只需要简单的冒烟即可，并且方便未来集成 E2E 测试。

在确定了整体方向后，我们进行了技术选型，与需求高度相似的是阿里的飞冰。但因为飞冰的物料开发和想象中的不太一样，最终放弃了。 我认为的物料应该是一个非常灵活的元素，我可以基于已有的组件库进行二次封装，也可以从头开始开发组件。所以我们决定按照自己的理解来新开发一套工具。 物料内部维护，在页面中动态使用物料进行页面搭建，在一个基础页面上承载多个页面，使页面配置化。

明确了目标之后再来明确第一版本要实现的目标，抽象的看我们日常开发的页面，可以分为以下几类：

1. 活动页 特点是动画样式丰富。
2. 录入页 特点是表单校验，输入项校验。
3. 回显页 特点是请求单向，没有用户操作。
4. 落地页 特点是入口多，方案多，交互少。

正好最近双十一，各个电商平台的各种活动页，主会场，分会场，品牌落地页特别多。 此次开源的工具是以此为目标，实现落地页的快速配置搭建。

落地页由不同的组件搭建而成，按照组件用途分为以下三类：

1. collection 容器级别组件，例如：下拉列表容器，展开收起容器，tab 切换容器，侧边栏容器等
2. block 块级别组件，用来展示数据的最小单元，例如：多行内容块，左右两列内容块，flex 等分内容块等
3. public 公共组件，例如：全局的提示窗，全局的页头页尾，全局的 loading 等

再来思考一个问题，灵活的另一面是规范，如果一个页面可配置，就要满足以下要求，我称之为约定：

1. 同一个位置有可能放置任意组件，要求所有组件接受相同的参数。
2. 基于第一点，要求每个组件对 prop 参数的要求应该是统一的。
3. 组件之间应该有层级关系，容器级别组件（ collection ）拥有承载块级组件（ block ）的能力，并且容器之间可以嵌套。
4. 容器组件应该拥有自主获取数据的能力，例如三个 tab 标签切换时，每个 tab 都对应单独的接口以及列表。

页面的规则制定好之后我们要考虑页面数据的规范，我们把页面数据分为两类：

1. 页面布局数据，第一部分是什么组件，包含什么组件，要有一个返回布局数据的源
2. 页面业务数据，还是那个原则，可复用的前提是规范，我们与后端约定接口保持最简单的数据结构，保证其复用性。

想清楚以上内容后，再来看看实际的实现方式.

开发步骤：

目标明确，场景明确，开始项目技术栈的确定, 开发环境使用了改造后的 @Vue/cli 4.0 此项目不依赖任何 Vue 组件库，我为了尽快完成 demo，使用了有赞的 vant 库。 页面模板的载体是 report.html 页面。用来承载所有页面配置。 页面模板文件为一个 JSON 文件，位于 public/pageConfig 目录下，以 config 开头的 js 文件。
通过 script 标签异步引入，配置参数挂载到 window.pageConfig 中，再通过 Vue 实例向下传递。 当然你可以使用接口而不是使用文件，我这么做的目的是让配置的维护更方便简单。

每次接触到新需求时，应该尽可能抽象出来成为独立组件，不论是从提高开发效率的角度还是提高测试效率的角度看，这么做都是必要的。 juggle 工具不关注组件，只关注结构。所以你可以直接引入组件库的组件，也可以基于组件库二次开发封装一个新的组件。 所有组件位于 /src/components 目录下。按照组件类型区分为 block，container，public。 在对应目录下新增组件文件即可完成新组件的开发。 第二步将新组件注册到 /src/htmls/main/report.js 入口的 mixin 中。 简单两步就可以在配置中使用该组件了：

 { "templateId": "BlockFlexBox", "prop": { "dataKeyChain": "bannerList", "styleOptions":{} }, "childItem": [] } 

要注意，juggle 的结构对组件的 prop 进行了约定，所有组件只接受 prop，childItem，baseData 三个参数。 prop： 包含所有内部变量 childItem： 包含所有子组件，按照顺序渲染 baseData： 全局数据 也就是说，新组件的所有参数都要包含在 prop 下，在组件内部进行拆解。

本地运行：

clone 此项目，依次执行以下命令

 $ npm install $ npm run serve 

打开页面即可查看： http://localhost:8080/report.html?pageCode=0001

开源合作：

项目目前只是一个简单的渲染工具，我希望它未来应该是一个功能更强大，配置更灵活的开发工具。 目前能想到还未实现的大功能点如下：

1. 静态配置文件的防缓存
2. 组件的按需打包，按需加载
3. 全局状态的约定以及管理
4. 拖拽布局后台实现
5. 复交互类型页面的配置 要实现以上功能，凭借个人力量需要长时间的整理分析，并且独立维护思路单一会考虑不全面。 所以在这里邀请各位参与到此开源项目的维护中。只需要 Fork 到自己的仓库下，将功能点实现后提交 PR 给我即可。参加开源项目的同学，会被列入到项目的人员列表中。