# 继往开来：可视化页面搭建工具

在人们的传统印象中，前端一直都是很薄的一层，向上不能影响后端数据，向下不能改变产品设计，只是相当于数据与界面之间的一个连接层，单独拿出来后就将失去其大部分的价值。但随着单页应用的普及，越来越多的重型前端应用被开发了出来并逐渐成为了人们常用的生产力工具中重要的组成部分。

对于任何一家有运营需求的公司，「可视化页面搭建工具」都是一个刚需，我们很难想象有哪家公司的前端工程师每天的工作就是做生命周期只有几天甚至几小时的活动页。所以一直以来「可视化页面搭建工具」在前端开发界都不是一个新鲜的议题。从 20 年前的 Dreamweaver 开始，一直到最近淘宝推出的 飞冰（ice），其本质上的思路都是类似的，即基于组件的模块化页面搭建。

# 三个阶段

在讨论具体的页面搭建工具之前，我们首先要明确一个问题，那就是谁是页面搭建工具的目标用户以及页面搭建工具能够帮助这些目标用户解决什么问题？

结合目前市面上已经推出的产品，可视化页面搭建工具的目标用户大致可以分为两类：一类是非技术的运营（产品）人员，主要使用场景为更新较为频繁的促销页、活动页等；另一类是非前端开发的技术人员，主要使用场景为简单的内部管理系统搭建。而根据不同的使用场景及需求，页面搭建工具最终交付的成品也不尽相同。

# 静态页面

常见的可视化页面搭建工具一般都会包含页面预览区、组件选择区及布局调整区（如调整组件顺序等）等三个部分。在从组件选择区选择了某几个组件后，每个被选用的组件还会有各自的属性编辑界面，一般为弹窗的形式，如下图所示的表格组件编辑界面。

最终的产出就是一段描述当前页面布局与内容的 DSL，通常以 JSON 的格式存储。

{
  "pageId": 1,
  "pageUrl": "/11-11-promo/electronics",
  "pageTitle": "双十一大促 - 家电专场",
  "layout": "two-columns",
  "components": {
    "two-columns": {
      "firstCol": [{
        "componentName": "list",
        "componentProps": [{
          "title": "促销家电列表",
          "data": [{
            "name": "电视机"
          }, {
            "name": "洗衣机"
          }, {
            "name": "冰箱"
          }]
        }]
      }],
      "secondCol": [{
        "componentName": "list",
        "componentProps": [{
          "title": "促销家电列表",
          "data": [{
            "name": "电视机"
          }, {
            "name": "洗衣机"
          }, {
            "name": "冰箱"
          }]
        }]
      }]
    }
  }
}

与之相配合的在客户端代码中还需要有两个解析器。第一个解析器是路由解析器，即根据当前页面路径向后端发送请求拿到对应页面的 DSL 数据。第二个解析器是在拿到这段 DSL 数据后对 components 字段进行解析然后按照设置的布局逐个渲染配置好的组件。

这种架构非常适合处理内容展示页面的需求，从技术角度来讲也很适合做服务端渲染因为每个页面的渲染结果完全是数据驱动的，后端返回的服务端渲染结果就是最终前端展示的 HTML。但这种方案的局限性在于无法动态更新页面数据，因为数据和组件的配置是完全绑定的想要更新页面数据就需要去更改组件的配置。

# 动态页面

为了实现动态更新数据的需求，我们需要将组件的数据源与