【青训营】前端组件体系

233 阅读2分钟

1. 前言

  • 本文将先从ARIA规范开始,描述一下在前端体系内大致需要哪些组件内容。然后第二节将描述一下我自己设计组件体系。本文为字节青训营作业,如有不足之处欢迎交流。

2. ARIA 体系

2.1 ARIA 介绍

WAI-ARIA是一种技术规范,它提供了一个框架来提高 Web 内容和应用程序的可访问性和互操作性。本文档主要面向创建自定义小部件和其他 Web 应用程序组件的开发人员。请参阅WAI-ARIA概述以获取指向其他受众的相关文档的链接,例如WAI-ARIA创作实践wai-aria-practices-1.1 ] 向开发人员介绍了WAI-ARIA旨在解决的可访问性问题,这是最基本的WAI-ARIA 的概念和技术方法。

2.2 ARIA组件继承关系

image.png 我们可以看到ARIA将页面内容分为三大块:结构、部件、窗口

2.2.1 结构

structure部件和名字一样,主要是一些构成页面内容基本的元素,在section中包含许多小的结构元素,用于创建小部件角色或帮助辅助技术进行内容适配,比如img、list、table等。

2.2.2 部件

widget部件是指用户可以与之交互的组件。小部件角色映射到可访问性api中的标准特性。大部分用户与web应用的交互都放在这一块。所以是处理可访问的大头,也同样是组件库的大头,毕竟web应用主要还是面向用户的。比如input中checkbox、combobox、option、radio、slider、spinbutton、textbox等组件,都是需要用户进行信息输入的。

2.2.3 窗口

window元素是指在图形用户界面(GUI)上下文中具有类似窗口的行为(比如直接通过操作系统的窗口实现的或者仅仅作为样式为窗口的文档的一部分实现)的元素。

3. 设计一个简单的组件体系

image.png 以上是我设计的组件体系的图,整体按照ARIA体系设计,然后添加了高级功能增强组件和业务复用组件。从小到大的顺序是基础组件->小功能组件|窗口组件->高级功能增强组件->业务复用组件。