跟前端架构说easy(3):架构设计

架构设计就好比是搭建高楼的架子，这个高楼最后什么形状、是否稳健，全部看这个架构设计这个架子的稳定性和扩展性。

团队技术栈

我们团队是在长期学习和沉淀中，逐渐形成了以uniapp和vue两大技术为主，同时保留了一定微信小程序、Android原生、iOS原生的开发能力，技术架构我主要会从uniapp和vue做说明和分析。

uniapp的架构设计

我们是使用uniapp技术，基于自己的前端开发规范，通过调用后台接口来实现我们的业务需求。

1. 网络层

网络层的设计会分为三部分，底层、过渡层、调用层，底层重点是稳定性、可扩展性，调用层的使用一定是要简单方便，所以我们会在中间层根据这个项目的要求做更多灵活的封装。这部分直接上代码：

//基础层
const baseRequest = (args) => {
//args 会有url、param、header、method等信息，
//这部分一定要充分考虑，因为底层就是地基，不可随意改变
}

//过渡层
let execApi = (url, method, param, loadingTip, hideErrorMsg = false, loginType = 1) => {
// 通过本项目的业务，参数可以细化，多增加默认值，方便调用
}
//过渡层进一步封装
let postApi = (url, param, loadingTip) => {
  return execApi(url, "POST", param, loadingTip)
}
let getApi = (url, param, loadingTip) => {
  return execApi(url, "GET", param, loadingTip)
}

//调用层
register:(param) => requestUtil.postApi('/api/user/register',param),

2. 基础层封装

基础层的封装其实也是规范的一种，网络层+基础层是为了更好的建立统一，为业务组件的封装打下基础，让业务组件能够在多项目中快速复用，同时保持一套基础层的维护。

3. 组件封装

组件主要分为UI组件和业务组件。UI组件主要是根据某些设计的要求，实现一些界面展示。业务组件主要是针对业务的封装，能够将该业务快速复制到其他项目中使用。业务组件拥有自己所特有的UI组件、工具类以及界面，另外每个业务组件必须有使用说明的readme.md。具体结构如下图：

vue的架构设计

我们是使用antdesign和element两个UI框架，基于自己的前端开发规范，通过调用后台接口来实现我们的业务需求。vue也是做了网络层、服务层、工具层、组件等，这部分和uniapp的基本类似，就不再重复描述。

架构的目的

架构的好处有很多，比如说会给我带来稳健、可扩展的程序等等。在作者来看，架构设计的很重要的一个目的就是提高效率，作者希望用10%-20%的架构时间来赚取50%的项目时间，用赚取的项目一部分回馈到架构时间，逐渐形成良性循环。

The END

如果您觉得这篇内容对您有帮助，我想请你帮我两个小忙：

1、给作者点个赞，分享让更多的人也能看到这篇文章

2、关注头条号「前端百思说」，加入我们一起学习

点赞、转发、关注头条号，私信“学习资料”向小编索取更多VUE相关的资料

上一篇文章

跟前端架构说easy（2）：技术选型