共计 4904 个字符，预计需要花费 13 分钟才能阅读完成。
摘要：如何疾速、高效地构建前端组件乃至页面是解放前端生产力的重要标记，把握形象组件和页面模型，了解前端可视化搭建思路，解脱固有的开发模式，进步前端开发效率，是每位前端应该理解的。
本文分享自华为云社区《【云驻共创】前端可视化框架是怎么炼成的？》，原文作者：华为云 EI 专家胡琦。
随着挪动互联网的迅猛发展和 5G 技术的遍及，前端页面需求量爆炸增长，用户交互也变得越来越简单，页面从零开发的老本也水涨船高。如何疾速、高效地构建前端组件乃至页面是解放前端生产力的重要标记，把握形象组件和页面模型，了解前端可视化搭建思路，解脱固有的开发模式，进步前端开发效率，是每位前端应该理解的。
从一个“栗子”说起
在咱们前端开发过程中可能常常这样会遇到这样的场景：
(某天，产品经理找到前端。)
产品经理：简略开发一个欢送页面，就展现下“欢送拜访”。(这没什么难度啊，代码很好写了，于是前端不假思索就把代码秀进去。)
前端：```
<template>
<div>
欢送拜访
</div>
</template>
```（一天之后，产品经理感觉这个欢迎词不够具体，还想加个主语，于是……）产品经理：那个欢迎词简略改一下，改成“欢送拜访咱们的网站”。前端：```
<template>
<div>
欢送拜访咱们的网站
</div>
</template>
```（通过代码提交、代码审核、代码合并、部署到测试环境、测试验证、灰度公布、产品验证、公布上线等一系列流程，欢迎词终于更新了……
又一天后，产品经理感觉欢迎词没有展现出咱们的劣势，于是加了个形容词来形容咱们的网站。）产品经理：那个欢迎词还是不行，改成“欢送拜访咱们帅气的网站”。（迫于产品经理手中 40 米长大刀的威慑，只管心中满是问号，前端还是批改了代码。）前端：```
<template>
<div>
欢送拜访咱们帅气的网站
</div>
</template>
```（又又一天后，产品经理想到一个“狂拽酷炫”的形容词，于是……）产品经理：欢迎词再改下，改成“欢送拜访咱们狂拽酷炫的网站”。（此时，前端坐不住了，想到了通过让产品经理本人保护 JSON 文件，在页面中获取 JSON 中 title 字段进行渲染显示）前端：```
<template>
<div>
{{title}}
</div>
</template>
<script>
import axios from "axios";
export default {data() {
return {title: ''}
},
created() {this.queryTitle()
},
methods: {queryTitle() {axios.get('JSON 文件所在门路').then(res=>{if(res && res.status === 200) {this.title = res.data.title}
})
}
}
}
</script>
```
(又又又一天后，产品经理有了另一个想法，这次不是改欢迎词了。)
产品经理：我想再加一个抉择框，用来收集用户信息。（此时，一阵风吹过，前端在风中凌乱了……）当然，既然能想到通过 JSON 去配置，那意味着整个组件、页面都能配置，只需给到产品经理一个可视化的界面去配置，即可生成 TA 想要的页面，大大节俭了沟通老本、晋升了开发效率。这时，可视化框架应运而生。
可视化框架的形成和分工
可视化框架是怎么的？首先咱们先理解一下可视化框架的形成和分工。开发作为可视化框架的维护者，能够提供一个可视化的配置平台；指标受众，也就是可视化平台的使用者，如上文例子中的产品经理；使用者通过可视化配置平台对页面进行配置，平台会产出一份配置文件用来形容页面并上传到存储空间；配置文件通过渲染引擎解析最终生成页面。在这个形成中，作为开发框架的维护者，咱们只须要关注可视化配置平台和渲染引擎，当然可视化配置平台也只是将使用者的输出转化为渲染引擎能解析的配置文件并上传，是精益求精的一环，如果还想利用在更简单的场景，还能够加上权限治理，比方 A 只能编辑 A 负责的页面，B 只能编辑 B 复制的页面，还能够实现一个工作流的流程编排，比方审核……
可视化框架的外围在于渲染引擎，咱们如何得出这个渲染引擎以及渲染引擎是如何运作并渲染最终的页面，是咱们所关怀的。如何得出渲染引擎就不得不先说说页面泛化模型。
页面泛化模型
为什么会有页面泛化模型？因为咱们不同的页面其实是通过渲染引擎解析不同的配置文件渲染进去的，因而渲染引擎须要泛化的能力。比方页面 A 是表单填写，那么就会要求渲染引擎可能解析表单的配置文件；比方页面 B 蕴含卡片式列表，就会要求渲染引擎可能解析列表的配置文件。页面泛化模型的建设，次要依据开发者本身的教训和办法建设满足本身业务需要的模型即可。像上文案例中，如果产品经理始终只要求批改欢迎词，那案例中的那段 title 的渲染引擎就足够满足需要了。接下来，以华为云官网页面为例，抛砖引玉讲讲页面泛化模型如何建设。
从下面截图中咱们能够看出这其实是一个从上到下的构造，能够了解为页面是由一个个楼层形成的，楼层能够了解为 body 下的一个 div 块，或者是一个功能块。比方图中从上到下是页头、banner、疏导跳转楼层、举荐文章、技术畛域楼层。当然咱们常常遇到的页面也不全都是高低构造，还有左右构造。
其实，像这样左右构造的页面，您能够了解外层还有一个更大的容器组件包裹，整体造成一个楼层。容器组件只负责款式，比方上图中容器组件负责左右布局，如果您对布局还没有概念，您可按下 F12 键查看上图布局的代码，您会看到其实右边两个模块是被 classname 为 edu-index-version-left 的 div 包裹，左边两个模块是被 classname 为 edu-index-version-right 的 div 包裹, 它们仍旧是从上到下的楼层。因而，页面 = 楼层 + 容器组件。
再来看看楼层解构，以上图为例，图中主体局部是一个 tab 性能组件，通过查看页面源码，咱们发现两处红色框圈进去的文本并没有设计在 tab 性能组件里，而是独自成为文本控件，这是因为这部分是属于定制化的性能，并不是每个 tab 性能组件都有的，就抽离进去了遵循繁多职责准则，蓝色框是一个容器组件。再来看看 tab 性能组件中的卡片，卡片也是由一个一个的控件组成。因而，楼层 = 容器组件 + 控件。
可视化框架中的控件和常见的 UI 框架中的组件一样，都具备欠缺且繁多的职责，比方表格组件，无论再怎么加性能都是在表格外部，表格外面的性能是无奈拆分进来的。但可视化框架中的控件和 UI 框架中的组件还是有区别的，次要不同点在于控件须要用来被编辑，因而它具备对立的 props，所有的控件要遵循一样的 props，如视图配置和数据源，在可视化中咱们不晓得页面会用到哪些组件，因而须要对立去做循环渲染，不感知控件的具体属性。
可视化框架中的容器组件实质上也是组件，次要负责布局，分为根底容器组件和性能容器组件。根底容器组件中左右布局个别通过栅格或者 Flex 实现，高低布局通过失常的文本流或者定位以及控件本身间距等实现。性能容器组件如 tab 容器、轮播组件等。
当思考用户交互时，事件在可视化模型中就不得不思考。可视化模型中的事件须要关注交互的发起者、交互的作用者以及交互的影响形式，而不须要关注交互的品种和交互的具体内容。比方点击了某个按钮，步进器的最大最小值从 1、2 变成 3、4，其实是扭转了 input 控件的 min 和 max 属性；比方表格筛选加了肯定条件之后，显示数据变少了，是因为触发了数据事件影响了表格的数据源；比方一个开关组件，点击之后管制控件的显示和暗藏……
最终，咱们确定的可视化模型就是上图中总结的点。可视化页面由控件 + 容器组件 + 事件组成，控件的粒度最小，是性能的最小单位；容器组件负责布局，是款式的汇合；事件响应用户交互传递控件间依赖关系。那控件、容器组件、事件是怎么联合的呢？就不得不谈谈渲染引擎了。
渲染引擎
渲染引擎实质上也是组件，次要性能是渲染当层组件、解决当层组件交互关系、对当层组件状态进行治理。它不关注子层组件，子层组件由子层容器的渲染引擎渲染，因为每一层组件的配置和数据源不一样，因而渲染后果也不雷同。视图局部示例代码 (基于 Vue.js) 如下：
<template>
<div :class="clsPrefix">
<component
:is="component._type"
v-for="component in viewConfig.components"
v-show="showState[component._id]"
:ref="component._id"
:key="component._id"
:viewConfig="component"
:dataSource="dataSource[component._id]"
@valueChange="valueChangeHandler($event, component._id)"
/>
</div>
</template>最外层是由 div 包裹，应用自定义动静组件 component 的形式定义渲染引擎，带下划线的属性意味着是自定义组件的内置属性，is 决定组件渲染的类型，如 button，做到能够不感知当层组件具体内容渲染当层组件;v-for 循环以后组件的属性；v-show 管制组件是否显示，通过 showState 进行状态治理;ref 建设索引，能够用来做一些高级性能，比方父层容器调用子层容器的办法；viewConfig 和 dataSource 就是上文中提到的控件中所必须的；@valueChange 是组件提交的对立事件。
父层容器和子层容器实质都是渲染引擎，只是款式不同。比如说一个左右布局的容器组件，相当于在视图中 v -for 循环的中央绑定一个 class 如栅格布局或者 flex 布局的款式，如果是栅格布局的话，用户就要先定义 type 是栅格组件，而后配置 viewConfig 中 grid 属性之类的，如果是 flex 布局，定义的 type 就是 flex 组件，对齐形式如指定为 space-between 之类的。上文中示例代码就是一个失常的从上到下的布局。
首先外层传递两个要害的参数 –viewConfig 和 dataSource，当层容器就会进行配置解析和配置散发。配置解析次要蕴含属性映射和生成事件，属性映射比方控件自身须要 title 属性，而配置文件中可能是叫 label 属性，这时咱们要将 label 转换成 title, 只不过转换逻辑不蕴含在渲染引擎中，只是调用内部封装好的办法；生成事件则是依据配置生成预设事件并挂载。在配置散发之前，会先将解析好的配置进行初始化父层状态并存放在父层，次要思考到 viewConfig 和 dataSource 不是同步赋值，须要期待都就绪了才进行散发。
在介绍控件的时候，提到每个控件都要提交，因为每个控件都不能成为其余控件的一个 origin。比方 Tip 组件，尽管自身可能没有交互，但可能成为别的控件的依赖项，子层可能须要获取内容，子层容器的提交会被收集在父层容器的 valueWatch 中，在子层容器提交当前，如果状态变动的话，那父层容器就会依据 functionList 去循环执行的事件；如果是展现类事件，就会更新父层的 showState 管制显示或暗藏，如果是数据类事件，则会扭转 viewConfig 和 dataSource，对指标进行一个从新赋值。总得来说渲染引擎流程就蕴含以上四个步骤：配置解析、配置散发、收集提交、发动事件。
总结
为了缩小页面开发代码量，晋升代码复用度，咱们冀望页面能进行可视化编辑；为了得出一个通过的可视化框架，咱们对页面进行了可视化建模剖析，得出简直所有的页面都能够由控件和容器组件形成，通过泛化的事件处理用户交互和组件间的级联关系；依据建模的后果建设了渲染引擎，撑持起整个流程，最终实现可视化。
本文整顿自华为云社区内容共创流动第二期之【线上直播】2.0 倍起步？高效实现前端页面。
查看流动详情：https://bbs.huaweicloud.com/forum/thread-111494-1-1.html
点击关注，第一工夫理解华为云陈腐技术~