页面可配置设计构想 _页面

背景与现状（一）背景
“不要写死”——程序开发过程中经常提到的一个问题。我们运用各种设计模式进行抽象、封装，就是为了让我们的代码看起来不是那么“死”，从而能够灵活的适应各种“变化” 。
如今互联网的变化，可以说世界的变化超出每一个人的预测，那么对于快速变化的市场与用户需求，尤其我们客户多样，存在或多或少的个性化定制需求，我们需要更加快速、高效地做出响应——页面可配置的概念应运而生，其包括UI（界面与交互）、业务、数据、配置等诸多方面。
页面的自定义比作盖楼，添加一个楼层，每层可以自定义内容，譬如商品、优惠券、商品排名等。在淘宝旗下的店铺装修平台——“淘宝旺铺“中，淘宝店家可以选择基础模块的内容，编辑首页或新建页面，动态配置页面。

文章插图
淘宝旺铺装修App

文章插图
淘宝旺铺装修PC
这种页面配置有以下特点：

静态数据或后台数据
单页（多图、图文混合偏多)
页面区块耦合度小，可灵活拼装
新建的页面可以快速发布上线

（二）现状
目前系统各业务模块业务耦合度较高，依赖较强，没有统一的配置管理方案与渲染实现，重复造轮子。
（三）设计思考

不能因为技术架构上对页面可配置支持的引入，带来新的开发成本和负担；
引入可配置支持的页面应该与引入前基本保持在同样的性能表现，不能因为页面可配置明显拖慢业务性能。

所以，在实现页面可配置的前提下还有两个目标：对业务无侵入、高性能。
核心分析（一）核心问题
可配置页面，要解决三个核心问题：

页面布局和样式
页面内容，即数据
页面的交互

（二）页面分析

文章插图
头条号创作者首页
上图是我截取的头条号创作者首页的图片，我把它划分成了不同的区块，并且标上了编号。整个页面，我们将它称为画布（Canvas，或者叫做页面）,里面一个个带有编号的红框，称之为容器（Container）。实际上，画布（页面）也可以理解为是一个足够大的容器，也是顶级容器，便于理解，暂时称它为根容器（Root Container）。
现在我们来具体分析一下这个页面：

整个详情页面被认为是一个完整的画布（白纸），由不同（大小不一）的容器构成，这些容器就像乐高积木，可以用它组装搭建成不同的页面；
容器由各种组件（Component）填充，组件包含数据源、显示样式、交互逻辑等一套完整的属性（Attribute）；
组件中包含banner、按钮等单元，这类最小的组件单元，我们称为元素（Element），这一类元素逻辑上将无法再被拆分；
原则上容器可以由更小的容器构成，它们是递归构建的，呈树形结构，这是一个迭代实现的过程，本次设计暂时不考虑嵌套。

综上分析，我们可以得出五个概念：

画布（Canvas）：整个页面，可以理解为一张白纸；
容器（Container）：整个画布可以被拆分成不同的区域（Region），每一个区域称之为容器。在这次设计方案里面，暂时不考虑容器嵌套更小容器的问题；
组件（Component）：组件是粗粒度的，包含部分页面的UI、数据以及与之相关的业务逻辑，容器由可以由若干个组件构成，组件填充容器的显示内容（其实组件也可以称为模块，之所以称为组件是为了后续丰富通用组件库考虑）；
属性（Attribute）：单个组件包含数据源、样式、交互逻辑等一套完整的属性；
元素（Element）：组件包含若干页面元素（banner、button、tab、label等），它们是逻辑上最细粒度的单元，不可再被拆分，本期设计不细化到元素层面。

（三）页面布局
有了以上概念定义，我们再回过头看这个页面。从布局层面来看，它就是一个网格布局，以从上到下，从左到右的顺序逐个分布容器与组件，但是就这个页面来说，它还不是简单的横向纵向网格。