敢不敢上台独舞—自重构开源项目BetterScroll的灵感与收获

2023-09-18 01:42:26

从无到有的项目建设固然艰辛，需要一点点积累，但重构一个十万星开源项目却更具挑战性。

距离 BetterScroll v1 版本发布，至今已经 3 年多，由于它在移动端良好的滚动体验与性能以及多种滚动场景的支持，深受社区的青睐。用户也可以基于 BetterScroll 抽象出各种复杂的业务滚动组件，期间依托于 BetterScroll，我们还开源了基于 Vue2\Vue3\React 的滚动组件库，帮助我们的用户快速构建各种各样的滚动效果。

这是一个非常令人兴奋的开源项目，但随着用户和使用场景的增加， BetterScroll 也暴露了一些问题，如：

性能问题 ：随着用户使用场景的增加，BetterScroll 的性能开始出现问题，尤其是在一些复杂场景下，比如嵌套滚动，会出现卡顿、掉帧等现象。
代码维护性差 ：BetterScroll 的代码是逐渐演进而来的，缺乏统一的设计和规划，这使得代码的可读性和可维护性变差。
缺少文档和示例 ：BetterScroll 的文档和示例不够齐全，这使得用户在使用时遇到问题时很难找到解决方案。

为了解决这些问题，我们决定对 BetterScroll 进行重构。

重构是一个非常复杂和具有挑战性的过程，需要对 BetterScroll 的代码和设计非常熟悉，还需要有丰富的重构经验。我们花了近一年的时间，才完成了 BetterScroll 的重构工作。

在重构过程中，我们遇到了很多困难，也学到了很多东西。下面，我将分享一下重构 BetterScroll 的一些经验和心得。

重构步骤

我们把重构 BetterScroll 的工作分成了三个步骤：

重构核心代码 ：首先，我们对 BetterScroll 的核心代码进行了重构，包括滚动事件的处理、滚动动画的实现以及滚动位置的管理。我们对这些核心代码进行了重新设计和实现，使它们更加高效、健壮和易于维护。
重构滚动核心逻辑 ：接下来，我们对 BetterScroll 的滚动核心逻辑进行了重构，包括惯性滚动的实现、回弹滚动的实现以及滚动阻尼的实现。我们对这些核心逻辑进行了重新设计和实现，使它们更加准确、流畅和稳定。
重构滚动事件 ：最后，我们对 BetterScroll 的滚动事件进行了重构，包括滚动开始事件、滚动结束事件以及滚动过程中的事件。我们对这些滚动事件进行了重新设计和实现，使它们更加灵活、易用和可靠。

重构心得

在重构 BetterScroll 的过程中，我们学到了很多东西。下面，我将分享一下重构 BetterScroll 的一些心得：

重构需要有明确的目标 ：在开始重构之前，需要明确重构的目标是什么，比如要提高性能、提高可读性、提高可维护性等。有了明确的目标，才能有针对性地进行重构。
重构需要循序渐进 ：重构是一个复杂的过程，不可能一步到位。需要循序渐进地进行重构，先重构核心代码，然后再重构其他部分。这样可以降低重构的风险，也更容易控制重构的进度。
重构需要大量的测试 ：在重构过程中，需要进行大量的测试，以确保重构后的代码是正确的和稳定的。测试可以帮助我们发现重构过程中引入的错误，并及时修复这些错误。
重构需要团队合作 ：重构是一个团队合作的过程，需要团队成员之间的密切配合。团队成员需要相互沟通、相互学习、相互帮助，才能顺利完成重构工作。