一个 Schema，搞定 PC 站点搭建的 500 张页面

前端早早聊大会，前端成长的新起点，与掘金联合举办。 加微信 codingdreamer 进大会专属内推群，赢在新的起跑线。

---

第十四届|前端成长晋升专场，8-29 即将直播，9 位讲师(蚂蚁金服/税友等)，点我上车👉 (报名地址)：

---

正文以下

本篇为第三届 - 前端页面搭建专场洛尘讲师的分享

自我介绍

你们好，我是洛尘，来自于政采云前端团队，2014 年毕业于浙江工业大学，作过 .NET ，写过 Java ，玩过数据库，2015 年才加入前端这个你们庭，这一路上，见证了前端从 jQuery -> Angular -> React/Vue 的转变，经历过降薪、裁人，还经历过一个子公司从创立到解散。2019 年 1 月，正式加入政采云有限公司，负责“鲁班”搭建系统相关的前端基建工做，是一枚普通的前端打字工程师。

搭建系统话题引入

完成业务需求是咱们的本职工做，需求评审 -> 开发 -> 提测 -> 上线，上线完了之后呢，又是下一轮的需求评审 -> 开发 -> 提测 -> 上线，3 年，5 年，10 年过去了，你学会了什么？需求评审，还有开发，这只不过是在出蛮力。那么如何优雅的去解决业务问题，这就涉及到咱们今天要讨论的话题 —— 搭建系统。

业务场景

技术是用来服务于业务的，没有业务场景的技术建设，都是耍流氓。那让咱们一块儿来看看搭建系统的业务场景有哪些：



上述场景都是真实存在的，在咱们公司，门户网站的需求量是很大的，并且不少门户网站的类似度极高，这就意味着，只要视觉规范保持一致的状况下，前端的元件、组件、模块甚至是模板是能够进行大量复用的；还有，运营所提的需求体量小，功能小点多，需求的优先级天然提不上来，运营本身又无能为力，最终致使流量和用户的流失；对于前端来讲，重复的业务需求，对于自身成长毫无价值可言，渐渐的也就麻木了，离当时定下的一个亿的小目标愈来愈远，成为了无情的编码机器。

业务实例

下面这些都是咱们公司的门户网站，顶用、头部导航、banner 位、商品类目、快捷入口等等都是极度的类似，这也将组件/模块的重复利用成为了可能，也是搭建系统存在的前提之一。

咱们再看另外一个例子，图中红框选中区域，都是运营/产品但愿手动配置数据的模块，它几乎占据了页面内容的 70% 之多，也就能够想象运营所提需求不能获得及时解决时，心里到底有多痛苦。

搭建系统长什么样

咱们的搭建系统一共分为 3 个主要功能模块，1 个数据模块，1 个权限模块:

• 站点管理：站点这个东西，为了方便理解，你能够认为是一种业务分类，每类业务对应一个站点（分类）
• 页面管理：这是搭建的核心功能，具体功能能够看下面连续的四段录屏（图 2 ~ 图 5）。
• 组件管理：一个页面会用到不少组件，不一样的页面也会用到同一个组件的不一样版本，这就是组件管理存在的意义。
• 数据看板：如何体现一个系统是否带来了价值，是否被有效的利用，数据才是最直观的表达方式。
• 权限：权限分为两部分：一部分是菜单和操做权限的控制，另外一部分是系统自身的数据权限控制，也就是约束用户的数据可见范围，数据权限这块尤其重要，若是任何人均可以对数据进行编辑，那是很是危险的事。

架构图

部署

搭建系统要怎么部署？有小伙伴可能会疑惑：这尼玛还能怎么部署，测试、预发、生产环境各来一套呗。你只说对了一半。问你们一个问题：不一样环境的页面是否是同一个？是同一个吧！不对，是长得同样的三个页面！！那么这个时候，咱们就会有一个心理预期：只作一次页面搭建，能在三个环境生效。那这要怎么作？让搭建系统自己部署在一个环境上，并且最好是生产环境单独服务器（图中的运维 VPC ），而后让这台服务器和其余三个业务环境（左侧的 test/staging/pro 环境）打通，也就是说，在搭建系统的环境上产出页面，而后经过“发布”操做把页面同步到测试，预发，生产这三个业务环境，这样就能够达到咱们的预期。

上面说了这么多，你们也应该对于搭建有必定的印象了，接下来咱们进入此次分享的正题。

如何配数据

JSON Schema

说到数据，你们确定会想到什么？String，Number，Boolean，但今天我要说的是 JSON，准确的来讲是 JSON Schema，那么请你们来思考一下这个问题，JSON Schema 究竟是 JSON 的扩展？仍是 JSON 的约束？

答案是：约束。其实 JSON Schema 就是一个标准化/规范化的 JSON 数据。那 JSON Schema 是怎么定义出来的，这也就是下面我要讲解的内容。咱们先从简单示例入手。

简单示例

这是一个很常见的 form 表单，其中包括输入框，下拉框，开关。其中包含的元素包括：label（主题色、帐号）、placeholder、type（input、switch）、data（下拉框的选项）、key（字段名）、value（字段值）。刚才说的这些都和咱们的 JSON Schema 定义息息相关。
把刚才属性的定义整理一下，拿其中一个“主题色”的下拉框举例：

能够看到咱们用一段 JSON 数据描述了一个具体的页面元素，这就是 JSON Schema 在搭建中要达到的效果。
固然了除了页面元素的定义之外，页面还须要有初始数据，初始数据的定义就简单不少，大概是这样：

扩展类型

上面说到的 input、switch 都是根据场景定义的类型，咱们也能够将 input 定义为 String ，switch 定义为 Boolean ，这些都是经过场景人为定义的一些分类标准，没有固定的表达形式，只要你确保定义合理，而且容易被人理解便可。除此以外，日常业务当中比较常见的还有这些：

总结

在平时编码过程当中，咱们用来定义数据最多，也最多见的复杂类型是对象（Object）和数组（Array），而构成对象和数组的最多见的基本类型是 String 和 Number ，那也能够是扩展类型。

说了这么多 JSON Schema 相关的内容，那它和咱们的业务到底有什么关系，让咱们一块儿来看看

业务场景

仍是回到咱们刚才那个门户网站，刚才说到红框部门是运营/产品但愿手动配置数据部分，那么问题来了，怎么让他们可以配置数据，而数据配置又如何和咱们的 JSON Schema 产生关系呢？

将业务转化为数据

第一步，咱们须要将业务场景转化为客观存在的数据，拿其中一小块来举例：
从图左能够看到这是一个各省份的快捷入口，这一小块页面它对应的数据就是图右所示：

很常见，也很简单对不对，那接下来咱们进入第二步：

将数据转化为定义

上面咱们提到过不少的类型定义，那咱们先在将这些定义引入到咱们的业务场景中来。

我能够看到这份数据，它的数据类型是 Array，其中包括了“地名”、“图标”、“连接”、“描述”字段。咱们拿地名、图标这二个字段来进行举例说明：

• 地名：label = 地名，key = addressName，type = String；
• 图标：label = 图标，key = icon，type = Select，data = { icon1: icon1, icon2: icon2 } 。

而后，咱们将他们进行整合，能够获得图右这样的结果。

将定义规范成结构

咱们已经有能力能够将一个页面模块转化为一份简单的 JSON Schema 片断，一样的，咱们也能够将其余模块作一样的转化，不论是 Object ，仍是 Array ，甚至是 Two-dimensional Array（二维数组），而后，咱们将每一份 JSON Schema 片断进行整合，固然了，光有定义还不够，页面还须要有数据，这样咱们就能够得出完整的 JSON Schema 结构：

可视化

最后你能够根据你的可视化须要，写一个符合你本身页面设计的 format 函数，对这一份 JSON Schema 数据进行转化，最终渲染成为一个表单、表格或者其余样子。下图是我将 JSON Schema 转化后渲染获得的运营数据配置页，给你们作个参考：

总结

体系和扩展

搭建系统是前端工程化体系之一，咱们能够根据不一样的业务场景，建设不一样规模的搭建系统：元件级、组件级、模板级、甚至是应用级的；从搭建场景来看，能够是单个页面、也能够是整条业务链路、营销活动、甚至是整个中台；从终端类型来看：能够是 PC、H五、Native、小程序等等；为保证搭建系统的稳定性，产出高质量、高性能的页面，咱们还须要一些其余能力的支持：自身的系统的容灾策略，比方说，页面丢了须要怎么样的兜底方案，数据丢了怎么找回，发布失败了怎么回滚；从规范层面来讲，咱们须要有一套完整的脚手架，约束和规范组件的开发生命周期；从产出层面来讲，咱们须要保证搭建产出的页面性能相对可观，所以就涉及到页面性能检测，这又是一套完整的系统，咱们的性能检测系统叫作“百策”，它和搭建系统进行横向打通，提供搭建页面性能检测能力。突然说到了页面，天然就少不了数据：BFF 层、数据共享、Ajax 请求聚合等等。
上面说到的这一切的一切，不论是一个小点仍是一个大的方向，只要你抓住了业务的痛点，为其设计一套通用的可行性方案，并落地成为一套系统反哺于业务，那都是一种质突破，也是走向产品化、智能化的一大步。谨记：你的一小步，业务一大步。

快到碗里来，咱们招人啦！！！

团队最新的招聘信息，请扫下方二维码关注“政采云前端团队”微信公众号获取，期待你的加入。
简历自荐推荐，请发送至 ZooTeam@cai-inc.com