web端项目架构设计与工程化实践

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/running_shuai/article/details/80541145

项目的整体架构

1、整体我所理解的架构图

基础层： init初始化的一些配置文件，比如包含通用的html头尾结构
逻辑方法层 util ：整个端需要暴露的一些全局变量，全局方法。声明以后暴露出来，什么时候用，直接引用util中的方法就可以。
视图层：view （最基本的网页，但因为是多页面，所以在不同的系统的页面的meta，引用的共有脚本，共有样式表都有差异。所以视图层存放的是最基本的多页面。）
public：上线引用的代码，包括css，images，打包以后生产的。javascript
build：页面基础代码逻辑。不管是react还是vue，其实都是挂载在一个真实的dom节点上的。

项目整体架构

1. web服务器选择的流行node服务器。服务器端框架选择在是基于node的express框架。
2. 浏览器端选择的是react框架和vue框架共存。 （这个当时不同系统是由不同人开发的，所以出现共存的情况）

---

浏览器端架构实现

   不管浏览器端选择任何的mvc框架，react和vue的优缺点在这里我们  
不做争论。现在假定选择react框架。

搭配的react相关包来帮助开发，我挑选的包有：

1. ant-design UI组件库，这套组件库还挺好用的，功能也全，对快速迭代的项目可以使用。
2. react-redux本来redux的使用是用来单页面管理状态单元的。但可能因为一些逻辑比较复杂的页面，组件嵌套好几层，数据流的传递特别麻烦，所以后来引入redux用来做单页面的状态管理
3. react-router因为平台是对外的，所以采用的基本都是多页面的。但有时根据具体的业务，某些tab页签没必要拆分，所以使用单页应用可以很快速的切换页面而且数据也是按需加载，不会重复加载依赖。更减少多打包体积，不过具体采用要跟具体的业务需要来定

架构中最初也没采用