前端面试（中高级）过程中经常会遇到面试官问一些主观问题，主观又听起来高大上，主要考察你的知识积累，抽象归纳及表达能力。比如：请你谈一下你对前端架构的理解。

‘纳尼，前端也有架构？架构？什么玩意，这些都是架构师的活，我去了就盖房子了，哪知道什么架构？’

这个问题，我遇到不止一次了，每次都懵懵的，不知道如何“解题”，回来复盘，查资料，始终一知半解，似懂非懂。如下就简单地谈下自己的看法，如有不当之处欢迎指正也欢迎大家补充：

比如我们提到一个建筑工地的架构，你会想到什么？架构----结构----框架，特点是，剥去水泥混凝土，砖块，剩下的那些钢筋结构。也就是工地最初搭建的时候就定好的结构是吧。有什么作用呢？想一下，地基牢，项目稳，质量高；架构决定了建筑的伸展方向；前期留足了可扩展的口子，后期对项目的扩建更有帮助；后期如果工人一批又一批地加入能不走样地继续搭起来（哈哈，流水的兵），总之基础设施越是完善，后期施工维护起来越是轻松。

那么前端架构呢？？

现在的前端领域, 随着JS框架, UI框架和各种库的丰富, 前端架构也变得十分的重要. 如果一个大型项目没有合理的前端架构设计, 那么前端代码可能因为不同的开发人员随意地引入各种库和UI框架, 导致代码量变得异常臃肿, 最终结果可能是代码变得无法维护, 页面性能低下,不得已只能推翻重构. 所以我们需要在项目开始前, 同样的需要对前端代码进行架构, 一旦前端架构师设计出所有前端开发人员都要遵循的检验机制, 建立起系统设计的规范, 那么项目就拥有了可以衡量代码质量的标准, 前端开发人员也能享受到更高效的工作流. 所以, 前端架构的定义可以用以下一句话来总结:

前端架构是一系列工具和流程的集合, 旨在提升前端代码的质量, 并实现高效, 可持续的工作流。

接下来我们主要从以下几个方面来解析

代码：

1.html: 语义化，层级结构清晰。

2.css：基础样式文件，统一命名规则，UI库选择

3.javascript： JS库选择，react，vue,angular

代码规范： Airbnb eslint+vscode

4.常用工具库：lodash，moment，classnames.........(统一不要自己重复造轮子)

5.统一行为： token，cookie, axios，proxy跨域.......

流程:

一般开发流程

1. PM(产品经理)提出需求,并和开发人员讨论需求的具体细节和可行性
2. 需求确定之后, 发布出原型图和需求文档
3. 开发人员根据原型图和需求文档进行开发, 前端还需要UI(网页设计人员)提供设计图, 项目总监使用JIRA等项目管理工具来跟踪工作流
4. 搭建测试环境来测试代码, 开发人员完成功能开发并自测通过后, 提交给测试人员进行测试
5. 测试人员和需求方通过后, 将代码合并到远程的master分支, 并部署上线

下面将分别从每个步骤讨论其它们在现代化开发流程中的必要性:

原型

PM进行需求验证的方式；给需求方确认需求的工具；UI设计出设计图的依旧；开发人员开发的依据；测试人员测试的依据

开发

git管理仓库代码，分支，webpack构建

jira跟进任务进度，wiki需求文档

部署

采用JenKins这类的持续集成工具进行代码部署是一个优秀的架构所必须的, 持续集成工具能够在代码发布到服务器前, 先对代码进行一些处理, 这意味着我们可以在Git上忽略那编译后的资源.

本篇参考链接：https://www.jianshu.com/p/549b4c3597e0