快速的看懂老项目代码

快速的看懂老项目代码

如果拿到一个老项目进行新功能改造,首先看懂老项目很重要,而有些老项目由于各种原因没有明确的注释,甚至经多人开发后注释和弃用代码混为一体,惨不忍睹。关于如何看项目代码我有下面一点心得:

  1. 熟悉项目流程
    • 先把程序的功能搞清楚,根据功能画出程序的流程图,弄清楚主流程和自己要看的分流程之间的关系。这里可以先自己思考一下,如果自己设计这个项目会怎么去处理这些需求,可以有一个大概的推演。
    • 然后找之前的设计文档,看一下系统的设计思路,对比一下自己的想法和他们的设计有哪些不同,分析一下优劣。这里一定要揣摩设计者当初的想法和思路,最好是对照目前系统的功能综合理解一下。
    • 这里有更惨的就是找不到当初的设计文档,那也没办法啊,只能自己想办法了,这里我的做法是先去看看项目中的包结构、类和接口的命名、系统的层次关系、数据封装的特点,总会是有规律的。如果发现了某些规律就及时记录下来
  2. 找到逻辑主线
    接下来就是正式看代码了,这里相信很多人都有一个功能找不到入口抓狂的感觉,反正我是有过。
    • 这个先不要急,借助于浏览器的开发者工具快速的找到页面文件,在文件中找到表单提交的路径和页面上最重要的那个功能对应对应的处理方法,看看它们对于数据的封装是怎么处理的。
    • 沿着这个入口找下去,当找到后台代码时一定要在入口出打上 Debug 断点。然后根据自己一开始总结的项目设计的分层风格,快速的找到下一层处理的类和它的主处理方法,一直到与数据库交互的持久层的接口。
      这里先不要纠结代码的实现细节,以找到逻辑主线为目的。
  3. 分清主次关系
    • 看代码一定要找到核心代码,对于一些参数校验、异常处理等等不要太纠结,看清楚他们的条件就行了。
    • 对于有分支判断的地方要注意研究它的判断条件,一般判断条件都是根据前面所封装的数据得出的,这里一定要清楚每个分支所代表的意义,也有主次之分或者说每个并列分支的重要性,然后再去看里面的逻辑,总之时刻联系功能的流程进行对比。
  4. 关注数据传递
    一定要关注数据的传递过程,就是从前端一直到数据库这个过程中对数据的数次封装和使用
    • 先看通过什么类型封装的,是通过容器还是通过直接的一个类对象进行封装,封装成了哪个变量
    • 要注意变量的作用域,是全局的还是方法中的局部变量或者一个判断、循环的,数据也要分清主次
    • 再看看什么地方用了、值改变了没有、如何变的
    • 要特别关注方法的参数和返回值,搞清楚调用时参数的来源,调用了这个方法后达数据做了哪些变化
  5. 勤做总结笔记
    • 对于每看一个小的功能流程都做一下详细记录,包括画调用过程图、记录所操作的数据表、写自己对于项目的一些理解和心得
    • 看完一个整体功能后再把各个分支流程串起来再做一次整理,然后细细品味其中的关系和逻辑。
    • 对于之前的笔记最好是不要删,哪怕是随着自己对系统理解的深入可能会推翻之前的认识,我的做法是把它标出来,写上不同日期。这样再过更长时间后就会有更不一样的理解和自己的见解了。

以上只是自己在熟悉前人项目代码时的一点心得,希望各位博友提出宝贵的意见以供互相学习,共同提高!!!

  • 15
    点赞
  • 42
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
快速理解一个 Vue 项目,可以按照以下步骤进行: 1. 确定项目结构:首先,查看项目的目录结构。了解项目中的主要文件夹和文件,例如 src 文件夹、components 文件夹、router.js、store.js 等。这将帮助您获得项目的整体概览。 2. 查看入口文件:查看项目的入口文件,通常是 main.js。这个文件通常包含 Vue 实例的创建、路由配置、状态管理等核心设置。阅读这个文件可以帮助您理解整个项目的基本架构。 3. 浏览组件:查看项目中的组件文件夹,了解项目中的各个组件。阅读组件的代码和模板可以帮助您理解项目的不同功能和界面。特别关注根组件(通常是 App.vue),这是整个应用程序的起点。 4. 理解路由配置:如果项目使用了 Vue Router 进行路由管理,查看 router.js 文件或相关配置文件。了解项目的路由结构和各个路由对应的组件,以及路由守卫的使用情况。 5. 状态管理:如果项目使用了 Vuex 进行状态管理,查看 store.js 文件或相关配置文件。了解项目中的状态管理逻辑和数据流动方式。 6. 阅读 API 调用:查看项目中的 API 调用代码,了解项目与后端交互的方式。这可以帮助您理解数据的获取和处理过程。 7. 辅助工具和插件:查看项目中使用的辅助工具和插件,例如 Axios、Element UI、vue-router、vuex 等。了解这些工具和插件的使用方式可以更好地理解项目的功能和实现。 8. 运行和调试:最后,启动项目并在浏览器中查看应用程序。通过与实际运行项目并进行调试,可以更深入地理解项目的运行和交互方式。 通过以上步骤,您应该能够快速了解一个 Vue 项目的基本结构、功能和实现方式。当然,在实际的项目中,您可能还需要深入研究和阅读特定模块的代码,以更全面地理解项目。祝您在理解 Vue 项目时顺利!如有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值