前端有哪些架构（前端架构图怎么画）

图片授权基于 CC0 协议

没有一种架构能满足未来的需求。在项目周期中，架构可以不断的优化，持续的变好，从而使架构可以适用当前的项目。

所以，架构是可以改变的，架构是需要变化的。

兼容性

1、浏览器的支持范围：明确指出我们要针对哪些浏览器，以及向下兼容到浏览器的哪个版本。

2、移动端设备支持的版本：常见的设备比如 Android 和 iOS，设备最低支持的版本。

如果公司决定支持早期的IE8浏览器，那就无法使用当前流行的前端框架「React、Vue、Angular」，可以尝试使用兼容性更好的「San」框架。

技术风险

在设计架构的过程当中，要努力降低它们带来的风险。不确定的技术和功能，意味着带来的风险是未知的。

1、缺乏经验：如果应用中某一些功能实现非常复杂，或者团队没有某一领域的经验，那在实践的时候可能就会影响系统的架构。

2、第三方库：之前公司在项目中使用了 BootCDN 引用了一些库，由于 BootCDN 更换了地址，导致公司很多项目出现问题「我无比惆怅…」

如果公司技术实力够的话，可以搭建公司自己的 CDN 库，如果不放心的话就放弃一些性能，把 CDN 文件放在自己公司的服务器上。

3、依赖更新：依赖对于项目短期来说不是问题，对于长期项目来说，依赖如果更新版本，对于之前的语法是否兼容…

架构风格

MVC 这种风格应用的非常多，它强调职责分离，将软件系统分为三个基本的部分：模型「Model」、视图「View」和控制器「Controller」。

由视图和控制器一起完成用户界面的功能，并设计一套变更机制，来保证用户界面与模型的一致性。

它是一种常见的架构风格，在前端应用和移动端应用的非常广泛。

框架类型

大而全：框架大、功能多，开箱即用。体积上也大，所需要了解的知识也要更多。比如 Angular 有着集中统一的详细文档，能提供与编程与架构相关的规范。上手成本高，框架限制高。虽然庞大和臃肿，但可以有效率有组织的开发。

小而美：框架本身只提供核心的功能，如果要完成一个应用，还需要去找其他的组件来配合。灵活性高，可定制度高。如果当前项目采用的组件不好用，也可以切换到其他相应的组件。比如：React 其实是一个 View 层。

编程规范

为了规范代码，我们会使用 ESLint 或 CSSLint 类型的代码扫描工具。可以复用这些工具来对代码风格进行检测。

通常大公司都有自己的配置项，我们也可以使用其他团队的比如 Google编程指南或 Airbnb 创建的 eslint-config-airbnb 规范，有相应的「函数、变量命名法」、「CSS和预处理器命名规则」、「组件命名规则」。

比如在 JavaScript 里，通常使用 that = this 来解决作用域问题，对于 Ruby 语言使用者来说，他们会写成 self = this 。

不同的语言之间存在不同的文化，在使用其他语言的时候，这些文化会体现出来，这些我以前没人注意过…

示例项目

对于前端项目来说，登录的功能，便是一个相对比较完整的示例。它涉及到：状态管理、网络请求、数据模式、表单提交、UI 交互等。通过示例代码，可以展现好的编程模式、范式，将它们融入到项目中。

UI 组件库

无论是网站、移动应用还是桌面应用，都是由许多小元素构建出来的页面。

Bootstrap UI，作为最普通的 UI 前端框架，可用在普通的 HTML 项目。在社区里也有着相关的实现，比如：React-Bootstrap、NG Boorstrap 等。

Material Design，是由 Google 推出的全新的设计语言，可在移动设备、平板电脑、台式机或其他的平台提供一致的外观。

Ant Design，是由蚂蚁金服推出的企业级产品的设计体系。在其官网称是世界第二流行的 React UI 框架「最流行的 React UI 框架是基于 Material Design 的 Material UI 库」。

Element 由饿了么前端团队开发，专用于 Vue.js 框架。