概述
JIRA 是一个庞大的项目管理系统，其中 UI 组件数量也极其庞大。可重用的 UI 组件是开发人员职业生涯中必不可少的一部分。如何高效实现无障碍及可重用 JIRA UI 组件是本文的重点。
什么是无障碍？
“无障碍”是指通过使用无障碍技术，使得所有人都能够使用并获取互联网站点、应用程序等内容，包括有视觉、听力、语言、知觉、身体和认知障碍的人群。
JIRA UI 组件需求
JIRA UI 组件必须满足以下要求：
可重用性：JIRA 的 UI 组件需要能够多次使用，以减少代码冗余并提高代码的可维护性。
可定制化：每个项目都有其独特的需求和样式，JIRA UI 组件需要能够根据项目的需求进行定制化。
无障碍：JIRA UI 组件需要满足无障碍要求，确保每个人都能够使用。
1. 实现无障碍
实现无障碍的方式有很多种。以下是几个值得一提的技术：
1.1. 使用语义 HTML
使用语义 HTML 可以使得页面元素的结构更加明确，帮助屏幕阅读器更好地组织页面内容。
<!-- BAD semantic HTML --> <div class="btn">Click me!</div> <!-- GOOD semantic HTML --> <button>Click me!</button>
这两个示例的功能是一样的，但是第二个示例使用了更具语义的 HTML，帮助阅读器更好地组织页面内容。
1.2. 使用 ARIA
ARIA 是“可访问性 Rich Internet 应用程序”的缩写。它是一套技术，用来帮助开发者为屏幕阅读器提供更多的信息。
<!-- BAD button with no ARIA attributes --> <button>Save</button> <!-- GOOD button with ARIA attributes --> <button aria-label="Save">Save</button>
这两个示例中，第二个示例使用了 ARIA 属性，提供了“Save”的文本描述，帮助屏幕阅读器更好地组织页面内容。
1.3. 色盲友好
很多人可能不知道，色盲是一个十分普遍的障碍。为了使得您的应用程序对所有人都友好，您应该遵循最佳实践，如避免使用红色和绿色的组合，以及使用有足够对比度的颜色。
-- -------------------- ---- -------
-- --- ----- ----------- --
------ -
----------------- ----
------ ------
-
-- ---- ----- ----------- --
------ -
----------------- --------
------ -----
-这两个示例中，第二个示例采用了更为良好的颜色组合，使得颜色困难的人也能够更好地使用按钮。
2. 实现可重用
实现可重用的方式有很多种。以下是几个值得一提的技术：
2.1. 使用 Sass
在 JIRA 中，经常需要使用大量的 CSS 样式。使用 Sass 可以帮助您更好地组织样式，并使其更可重用。
-- -------------------- ---- -------
-- --- --- --
----- -
----------------- -----
------- --- ----- -----
-------- -----
-
----------- -
------------ -----
-------------- ----
-
---------- -
---------- -----
-
-- ---- ---- --
----------------------- -----
------------------- -----
-------------- -----
------ ------ -
----------------- -----------------------
------- --- ----- -------------------
-------- --------------
-
------ ------------ -
------------ -----
-------------- ----
-
------ ----------- -
---------- -----
-
----- -
-------- -----
-
----------- -
-------- -----------
-
---------- -
-------- ----------
-这两个示例功能是一样的。但是第二个示例使用了 Sass，在定义了“card”提供了一个包含所有样式的 mixin 后，可以轻松地在其他组件中使用。
2.2. 使用组件
在 JIRA 中使用组件可以帮助您更好地组织代码，并使其更可重用。
-- -------------------- ---- -------
------ ----- ---- --------
----- ------ - -- --------- -------- -- -- -
------ -
------- ------------------------------
--
--
------ ------- -------在上面的示例中，创建一个 Button 组件。使用组件可以帮助您重用代码，使其更加模块化。
3. 实现可定制化
实现可定制化的方式有很多种。以下是几个值得一提的技术：
3.1. 使用 Props
使用 Props 可以帮助您更好地控制组件的页面表现。在 JIRA 中，可以根据项目的需求为组件传递 Props。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -----------------------
----- ------ - -- --------- -------- -------- -- -- -
----- --------- - ------- --- --------- - -------------- - -----------------
------ -
------- --------------------- ------------------------------
--
--
------ ------- -------在上面的示例中，创建了一个可定制化的 Button 组件。根据“variant”Props，可以传递“primary”或“secondary”，组件的样式相应地发生变化。
结论
在 JIRA 中，实现无障碍、可重用和可定制化的 UI 组件十分重要。使用语义 HTML、ARIA、Sass、组件和 Props 等技术可以帮助您实现这一目标。通过合理的组织代码，可以提高代码的可维护性，便于团队协作，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671c89319babaf620fb13625