Hacktoberfest Week에서 코드 기여에 대해 자세히 알아보기-JS 튜토리얼-php.cn

Hacktoberfest Week에서 코드 기여에 대해 자세히 알아보기

Patricia Arquette

풀어 주다： 2024-10-12 08:38:01

원래의

705명이 탐색했습니다.

Hacktoberfest Week Diving Deeper into Code Contributions

大家好！今年的 Hacktoberfest 怎么样？就我个人而言，到目前为止我真的很享受。我们现在已经进入 10 月的第二周，这意味着是时候提出完成挑战所需的四个拉取请求 (PR) 了。本周，我决定进一步推动自己，为项目的代码库做出贡献，而不是像第一周那样只关注文档。

第一周回顾

在 Hacktoberfest 的第一个 PR 中，我致力于改进项目文档。作为一个初学者，我想通过较小的、可管理的任务来轻松进入这个过程。然而，在第二周，我决定承担一些更具技术性的事情：为 GitExplorer 项目做出贡献。

项目概述：GitExplorer

GitExplorer 是一个 Web 应用程序，可简化顶级 GitHub 存储库的发现和探索。它允许用户根据编程语言、主题和其他排序标准来过滤存储库。虽然 UI 仍在开发中，但该项目为贡献者（尤其是初学者）提供了宝贵的学习机会。存储库中的许多问题都被标记为“好第一个问题”，使其成为一个很好的起点。

为了做出贡献，我选择实现一个导航功能，以增强浏览存储库时的用户体验。

确定问题

该项目最初有一个用于导航到存储库下一页的按钮，但它缺乏完整的分页系统。用户无法轻松地在页面之间来回导航或跳转到特定页面，这带来了可用性问题。我注意到了这个限制，并要求项目维护人员将问题分配给我。

在我从事该项目期间，一个突出的方面（但不是很好）是代码库的结构方式。该项目将所有逻辑写入单个 script.js 文件中，随着项目的增长，该文件可能会变得难以维护。虽然我不想在此 PR 中进行重大更改（因为它仅关注分页按钮），但我计划建议在未来的问题中重构代码结构。

其实，之前还有一个开发者创建了一个导航到下一页的按钮，但是当用户想要来回导航以及特定页面时，这对用户体验不好。由于这个原因，我评论要求维护者为我分配这个问题。
当我从事这个项目时，有一点我不喜欢它。这是维护者构建代码库的方式，因为他将每个逻辑仅写入 1 个 script.js 文件。但是，我不想对此问题进行太多修复，因为它只要求分页按钮。我将创建一个新问题，要求稍后重新构建代码库。

新功能：增强分页

现有功能只有一个按钮可以在页面之间导航，每页显示 10 个存储库。我的目标是实现一个更加用户友好的分页系统，其中包含“上一页”、“下一页”和编号页面按钮。这将允许用户直接跳转到他们感兴趣的页面，使导航体验更加流畅。

执行

GitHub API 约束:

在实现分页时，我遇到了 GitHub API 的限制，它将结果限制为 1,000 个项目。如果搜索生成超过 1,000 个存储库，则尝试超出此限制会导致错误，并返回未定义的数据。鉴于设计每页显示 10 个存储库，我将页面数限制为 100 以避免遇到此问题。

代码更改：

我引入了一个新的

; script.js 中用于分页的部分。这使我能够添加一些 CSS 样式来改善按钮美观和用户体验。
分页的核心逻辑被封装在两个新函数中：
- createButton()
- renderPagination() 这些函数根据可用页面动态生成分页按钮并应用样式来禁用当前页面按钮，防止用户意外地重新单击它。我还为按钮添加了悬停效果，以获得更精美的外观。

CSS 改进：

对于分页设计，我确保当前页面按钮被禁用，并以不同的样式来指示其状态。其他页面按钮获得悬停效果，以增强交互性并改善用户体验。