前端项目架构

框架选型标准

​ 框架的选型需要考虑很多因素，如该技术能否可以满足业务需求、浏览器支持情况、框架自身是否成熟、团队成员对该技术（或框架）的掌握情况，是否有人可以全局把控、学习成本是否可以接受、该技术（框架）本身的稳定性，它的社区、维护者等；在项目实施中，我们一般会关注到要有可复用的组件，要打包部署方便，最好学起来不要太复杂，方便能力建设、节省招聘成本等等。

基于以上因素，对vue.js、react、AngularJS这三个当前最流行的框架来做一些分析：

angular:

​ 完善的MV*框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能

缺点：

1. 验证功能错误信息显示比较薄弱，需要写很多模板标签

2. 框架偏重，学习曲线陡峭

React：

1. 子组件重复渲染问题需要手动优化

2. 可以使用redux进行状态管理，函数式、不可变、模式化，时间旅行

3. 可使用JSX，完全的javascript能力

4. 更繁荣的社区生态

Vue

1. 可使用JSX，但推荐使用模版语言而不是JSX

2. 学习曲线平缓，容易上手

3. 更轻量，单页面

4. 框架稳定更新优化，社区活跃

​ 组件复用是每个项目都会重点关注的一个维度。合适的、职责单一的组件会大大提升新特性的开发效率和工程的可维护性，也能方便地进行测试。Vue、Component的组件相对灵活、轻量，添加依赖就可以无缝集成到遗留系统中。对于从0到1的系统，也可以使用新的实践来构建工程，例如ES6、Webpack等技术。Angular官方推荐使用TypeScript，这需要单独构建和打包，不方便与遗留系统集成。

​ 在学习曲线维度上，Vue.js和React的重点更侧重于创建可复用、易于测试、能灵活集成的组件。当然，通过其它扩展组件，以及一些脚手架插件的支持，也可以方便的搭建一个采用最新实践的前端应用的构建框架。它们最大的优点是按需定制，学习曲线平滑，构建出来的应用小而精。

​ 相对来说，Angular是大而全的框架，它们更侧重于大型前端工程的构建，为开发人员屏蔽项目构建底层的细节，提出了自己的一套解决方案。使用它们的难点是要度过前期曲线陡峭的学习期，优点是由于使用了标准化的开发方式，后期能极大的提高开发生产力，提升开发效率。

​ 综上所述，以目前团队成员的学习情况以及框架的上手难度、业务需求适用情况来说，建议使用vue.js。

异常处理

异常处理一般主要体现两个方面：

1. 在前端校验异常处理，如信息校验、错误提示信息、警告提示等。

2. 另一个是前后端交互异常处理，前端根据后端封装的接口结构对其进行方法封装。如接口请求错误、软硬提示信息等。前端只需要根据对应的情况展示不同的提示内容即可。

自动化构建 （打包）

​ 自动化构建是前端架构过程中非常重要的一环，架构者可以多花点时间和精力在上面，这个过程对整个团队的开发效率以及项目的整理质量有很大关系，可以让开发的同学在开发的过程中只用关心业务逻辑，不会被其他问题干扰。目前自动化构建工具的选择有webpack、grunt、gulp、fis等，各有各的优劣，按照项目实际情况选择一个即可。

自动化构建过程主要要考虑和解决好以下几个部分：

1. 提高开发效率：热加载、开发和生产代码分离

2. 优化性能：代码合并压缩、文件版本号、按需加载、图片优化

3. 提高代码质量：模块化、ES6+Babel编译、css预处理、eslint代码检查、无用代码片段过滤

项目的架构在最开始都会有很多的优化空间，在开发的过程中需要不断对不足的地方进行优化，所以项目的架构过程是一个不断完善的过程。

基础组件

​ 如果我们引入一些成熟的UI框架，项目的基础组件很大一部分都得到了解决，比如弹框、日期、分页等控件。那这里强调的基础组件，一类是对这些UI控件的二次封装，比如下拉框、多选框等，第二类是公用的组件，比如头部、尾部、加载状态、为空状态等，这些在架构的过程中可以提前考虑下。

如使用vue框架，可以选择element-ui进行配合进行开发。Element的官方介绍是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。它提供了我们项目中常用的各类组件，基本可以满足需求。

公共方法封装

​ 在项目开发过程中会遇到许多方法复用，我们把这些方法抽离出来封装到公公方法中。避免多次定义造成的代码冗余或覆盖。如：格式化日期、根据value值获取列表对应的label值、request请求方法、处理字符串方法等。

目录结构分配原则

清晰的目录结构，会让整个项目显得有逻辑性，便于管理源代码，也方便开发人员去识别不同的文件夹和文件，这样就可以快速找到特定文件的特定代码，大大降低了对整个项目的理解成本，也让新同学可以快速上手。以下是一个推荐的基础目录结构：