Web 标准和最佳实践的重要性：为什么在 JavaScript 中重新发明轮子通常会导致更糟糕的解决方案

风明姑娘_6971

发布时间：2024-08-19 08:11:17

622人浏览过

来源于dev.to

转载

web 标准和最佳实践的重要性：为什么在 javascript 中重新发明轮子通常会导致更糟糕的解决方案

介绍

在不断发展的 Web 开发世界中，很容易被最新的框架、库和工具所吸引。开发人员经常发现自己很想创建自定义解决方案，相信他们独特的方法可能会提供更好或更创新的东西。然而，这种方法可能是一把双刃剑。忽略既定的 Web 标准和最佳实践可能会导致可访问性、性能和可维护性方面的问题。

本文探讨了为什么无论使用何种框架或技术，遵守 Web 标准和遵循最佳实践都是至关重要的。我们还将讨论在 JavaScript 中重新发明轮子的风险以及为什么它经常会导致次优的解决方案。为了说明这些观点，我们将参考 WAI-ARIA 创作实践指南 (APG) 以及可访问的标准化模式的重要性。

Web 标准的作用

网络标准是互联网的支柱。它们确保 Web 内容在不同浏览器、设备和平台上可访问、有效且一致。万维网联盟 (W3C) 等组织开发了这些标准，其中包括 HTML、CSS、JavaScript 等的指南。遵守这些标准对于创建用户友好、可访问且面向未来的网站至关重要。

网络标准的一个关键领域是可访问性，它确保所有用户（包括残疾人）都可以导航网络内容并与之交互。 WAI-ARIA（Web 可访问性倡议 - 可访问的富互联网应用程序）指南是其中的重要组成部分。它们提供了一组属性，使残疾人士（尤其是那些依赖屏幕阅读器等辅助技术的人）更容易访问 Web 内容和应用程序。

立即学习“Java免费学习笔记（深入）”；

最佳实践：成功的基础

Web 开发的最佳实践是一组已被广泛接受的指南和技术，因为它们可以带来更高效、可维护和可扩展的代码。这些实践不依赖于任何特定的框架或技术；它们普遍适用，无论您使用的是 React、Angular、Vue.js 还是任何其他工具。

一些核心最佳实践包括：

语义 HTML：将正确的 HTML 元素用于其预期目的，从而提高可访问性和搜索引擎优化 (SEO)。
辅助功能：确保 Web 应用程序可供各种残障人士使用，其中包括遵循 ARIA 模式和其他辅助功能指南。
性能优化：编写高效的代码，优化图像，减少加载时间，以确保流畅的用户体验。
代码可维护性：编写易于理解、测试和更新的干净、模块化的代码。

这些最佳实践不仅可以提高代码质量，还有助于改善用户体验。它们确保您的应用程序可供所有用户访问，在各种条件下表现良好，并且可以随着项目的增长轻松维护和扩展。

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

重新发明轮子的危险

在 JavaScript 世界中，开发人员经常陷入为标准化模式和库已经解决的问题创建自定义解决方案的陷阱。虽然这看起来像是一种创造性和创新性的方法，但它可能会导致重大问题。

例如，考虑创建自定义表单控件。虽然构建自定义下拉列表或复选框似乎很简单，但如果不遵循既定模式，可能会导致可访问性问题。依赖键盘导航或屏幕阅读器的用户可能会发现这些自定义控件很难或无法使用。此外，自定义解决方案通常缺乏已建立的模式所带来的跨浏览器兼容性和性能优化。

另一个常见的陷阱是创建自定义导航系统。虽然设计独特的菜单或路由系统似乎是个好主意，但如果不遵循最佳实践，可能会导致令人困惑和不一致的用户体验。标准化的导航模式经过充分测试、易于使用且为用户所熟悉，使其成为更安全、更可靠的选择。

ARIA 模式：案例研究

WAI-ARIA 创作实践指南 (APG) 对于希望构建可访问的 Web 组件的开发人员来说是一个极好的资源。它为常见用户界面组件（例如按钮、对话框和导航菜单）提供了一组标准化模式。这些模式旨在供所有用户（包括残障人士）使用，并且基于完善的 Web 标准构建。

例如，模式对话框的 ARIA 模式提供了使屏幕阅读器和键盘用户可以访问对话框的指南。它确保辅助技术正确地宣布对话框，在对话框打开时将焦点限制在对话框内，并且用户可以使用按钮和 Escape 键关闭对话框。通过遵循这种模式，开发人员可以创建一个可访问且用户友好的模式对话框，而无需重新发明轮子。

结论

Web 标准和最佳实践对于创建可访问、可维护和高质量的 Web 应用程序至关重要。虽然创建自定义解决方案可能很诱人，但如果不遵循既定模式，可能会导致重大问题，特别是在可访问性和性能等领域。通过遵守 WAI-ARIA 指南等 Web 标准并遵循最佳实践，开发人员可以确保他们的应用程序可供所有用户访问、性能良好并且易于维护和扩展。

号召性用语

为了进一步了解 Web 标准和最佳实践，请考虑探索 WAI-ARIA 创作实践指南和 W3C 关于可访问性和网页设计的指南等资源。花时间回顾您当前的项目，并确定您可能需要通过自定义解决方案重新发明轮子的领域。通过优先考虑标准化模式和最佳实践，您可以为每个人创建更好、更易于访问的 Web 应用程序。

资源

ARIA 创作实践指南 (APG)
A11Y 项目

如何修复多行丝带横幅中文字左右不对齐与内边距不一致的问题

如何在CSS中避免浮动清除clear引发的盒模型边距塌陷？

如何使用CSS media query检测用户系统减少动画偏好？

移动端CSS中怎样消除点击高亮与自适应滚动条？

怎样在CSS中实现Sticky头部滚动到特定位置变色

相关专题

js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。

4616

2023.06.20

js获取当前时间

JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

1395

2023.07.28

js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

1818

2023.08.03

js是什么意思

JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。

10163

2023.08.17

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

1000

2023.09.01

js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。

2884

2023.09.04

Js中concat和push的区别

Js中concat和push的区别：1、concat用于将两个或多个数组合并成一个新数组，并返回这个新数组，而push用于向数组的末尾添加一个或多个元素，并返回修改后的数组的新长度；2、concat不会修改原始数组，是创建新的数组，而push会修改原数组，将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容，供大家免费下载体验。

1609

2023.09.14