前端项目开发流程思考

·  阅读 8147

这里有一份简洁的前端知识体系等待你查收,看看吧,会有惊喜哦~如果觉得不错,恳求star哈~


引言

有项目开发经验的童鞋都应该知道,开启一个新的项目,不是上来就开始敲代码的,而是应该有一个约定俗成的流程。

假设你现在要做一个react项目,有哪些重要的环境是必须要考虑的呢?

本人认为应该考虑四个方面:工程架构、项目架构、业务开发、联调及投产上线~

工程架构

要配置一个能跑起来的工程,目前来说是离不开webpack。

webpack可以帮我们做很多事情,比如如何编译jsx文件、如何处理图片等静态文件、如何打包、如何做前端优化等等。

随着webAPP的发展,单页应用越来越多,服务端渲染也越来越受到前端开发者的重视,而webpack也可以帮助我们做到服务端渲染。

工程架构要达到的目的有三,分别是:

  1. 解放生产力 我们希望 在开发过程中,把精力都聚焦在业务代码上,不需要考虑其他重复性的操作,比如:
  • 源代码预处理
  • 自动打包、自动更新页面显示
  • 自动处理图片依赖,保证开发和正式环境的统一
  1. 围绕解决方案搭建环境 react、vue、angular等框架的开发模式都是不一样的。react是jsx文件,vue是.vue文件,angular使用ts开发等。浏览器无法直接解析jsx、.vue等,我们需要一个编译的过程。 所以我们需要注意的点有:
  • 不同的前端框架需要不同的运行架构
  • 预期可能出现的问题并规避,比如使用sass来规避未来项目大了后CSS编写的问题等
  1. 保证项目的质量 主要有两点作用,一是保证风格一致,有利于团队成员更好理解,二是有利于代码排错。 常用的方案有:
  • code lint
  • git commit 预处理

项目架构

工程搭建好了之后,我们就要搭建项目架构。

工程建构考虑的是让工程跑起来、更方便进行开发,而项目架构是考虑的项目的分层、更好地编程及更好的扩展性。

项目架构要考虑的点包括:

  • 技术选型:假设我们做的是react项目,那我们就要配置路由和数据仓库。数据路由我们可以毫无疑问地使用react-router来做。数据仓库(store)部分我们可以考虑使用redux,也可以考虑使用Mobx这个后起之秀。Mobx相对redux来说更加简单,效率也更高。
  • 整体代码风格

业务开发

项目架构搭建好,就可以真正动手开发业务了。

联调及投产上线

由于本文是针对前端项目,所以不会过多考虑后端的开发。

前端业务代码开发完毕,就可以跟后端童鞋进行联调,并交付测试组测试,最终投产上线~

最后

本文比较简单,是本人的一些思考。如果你有补充的,麻烦留言告知,不胜感激~

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改