关于前端工程:聊聊前端-UI-组件核心概念

本文首发于欧雷流。因为我会时不时对文章进行补充、修改和润色，为了保障所看到的是最新版本，请浏览原文。

本文是一个文章系列的第一篇，次要阐明几个基本概念以及所要探讨的指标主体，目标是对立认知上的「上下文」以尽量避免因信息不对称而造成了解阻碍。

这一系列文章是对于前端 UI 组件的，我想通过这个系列静下心来好好聊聊与之相干的内容。

每个名词都是概念，就像一个「数据包」，依据其被「压缩」的信息量，要真正地了解一个词语可能须要大量的常识储备。

基本概念

咱们要聊的是「前端 UI 组件」，这个词能够进一步拆分成「前端」、「UI」和「组件」这三个词。所以，要想弄明确「前端 UI 组件」是什么，得先把组成它的三个词搞懂。

UI？GUI？

平时在议论一个软件的视觉方面的问题时，总会用到「UI」这个英文缩写，有时也会说「GUI」。尽管它们是不同的含意，但在大多数状况下，咱们是将这两个词划等号了。在这里，我试图帮大家将这两个词辨别开，就算用法仍然不变，至多可能意识到它们的区别。

人与机器间，更确切地说是与人造零碎间，是如何进行互动的以及如何更好地交互，是人们始终在摸索的——也就是「人机交互」这个词所代表的。「人造零碎」能够是各种各样的物理机器，也能够是计算机系统和软件。

「交互」的实质就是人 / 物体间的信息替换，即信息从一个人 / 物体输入，输出到另一个人 / 物体中。因而，两个人 / 物体、输入形式、输出形式是交互的几个基本要素。

在人机交互的场景中，进行互动的对象是人和人造零碎。人通过敲击、触摸、谈话等形式输入信息，通过视觉、听觉、触觉等形式输出信息；人造零碎则通过文本、图形、声音等形式输入信息，通过将人以各种形式产生的信息转化为电流的形式输出信息。

在人机交互中起到信息替换作用的那块空间，叫做「人机交互界面」，也叫「用户界面」。「UI」就是「用户界面」所对应的英文单词「User Interface」的缩写。

不同的交互方式和档次产生了不同的「用户界面」，如：基于文本的「命令行界面（Command-line Interface）」、基于图形的「图形用户界面（Graphical User Interface）」、基于语音的「自然语言用户界面（Natural-language User Interface）」等等。

其中，「图形用户界面」是目前比拟宽泛应用的，它的英文缩写就是「GUI」。

前端开发

所谓的「前端开发」就是利用 web 前端技术进行 GUI 相干的开发工作，专门从事这类工作的人被称为「前端开发者」。

在以前，「前端开发者」是指「页面重构工程师」和「前端开发工程师」；随着业务和技术的倒退，「页面重构工程师」慢慢退出历史舞台，「前端开发者」根本与「前端开发工程师」划等号，并且称说变得更精简——「前端工程师」。

在职业产生扭转的同时，作为一个「前端开发者」，作为一名「前端工程师」，企业和业界的冀望变高了，所承当的职责变重了——这是一次职业降级，也是一次行业荡涤——适应的人变更强了，不适的人被淘汰了。

时至今日，「前端开发」的含意也不是当初单纯地写写页面做做网站，还涵盖了前端工程相干的 CLI 工具、挪动端和桌面端的客户端利用、服务端中比拟凑近前端的局部等等等等——这俨然是一个「客户端工程师」所做的工作——没错！「前端开发」实质上就是「客户端开发」的一个分支，只不过这点越来越被强化了，并且「客户端开发」越来越趋势对立，能够称之为「泛客户端开发」。

无论工作内容和职业职责怎么变，只有是做这行，所要解决的外围问题是不变的——人与人造零碎之间如何更好地进行互动。

组件？控件？

在软件工程中，「组件（component）」个别是指软件的可复用块，好比制造业所应用的「构件」。这是一个比拟宽泛的概念，它能够是软件包，能够是 web 服务，也能够是模块等。

但在前端眼里，「组件」通常是指页面上的视图单元，即「UI 组件」。能够说，「UI 组件」是「组件」的子集。你可能还总会听到「控件（control）」这个词。放轻松，别抓头，它只是「UI 组件」的一个别名而已。

一般的组件通用性很差，也就是说，它根本只能用于某个特定的零碎且不能被替换。有一种组件，它是基于标准化的接口标准开发进去的，能用在任何对接了该接口的零碎，也能被任何合乎该接口标准的组件替换——它就是「可替换组件」，就像制造业所应用的「标准件」。

可替换的 UI 组件是前端 GUI 开发从手工作坊到主动拆卸的关键所在。

相干概念

下面通过三个比拟根本的概念论述了「前端 UI 组件」是什么，上面再来说说会对其产生重大影响的几个概念——

设计体系

所谓的「设计体系」，即「Design System」，是与 UI 组件非亲非故的一个概念。能够认为，设计体系是 UI 组件的外观及交互的理论依据，而 UI 组件是设计体系的具体实现。

设计体系的存在是为了辅助像网站、利用等数字产品的设计与开发，它作为惟一的参考而让不同团队的人（如产品经理、设计师和开发人员等）能够一起参加到数字产品的建设当中。

基于设计体系设计并开发进去的产品无论是在观感上还是体验上都可能放弃肯定的一致性，建立产品形象并流传品牌价值。

设计体系所涵盖的内容，包含但不限于设计语言、格调指南、模式库、UI 组件、品牌语言及与之相干的应用阐明文档——设计体系自身不是一个交付物，但它是由一些交付物组成的，并会随着产品、工具和技术等的更新而一直进化。

从下面所列出的设计体系的涵盖内容中能够看出，形成它的元素有无形的，像模式、UI 组件、指南及给设计师和开发人员所应用的工具等；还有一些是有形的，像品牌价值观、合作形式、思维形式和独特信念等。

格调指南和模式库是比拟重要的两个交付物：格调指南着眼于一些图形款式及其用法，如色彩、字体、图片等；模式库则集成了具备性能的 UI 组件及其用法。

数据及其状态

人机交互中所替换的信息，就是「数据」，它是信息的载体，是人机交互的外围。在这里，「数据」这个词的含意更偏向于指代对人类敌对的编程语言所提供的根本数据类型以及基于它们结构的数据结构，而非对机器敌对的二进制编码等。

「数据」是对事实世界客观事物的形容，计算机程序里每种类型的数据都应有其正确的语义，如：「是」与「否」这种二元逻辑的用布尔型；计数时用数值型；阐明时用字符串型；实体用对象型；实体汇合用列表型。

下面提到了「实体」——可能互相区别且独立存在的事物。它的概念比拟宽泛，其代表的能够是具体的，也能够是形象的；能够是天然的，也能够是人工的；能够是理论存在的，也能够是虚构进去的……「人」是实体，「狗」是实体，「风」是实体，「语言」是实体，「物质」是实体，「精力」也是实体。即便如此，咱们在说「实体」时，大多是指那些看得见摸得着的。另外，「实体」是一系列可能形容其个性的属性的汇合。

在一个利用中，用户操作所波及到的数据类型大略有：布尔、整数、浮点数、日期、金额、字符串、长文本、枚举、对象、列表等等。除了对象和列表算作简单数据类型，其余的都是简略数据类型。在由计算机程序所构筑的数字世界里，每个实体用一个对象来示意，列表为实体汇合，实体的属性则简略数据类型和简单数据类型皆可——实体及实体汇合统称为「视图」，实体的属性称为「字段」。

当字段的值为简略数据类型时是「一般字段」，也可叫作「简略字段」；值为简单数据类型时则是「关联关系字段」，简称为「关系字段」，也可叫作「简单字段」。依据与所关联的实体之间的关系，关系字段又可被细分为「一对一」、「一对多」、「多对一」和「多对多」这几种。其中，「一对多」和「多对一」是镜像关系。

将「实体」依据特色进一步泛化，即可形象为「模型」，也就是说，一个「模型」是一类「实体」。在探讨交换时，「实体」和「模型」这两个词肯定水平上能够相互替换，但要留神它们在语义上的差异。若将模型映射为数据库表，表中的每条记录即为实体。

拿「人」这个模型来举例：

如上所述，一个利用中的数据状态是从列表型数据到简略类型数据的递归。如果一个字段是关系字段，那么它就是嵌入了一个视图：

尽管有些 UI 组件是与数据无关的，但还有很多是与数据关系密切的，如：列表、表格、表单、输入框等等。

总结

本文以解释从「前端 UI 组件」所拆分出的「前端」、「UI」和「组件」这三个词所蕴含的概念来遍及一些常识，试图说分明「前端 UI 组件」到底是什么，并借此机会为本系列后续的文章圈定范畴——聊聊与基于 web 前端技术所开发的 UI 组件相干的一些事件。

为什么会有这个文章系列？一方面是因为当下前端工程相干的方法论和形象还不够，并且没有很成体系；另一方面是国内前端的环境和气氛太塌实，懂的天然懂。

欢送关注微信公众号以及时浏览最新的技术文章：