聊聊前端 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 組件相關的一些事情。

爲何會有這個文章系列？一方面是由於當下前端工程相關的方法論和抽象還不夠，而且沒有很成體系；另外一方面是國內前端的環境和氛圍太浮躁，懂的天然懂。

---

歡迎關注微信公衆號以及時閱讀最新的技術文章：