随便聊聊前端项目

做前端也不是很久，也没做过什么特别大型或者是特别复杂需要很多前端配合开发的项目，所以对于前端的架构我并没有一个清晰的认识。只是最近看着新公司的项目，实在有感而发，忍不住想说说前端项目最基础的一些架构。

现在几乎都是前后端分离了，所以前端项目都是前端自己搭建，整个项目的结构都把握在自己手里。一个好的项目架构有什么好处呢，无外乎现在网上一直说的那几点，代码可读性、可维护性、可扩展性。当然，本人能力有限，说说基于本人认识上前端项目应该做的。

结构上，应该明确各种资源所放的位置。比如你的图片、图标、插件、组件、页面等等，比如有些人习惯所有静态图片放一个文件夹，有些习惯每一个大块的图片放一个文件夹，这都是可行的，但是固定好了一个模式之后就要严格遵守。千万不要相同类型的资源为了开发方便还是什么的就乱放，这就导致整个项目很凌乱。

初始化，每个项目应该都有一些初始化的东西，比如css、js等，你对于这些初始化的公共的东西就要找一些比较合理的使用，而不是一直用老项目的。比如我本人使用的初始化css、适配单位rem、本地缓存storejs等，都是觉得比较合理的采用，现在网上各种插件太多了，那么就需要找一些评分高，或者是现在普遍认为比较合理的。

封装请求，每一个项目，都会用到请求和后端交互，那么我们就需要封装一个适合项目的请求交互。封装过的请求和没封装过的不仅在代码量上，在使用上也是有很大的优势。

高内聚、低耦合，以前一直不明白这句话具体做什么，直到后来做到一个项目才知道这句话的重要性。高内聚，很简单，就是每个模块之间，也就是每个组件、页面自身之间有很强的聚合度。最简单的就是请求地址，全局的请求地址改一个就可以了，而不是每个请求都需要改。低耦合也很简单，就是不同模块之间关联度很低很低，比如我改了一个字段或者样式，只影响当前模块，而不是好多个模块都变化了。

组件，现在前端开发都是组件化开发，各个框架也提倡组件化开发，所以对于公共的组件封装，很重要，对于代码量减少的不是一点半点。对于维护和修改提高也很大。

规范，相信很多码农都会有所谓的代码洁癖，其实这就是一个规范。不同人的敲代码的习惯都不一样，要是很多人开发一个项目或者是经很多手开发，那么这个项目在不同习惯下的代码，是很乱很杂的。所以就需要制定一个规范，尽量让一个项目统一一个风格，那么不同开发者看别人的代码也更容易。

代码，相同的功能，不同人实现的逻辑有可能是不同的，不同页面不同人写的标签和样式也会不同，那么这时候就要审视自己的代码，一个简单布局，大概需要多少行代码，觉得超出了就要想想是不是思路不对，一个逻辑也是，明明一个很简单的功能，却发现逻辑有点多，也要想想是不是思路不对。其实这部分就要看基础了。

其实想要架构好前端开发远不止这点内容，从UI库的选取、基本样式的基调、需求的划分、细分模块等等很多都是要有一个清晰的架构和流程。暂时能力有限，所以只能随便聊聊。

欢迎关注 Coding个人笔记 公众号

转载于:https://juejin.im/post/5c48401551882534f33bd861