认识达内从这里开始

随着互联网的不断发展，越来越多的程序员在开发软件的时候都会考虑到不同端口平台访问的区别，而今天我们就一起来了解一下，web前端跨端开发表现层抽象概念。

一、跨端、平台、技术栈

现在，绝大部分的前端开发者是在做泛客户端开发——开发web应用、客户端应用和各类小程序。

在做web应用时需要考虑PC端和移动端是分开还是适配?技术选型是用React、Vue?还是用WebComponents?或是用其他的?做客户端应用、各类小程序时这些也会面临技术选型的问题。

如果公司某个业务的功能覆盖了上述所有场景，该如何去支撑?与跨浏览器不同的是，不同端、平台、技术栈的源码语法不一样，要满足业务需求就得各开发一遍。然而，这显然成本过高，并且风险也有些大。

那么，要怎么解决这个问题呢?从源头出发。根本的源头是业务场景，然后是产品设计，但这些都不是开发人员可掌控的，几乎无法改变。能够完全被开发人员所左右的基本只有开发阶段的事情，那就从这个阶段的源头入手——源码编写。

若是与业务相关的代码只需编写一次就能运行在不同的端、平台、技术栈上，那真是太棒了!这将会大大地降低成本并减少风险!

二、表现层的抽象

为了达到跨端、平台、技术栈的目的，需要将表现层再划分为抽象层、运行层和适配层。其中，抽象层是为了统一源码的编写方式，可以是DSL、配置等，它是一种协议或约定;运行层就是需要被「跨」的端、平台、技术栈;适配层则是将抽象层的产物转换为运行层正常运行所需要的形式。

表现层中可以被抽象的大概有视图结构、组件外观、组件行为等。

1、视图结构

在web前端开发中，HTML就是一种视图结构的抽象，描述了界面中都有什么，以及它们之间的层级关系。终的显示需要浏览器解析HTML后调用操作系统的GUI工具库。

对于业务支撑来说，无论是HTML还是其他什么拼凑界面的方式，相对来说比较低级(是「lowlevel」而不是「low」)，视图单元的划分粒度比较细，在开发界面时就会花费更多的时间。

我们需要一种能够屏蔽一些不必关注的细节的视图结构抽象，在这个抽象中，每个视图单元都有着其在业务上的意义，而不是有没有都可以的角色。

2、组件外观

大部分已存在的组件的视觉呈现是固定的，即某个组件的尺寸、形状、颜色、字体等无法被定制。如果同样的交互只是因为视觉上有所差异就要重新写组件，或者在组件外部重新写份样式进行覆盖，那未免也太痛苦了……

我们可以将那些希望能够被定制的视觉呈现抽象成「主题」的一部分，这部分可以被叫做「皮肤」。在进行定制时，分为线下和线上两种方式。

「线下」是指在应用部署前的开发阶段进行处理。在前端构建工具丰富的现在，写页面样式时已经不会去直接写CSS，而是像Sass这种可编程式的预处理器。这样就可以抽取出一些控制视觉呈现的Sass变量，需要定制时通过在外部对变量赋值进行覆盖，而不需要费劲重写组件或样式。

「线上」则是部署后根据运行时数据动态改变。在皮肤定制即时预览和低代码平台等场景，是基本没机会去修改Sass变量并走一遍构建流程的，即使技术上能够办到。借助CSS自定义属性(CSS变量)的力量可以较为方便地做到视觉呈现的运行时变更。

3、组件行为

组件除了外观，其行为也应当是可以定制的。看到「行为」这个词，一反应就是跟用户操作相关的事情，然而这里还包括与组件内部结构相关的。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请在707945861群中学习了解。