关于前端:页面搭建系统的那些事儿

在降本增效的大背景下，Low Code 这两年被大家探讨的比拟多，社区里也有很多不错的解决方案涌现进去。对于前端来说，页面搭建是一种具体的 Low Code 实际模式，是一种曾经被证实无效的技术和业务提效伎俩。

通观社区里的支流实际，页面搭建目前还只能解决一些垂直畛域的问题，比方电商营销、中后盾治理页面等。换句话说，适宜应用页面搭建来解决的问题，通常具备如下两个特点：

• 页面比拟标准化，或者说页面布局和业务逻辑较为固定。
• 开发工作比拟反复，各方沟通耗时比拟多

除了以上两个特点以外，还有一个常见特点，就是资源瓶颈的问题。人力资源紧缺，又很难在短时间内招到称心的人。

当然，在一些特定畛域内，比方电商营销，还会有需要比拟高频，开发工夫短，上线工夫紧等特点。比方一周好几个流动，工夫要求又很高，须要即刻上线的状况。

页面搭建零碎是什么

页面搭建零碎，简略来说，就是通过可视化加自动化的模式来实现交付页面的生产过程。这个生产过程会屏蔽很多业余畛域的常识（比方编码、技术概念等），同时能够极大的复用已有的工作成绩，最终实现老本升高和效率晋升。

从技术角度来说，页面搭建零碎是将 HTML、CSS、JS 组装成页面。对于古代前端开发来说，都是开发组件，而后通过框架来实现页面渲染。因而，页面搭建零碎实际上是实现组件到页面的拼装工作。

页面搭建零碎组成

组件和模板

组件是页面搭建零碎中最小的组成单元。不论是基于 React 还是 Vue 开发的，亦或是基于 Web Component 开发的，组件都须要对外提供肯定的接口，使得外界能够应用组件。这些接口，咱们能够艰深的了解为 props。

当页面搭建零碎成长到肯定规模，零碎内的组件会越来越多，会缓缓衍生出组件库乃至组件市场。这时候，咱们就须要有一些辅助零碎来对组件进行治理。

模板是组件的固定汇合。当某些页面构造反复呈现，变动的只是内容时，比方一些流动页面，咱们能够将这些页面抽取成模板。与组件一样，模板也会逐渐演变出模板库和模板市场。

咱们以组件为例，来看看组件的治理办法。通常，有两种组件治理办法。

• 一种是间接将组件放到代码仓库中
• 一种是将组件公布成独立的包，托管在包治理库中，比方 npm。

第一种办法通常在我的项目初期被采纳。在我的项目初期，整个零碎还在验证和打磨阶段，组件绝对较少。与页面搭建零碎放在同一个代码仓库中，治理复杂度低，使用方便，能够实现疾速迭代。然而当零碎逐步成熟，接入的业务越来越多，组件数量呈指数型增长。通过对立的代码仓库来治理不论是从代码复杂度还是从治理沟通复杂度来说，都曾经不太事实。这时候就须要应用第二种办法了。

第二种办法，将组件公布成独立的 npm 包，页面搭建零碎通过肯定的形式辨认和加载组件包，实现组件包的接入。这种形式能够解决组件数量指数增长的问题，然而实现老本也比拟高。通常来说须要约定一个组件接口标准，组件须要实现这个接口标准能力被零碎辨认并应用。然而也有做的比拟好的，比方阿里的云凤蝶，会通过云端服务的模式，借助于一些工具对 npm 包进行剖析，推导出组件有哪些能力。这样对组件开发束缚更小，能够间接复用已有的组件，然而技术挑战也更大。

可视化编辑器

页面搭建零碎的外围应该就是可视化编辑器了。通常长上面这个样子。

可视化编辑器次要有两个问题须要解决。

页面布局

这里说的页面布局指的不是最终交付的页面布局，而是在生产页面的时候，编辑器内的布局形式。

为了能让不懂技术的人实现页面的搭建，因而页面搭建零碎须要屏蔽一些技术细节。所以可视化编辑，通常都是通过拖拽等模式来实现页面构造的布局。

一般来说，可视化编辑器有多种布局形式可供选择。不同的业务场景对布局灵活性要求不一样。

• Flex 或者 Grid 布局

在画布上会先确定布局形式，而后在外面填充组件。这种布局形式多用在 H5 页面中。比方在营销场景中，这种布局形式用的比拟多。

• 自在布局

自在布局就是能够在画布上随便拖拽搁置组件。页面搭建零碎会通过一系列的办法最终将画布中的组件的绝对地位解决成页面中的地位，并能自适应屏幕尺寸的变动。

阿里的云凤蝶，因为次要解决的是中后盾的页面搭建问题，页面构造绝对比较复杂，采纳的就是自在布局的形式。这外面技术复杂度要比采纳 Flex 或者 Grid 布局的零碎要高很多。

首先要能正确辨认出组件的父子关系，换句话说，就是可能在用户拖拽的画布上正确辨认组件树。这外面会用到一些地位计算的算法。

其次要将画布中组件的地位关系正确的反馈到页面中，并能解决好自适应问题。因为画布中组件的地位都是相对定位的，理论页面中不太可能是相对定位，要做转化。通常须要借助于行列栅格化等算法来做。

状态治理

在可视化编辑器中编辑页面的时候，用户通常须要减少和删除组件，同时还须要对组件数据进行编辑。因而，个别状况下，可视化编辑器都须要一个状态管理器来治理整个利用的状态。

当然基于事件来同步组件数据实现起来比较简单，然而当页面规模比拟大的时候，对事件的跟踪和治理将会变得非常复杂，老本指数回升。因而，咱们这里选用外置的全局状态治理计划。

实用于不同业务场景的可视化编辑器状态设计可能不同，咱们简略探讨一下。

通常来说，全局状态次要解决组件的增删改，即画布中拖拽和删除组件以及在组件属性编辑区域批改组件属性。因而，咱们能够简略设计如下：

{
  state:{
    // 所有增加到画布中的组件数据
    componentData:[],},
  reducers:{
    // 增加组件到 componentData
    addComponentData(){},

    // 编辑组件，更新 componentData
    editComponentData(){},

    // 从 componentData 中删除组件
    delComponentData(){}
  }
}

整个利用的数据都保留在 componentData 中。当在画布区域增加和删除组件的时候，编辑器通过 addComponentData 和 delComponentData 来更新全局的组件数据。当右侧组件属性编辑区域批改组件属性的时候，通过 editComponentData 来更新全局的组件数据。

有了根本的全局状态设计，残余的就是做一些粘合工作，比方组件属性编辑区域，会有一个 Form 表单来编辑属性，咱们须要将表单的数据变更与全局状态做粘合。常见的例子是字段 onChange 到 editComponentData 的粘合。

如果是自在画布，则须要解决一些拖拽动作，而后咋对应事件中粘合 addComponentData 和 delComponentData。

可视化编辑器内有很多技术细节问题须要解决，在页面可视化搭建工具技术要点这篇文章中，探讨的比拟多，能够看看。

个别状况下，如果页面比较简单，比方营销业务中的流动页面，下面的设计足够解决问题。然而如果是在中后盾业务场景下，页面会有肯定的复杂度，下面的设计就显得薄弱了。在中后盾业务场景下，组件之间常常存在关联关系，同时页面构造也更加简单，单纯的 editComponentData 难以满足业务需要。

比方，组件 A 会依赖组件 B 的变动，组件 B 又依赖组件 C 的变动，这在 Form 表单场景中十分常见。

因而，咱们须要借助其余的计划来解决。比方应用一些响应式的计划。nx-js/observer-util 是一个不错的响应式计划。

页面公布

编辑好页面，前面就是发布页面了。其实在编辑的时候，通常会有一个预览性能，因为与页面公布的原理是一样，咱们对立放到页面公布外面来说。

通常页面公布有两种形式，一种是间接公布成动态页面，一种是借助于渲染 SDK 动静的获取页面数据实现渲染。

动态页面

间接公布成动态页面，对于业务来说应用最为简略，只有管制好页面的缓存策略即可实现页面更新。毛病是适用性比拟差，在一些须要内嵌页面的场景下，可能只有 iframe 等比拟无限的抉择。

公布成动态页面，实际上有多种技术计划可供选择。

能够间接在发布页面的时候，在服务端通过 webpack 等构建工具，依据每个页面组件的不同，构建页面专属的动态资源，防止全量引入所有的组件。

也能够将页面须要的组件信息导入到 HTML 文档中，而后在浏览器解析文档的时候，通过渲染 SDK 来加载组件，渲染页面。这与动静渲染的工作机制就十分相似了。

动静渲染

通过 SDK 渲染，适用性广、灵活性高，毛病也比拟显著，零碎须要额定提供一个页面数据获取接口，对系统的可用性要求一下进步了很多。同时，SDK 版本的降级治理也是一个须要思考的问题。

动静渲染，须要 SDK 依据接口返回的信息加载每个组件的代码。换句话说就是加载每个组件的 js 模块。

模块加载计划有很多，比方能够间接将组件构建成 umd 模块，而后浏览器中间接应用。也能够通过 SystemJS 等模块加载计划来实现。

加载完组件模块当前，SDK 就能够实现页面渲染了。

总结

下面概念性的探讨了很多页面搭建零碎的内容，总体来说，页面搭建零碎流程不是很长，外围就在可视化编辑器方面。

思考到会有非开发同学参加页面的生产过程，因而整个零碎是否可能反对业务需要同时真正的做到降本增效，很大水平上由可视化编辑器是否足够易用决定。

对于可视化编辑器来说，要想易用性好，很多细节须要打磨，技术投入会十分大。比方做一个媲美 Sketch 的自在画布的投入老本相对比只能简略增加和删除组件的画布的投入大。

因而，在思考做页面搭建零碎之前，须要明确的问题是，以后业务需要是否真的适宜做页面搭建。在做页面搭建零碎的时候，也须要高度联合业务需要，有针对性的抉择技术计划，能力取得一个比较满意的投入和产出。

常见面试知识点、技术计划剖析、教程，都能够扫码关注公众号“众里千寻”获取，或者来这里 https://everfind.github.io/po…。