项目的整体架构
1、整体我所理解的架构图
Created with Raphaël 2.1.2
基础层: init初始化的一些配置文件,比如包含通用的html头尾结构
逻辑方法层 util :整个端需要暴露的一些全局变量,全局方法。声明以后暴露出来,什么时候用,直接引用util中的方法就可以。
视图层:view (最基本的网页,但因为是多页面,所以在不同的系统的页面的meta,引用的共有脚本,共有样式表都有差异。所以视图层存放的是最基本的多页面。)
public:上线引用的代码,包括css,images,打包以后生产的。javascript
build:页面基础代码逻辑。不管是react还是vue,其实都是挂载在一个真实的dom节点上的。
项目整体架构
- web服务器选择的流行node服务器。服务器端框架选择在是基于node的express框架。
- 浏览器端选择的是react框架和vue框架共存。 (这个当时不同系统是由不同人开发的,所以出现共存的情况)
浏览器端架构实现
不管浏览器端选择任何的mvc框架,react和vue的优缺点在这里我们
不做争论。现在假定选择react框架。
搭配的react相关包来帮助开发,我挑选的包有:
-
ant-design
UI
组件库,这套组件库
还挺好用的,功能也全,对快速迭代的项目
可以使用。 -
react-redux
本来redux
的使用是用来单页面管理状态单元
的。但可能因为一些逻辑比较复杂的页面,组件嵌套好几层,数据流的传递特别麻烦,所以后来引入redux
用来做单页面的状态管理 -
react-router
因为平台是对外的,所以采用的基本都是多页面的。但有时根据具体的业务,某些tab页签没必要拆分,所以使用单页应用可以很快速的切换页面而且数据也是按需加载,不会重复加载依赖。更减少多打包体积,不过具体采用要跟具体的业务需要来定
架构中最初也没采用