创业成长系列.前端项目模块化解决方案

我会带着你远行 2022-06-13 00:42 103阅读 0赞

一个完整的前端项目如果想要不断的持续开发下去，一定在最初的时候就要有一个完整的解决方案。在这里我教给大家其中的一种解决方案。以后会放出升级版，这一版是最原始的版本。

## 前后端分离的开始 ##

首先简单的把前后端分离出来吧。

1.所有资源全都静态化，数据都从后端的接口获取。  
2.使用nginx将前端和后端链接在一起，同时将资源和页面分开。  
![这里写图片描述][SouthEast]  
以上部分就显示了分离以及分离之后组成的页面部分。其中前端资源包括css、js、图片等。这部分也可以做cdn加速等操作。

## 前端模块化 ##

前端模块化也是前端组件化。它是把所有资源看做是一块一块的结果集。你可以认为一堆接口+几个页面+几个针对的js文件就组合成了一个模块。这个模块对应业务或者逻辑上的一个模块。如果再看微服务的同学可能会更理解一些。  
![这里写图片描述][SouthEast 1]  
1.业务的分离更适合后端的分离。  
2.统一的接口代表了统一的变化  
3.不同的模块自由组合。可以是模块的组合也可以是js、css的组合  
4.前端内部再次分离，更细粒度的控制js、css等资源，最终在构建的时候统一处理，减少重复开发。

## 一些实现方式 ##

以下就是一些涉及到的技术选择了。

1.css部分。通过less的分离导入功能做到统一部分合并，不同的地方使用不同的样式。  
2.js部分。使用requrejs导入不同的js文件在做异步加载，更利于页面的加载速度，更好的模块化方式。  
3.页面。使用gulp来出来这些模块化的页面。

以上就是一些简单的模块化选择，当然这只是一个基础，更复杂的是后面的部分。

## 其他实现 ##

1.基础模块。在所有模块加载之前，有一个基础模块需要先处理，它的优先级非常高。它通常会需要做权限的判断，预设内容的判断，登录状态的管理等等。类似于一个筛选器，将一些不能够看的功能隐藏或者跳转到其他页面等。  
2.ajax模块。这个模块隐藏在所有接口文件后面。因为要做一些特殊处理。比如token验证、返回格式验证、报错信息验证提示等。  
3.多语言的一部分。对的，你没有看错。多语言涉及到的一部分也在这里。包括不同语言的css文件加载、不同语言的提示文件加载等等。。  
4.gulp处理。整个项目的开发都是构建在gulp的基础上的。包括css处理、es6处理、图片处理、httpserver的启动和重启等。除了这些基础的东西外还有多语言的一部分。版本控制、不同环境构建命令等。  
![这里写图片描述][SouthEast 2]  
这些是使用到的一些插件。  
![这里写图片描述][SouthEast 3]  
这个是本地开发使用到的命令，下面是动态输出的配置。  
![这里写图片描述][SouthEast 4]  
对的，还有Nginx。线上会有运维管理。开发环境还是需要自己手动配置的。不同的环境，不同的服务器都需要使用Nginx来连接。至于host的配置就不贴图了，那个没有啥难度。

## 开发流程 ##

![这里写图片描述][SouthEast 5]

1.首先在git分支上开发。这一步还是原始流程。  
2.使用Nginx连接开发服务器测试开发结果，如果有问题甚至可以连接后端同事的电脑做测试。  
3.由运维部署到测试环境，并进行统一的测试。这个阶段有测试同学介入。  
4.线上测试。这一步基本上是做正式的测试，防止问题发生在线上环境。  
5.测试完成，正式上线。

注：可以是使用Jenkins来做各个环境的部署。上面的动态配置可以根据不同的环境生成不同代码。运维同学完全可以一键搞定git管理、代码构建发布。下面是一张项目结构图。  
![这里写图片描述][SouthEast 6]  
![这里写图片描述][SouthEast 7]

以上就是一个完整的前端解决方案。有问题欢迎问我。

[SouthEast]: /images/20220613/6415de3ddbea4feb88b0dbca543b4e35.png
[SouthEast 1]: /images/20220613/a105f764b67246258403d6be317edbea.png
[SouthEast 2]: /images/20220613/9d63ad3bedd64f85b48f59e7cb3b7a48.png
[SouthEast 3]: /images/20220613/9a2a1e42296b4e1ca4182e2243297b00.png
[SouthEast 4]: /images/20220613/47dd7773fd1248e1b0eb3b3dae33c147.png
[SouthEast 5]: /images/20220613/f1abe62e177d484c83eba0d2ccaafd11.png
[SouthEast 6]: /images/20220613/29b99febbae04f359120bb5f1e17df11.png
[SouthEast 7]: /images/20220613/3d7d67053dfe4259ac6f6785b157a956.png