【前端架構】元件化架構設計

一、前端的元件化架構

二、基礎：風格指南

1. 原則與模式
   1. 親密性，即将相關的項（元件）組織到一起
   2. 對齊，每一項都應當與頁面上的内容存在某種視覺聯系
   3. 重複，重複元素以展現一緻性
   4. 對比，對比産生強調，以強調産生強烈的反差
2. 色彩
   1. 主題色，又可以稱為品牌色，用于展現産品的特色和宣傳時使用
   2. 功能色，用來展示資料和狀态，以及提醒使用者
   3. 中性色，用于正常的頁面顯示和過渡，通常是淺色和深色的變種，如白色和灰色
3. 文字排印
   1. 字型大小
   2. 字型顔色
   3. 行高
   4. 字重
   5. 字型家族
4. 布局
   1. 固定布局：栅格布局
   2. Flex布局
      1. 在任何流動的方向上（上、下、左、右）都能進行良好的布局
      2. 能以逆序或者任意順序排列布局
      3. 可以線性地沿着主軸或側軸換行排列
      4. 能以彈性的方式在任意容器中伸縮大小
      5. 可以與容器對齊，或彼此對齊
      6. 可以沿主軸動态折疊或不折疊，同時保留容器的交叉大小
5. 元件
6. 文檔及其他
   1. 設計人員如何使用設計指南
   2. 開發人員如何維護設計指南
   3. 如何在項目中使用設計指南
   4. 圖檔使用規範
   5. 留白間距
   6. 統一的圓角大小
   7. 常見問題的解決方式等等
7. 維護風格指南

三、重用：模式庫

1. 元件庫
   1. 建立元件庫
      1. 建立腳手架：可以從架構自帶的工具生成，或是從其元件庫修改
      2. 第一個元件：建立一個基本的元件，引入項目上，進行腳手架測試
      3. 進行釋出測試：選擇合适的釋出政策，釋出元件庫，提供快捷的使用方式
      4. 建立元件的文檔中心：可以通過JSDoc類似的方式從代碼中生成文檔，也可以用更專業的編寫方式
      5. 提供元件示例：建立一個專門的網站，來提供元件互動通路
      6. 持續改進：添加新的元件，修複bug，并不斷優化元件庫
   2. 維護元件庫
      1. 自動化版本釋出semantic-release
      2. 自動複查代碼工具Danger
      3. 持續內建工具Travis CI
      4. 代碼品質工具Code Climate
2. 元件類型
   1. 基礎UI元件
   2. 符合元件
   3. 業務元件
3. 隔離：二次封裝

四、進階：設計系統

1. 設立原則，建立模式（以Ant Design原則為例）
   1. 親密性
   2. 對齊
   3. 對比
   4. 重複
   5. 直截了當
   6. 簡化互動
   7. 足不出戶
   8. 提供邀請
   9. 巧用過渡
   10. 即時反映
2. 原子設計
   1. 原子：網頁構成的基本要素
   2. 分子：複合元件
   3. 有機體：包含多個具有自己獨特屬性和功能的小界面，比如header元件、footer元件、清單元件等
   4. 模闆：有機體、分子、原子的結合，提供可重用的模闆
   5. 頁面：具有真實業務功能和真實資料的元件集合
3. 維護與文檔（Storybook、Vue Design System）
   1. 搭建指引
   2. 内容指南
   3. 工具指南等

五、跨架構元件化

1. 架構間互相調用：Web Components
2. 跨平台模式庫

推薦閱讀

1. 上篇：Walkthrough007