本文是一個文章系列的第一篇，主要説明幾個基本概念以及所要探討的目標主體，目的是統一認知上的「上下文」以儘量避免因信息不對稱而造成理解障礙。

這一系列文章是關於前端 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 組件相關的一些事情。

為什麼會有這個文章系列？一方面是因為當下前端工程相關的方法論和抽象還不夠，並且沒有很成體系；另一方面是國內前端的環境和氛圍太浮躁，懂的自然懂。

本文其他閲讀地址：個人網站｜微信公眾號