中小型项目前端架构.docx

中小型项目前端架构
LT
2
中小型项目前端架构
3
一、为什么要有一个好的架构
首先明确一点，架构是为需求服务的。前端架构存在的目的，就我个人理解来说，有以下几点：
1. 提高代码的可读性
一个好的架构，代码的可读性一定是很强的。
简单来说，假如有一个新人加入团队，那么他接手这个项目，一定是容易上手的，能简单轻松的了解整个前端部分的相互关系，从而找到自己需要重点关注的点。而不是需要花很多时间去熟悉这个项目的很多细节，才能开始上手做东西。
就文件来说，可以从文件名上，分清哪些是页面、哪些是逻辑、哪些是样式、哪些是可以复用的组件、哪些是图标组、又有哪些是移动端或是PC端专享的样式/逻辑等。
就代码来说，包括统一的命名风格，封装在同一个文件里的代码的相关性足够强等。
2. 提高代码的可维护性
4
5
6
考虑到扩展性： 
4. 便于协同
包括前端和后端的协同，前端和前端之间的协同。
具体来说，前后端的协同通常是以ajax为交互，那么应至少有一个用于专门封装了所有ajax请求的文件，所有ajax请求都封装在这里。在开发时，这里封装的方法应该可以模拟发送和接收约定好的交互内容，方便开发联调。
7
而前端和前端的协同，主要体现在同时在更改代码时，不会影响对方代码的正常运行。因此要求封装、解耦以及低干扰度是必须的。
5. 自动化
自动打包，压缩，混淆，如果有必要，再加上自动单元测试。
总结：总结来说，一个好的架构的目的是，让前端写代码写的舒服，让后端联调的舒服，让产品经理改需求改的舒服。
二、我如何设计架构
我不敢说自己的架构是好的架构（显然不是啦），只能分享自己最近做的一个项目，它的架构的如何做的。
8
首先，确定需求：
1、一个中小型网站，同时面向移动端和PC端（单端大概15个页面，算上弹窗大约20个）；
2、预算有限（给的钱少），开发时间有限（一个月）；
3、可能存在一定程度上的需求变更（比如增加页面或修改某些页面内容）；
4、客户可能不太在乎优化（但是我自己在乎啊）；
5、要求兼容IE9以上。
其次开始决定：
1、兼容IE9以上说明可以使用主流框架，而无需必须使用jQuery。因此我采用了vue，；
2、预算有限，时间有限，因此PC端和移动端共html和js，独立css；
3、页面有限，因此无需将架构层级划分的比较细，只需要按其类型划分即可；
4、根据原型图来看，页面复杂程度有限，复用部分不是很多，因此可以确定哪些东西需要封装复用，哪些比较复杂需要独立封装，哪些比较简单为了简化开发难度可以直接耦合；
5、自己比较熟练单页面网站，因此采用以单页面为主，异步加载其他页面的形式。
9
于是使用相关配套的东西，比如webpack，vue-router等，另外为了开发和生产的方便性，采用以下模式进行开发。 
10