前端知识-用户界面

用户界面

User Interface, 人与计算机设备交互的必要窗口

根据呈现方式, 承载功能来划分:图形用户界面GUI, 命令行界面CLI, 语言用户界面LUI,自然用户界面NUI

现代前端开发的用户界面包括: 网页, 跨平台桌面应用, 智能手机中的H5, 小程序和Native App

• CSS框架: 一种对原生CSS的封装和抽象

  比如Bootstrap内置了一组风格统一的class样式表, 开发者只需要在必要位置填入class名即可.

  现代CSS框架还提出了布局, 主题, 可访问性, 工具函数, 响应式设计等概念, 使得编写CSS这件事更加系统化和便利.

  以Tailwind CSS为代表的工具化CSS框架, 开发者组合使用其原子化工具类即可实现任何UI设计, 这是一种更简单和灵活的CSS开发范式.

• UI框架: React, Vue, Svelte等

  包含虚拟DOM, 数据驱动, 组件化, 代码编译和工具链配套这几个要素, 构建出高可复用的用户界面

• 组件库:

  通常依赖于某个特定的UI框架, 比如AntD(React), Element(Vue), 也有不依赖UI框架的Headless UI和Radix UI等

  组件库的层次划分:

  • 基础组件: Button, Input 等
  • 模板组件: 基于基础组件再组合封装一层功能更复杂的组件
  • 业务组件: 基于模板组件往上添加数据接口和业务处理逻辑