Mahiru's Humble Abode       博  客   时 间 线   归  档   关 于 与 友 链



记一次前端项目的踩坑与开发经验
Published on Sun Oct 24 2021 12:00:01 GMT+0000

最近的一个月左右,我开始尝试做我的第一个真正具有实用价值的前端项目—— WebGAL 。在这个项目中,我使用了 React 作为我的前端框架。但是项目初期,我却没有使用 create-react-app 生成一个 React 项目,而是选择了静态引入 React 和 ReactDOM 作为一个静态网页的代码,然后再在一个单文件里写主要的业务代码,所有的存储管理、渲染、交互处理都在一个文件里进行。后来,随着开发的进度,我的文件已经达到了1000多行,并且有朝着2000行奔去的架势。所以,将模块拆分、重构,几乎是必然的了。

在一开始的重构中,我只是粗暴地将业务代码按函数的功能分开了,但是却仍然用静态引入的方式在HTML中按照顺序分别引入了。这很显然是不合理的,因为这四舍五入等于没重构,顶多算是拆了下文件。后来当我试图如法炮制,创建了一个 React 项目并将其放入后,却出现了浩如烟海的 bug 。很显然,之前我飞全局变量的那一套不管用了。

为了能够让各个模块都能良好地访问页面中的全局变量,我重新分出了一个类,用来管理存储与全局变量。这样一来,其他的模块只需要访问这个类的函数,就可以得到它们所需要的全局变量。然后,这个类再将其与 LocalStorage 同步。

然后就是关于渲染的统一控制。在重构后的版本中,所有的渲染都通过一个专门用来控制渲染的类 ViewControl 来实现。这样一来,就可以降低业务代码与渲染视图之间的耦合度,让各个模块各司其职,同时也保证了代码的简洁。

重构这个项目是一个漫长且痛苦的过程,因为我先前写的架构实在是过于混乱不堪了。不同模块之间、不同函数之间,充斥着随便的全局变量读写与杂乱无章的相互调用。实际上,在现在的版本中,许多问题并没有得到完全改善,所以在接下来的工作中,还需要继续优化以改善现有项目的结构状况。