前端架构设计
背景
在传统的软件开发当中，大多数软件都是单体式应用架构的。在瞬息万变的商业时代背景下，企业必须学会适应我们这个时代的不确定性。快速试验，快速失败。更快地推出新产品和有效地改进当前产品，从而为客户提供有意义的数字体验。
在项目管理过程中，大多数的项目管理者更多的关心项目团队内部进行合理明确的分工，每个团队需要做什么，应该做什么，都要一清二梦，将责任具体到各个小队的负责人和员工，只有这样才能明确任务和责任，不会造成推诿的现象发生，从而节省内部资源和消耗，降低开发成本，提高工作的效率。
在技术管理上，技术团队更多的关心技术的积累和技术更新，为了在后续软件迭代更新中，减少重复工作和应对后续技术上的革新。
针对以上背景，架构需要解决的问题归纳如下：
1. 怎么样才能满足公司要求的快速试验，快速失败验证新产品？
2. 怎么样才能满足项目团队合理的分工？
3. 怎么样才能满足技术的积累和新技术的接入？
前端的现状
在前端，往往由一个前端团队创建并维护一个 Web 应用程序，使用 REST API 从后端服务获取数据。这种方式如果做得好的话，它能够提供优秀的用户体验。但主要的缺点是单页面应用（SPA）不能很好地扩展和部署。单前端团队可能成为一个发展瓶颈。随着时间的推移，往往由一个独立团队所开发的前端层越来越难以维护。特别是一个特性丰富、功能强大的前端 Web 应用程序。随着业务的发展，前端变得越来越臃肿，一个项目可能会有 90％的前端代码，却只有非常薄的后端。
前端的框架的演变
当系统功能比较装简单时，系统部署到一台服务器上，客户端单一的请求后端接口。此时前端的业务功能都集中在一个站点下。随着业务功能的增多，后端需要进行功能切分，将功能切分成多服务模块部署到不同的服务器，减轻服务端的压力（如下图2所示）。但是客户端的代码也越来越复杂，很难维护。另一方面，客户端技术的不断迭代更新，如果新增功能模块，我们只能用原有的技术，不利于客户端的长远发展。这时将客户端功能模块分解成多个站点（如图3所示），部署到多个或一个服务器上。
架构设计考虑因素
1. 开发的方便性。
如果有一个新人加入团队，他接手这个项目一定是容易上手的，能简单了解整个前端部分的相互关系，从而找到自己需要重点关注的点。而不是花很多时间去了解这个项目的很多细节，才开始上手做东西。
2. 可扩展性。
需求的变更和新增是很正常的。我们必须要考虑到这些情况。如下图所示：
所有的业务功能都集中在一个页面中，这样导致多人合作开发的困难。后期的维护也非常的困难。模块化势在必行。将业务功能分成一个一个的模块，模块之间是相互独立。每个开发人员负责开发和维护一个模块，相互不影响。
3. 业务要求。
每个业务模块是一个个独立的模块。有时候需要组合各个模块的信息。比如报警信息，每个业务模块是一个个子系统。如果我们要整合每个子系统的报警信息，这个时候我们要抽像出一个大的模块。主要为了整合各个业务模块的信息。如下图所示：
4. 服务器交互。
将业务功能切分成一个个子系统后，如果每个子系统都有自己的一套与服务端交互的标准，会导致这个庞大的系统比较乱，维护成本很高。所有我们要制定统一的子系统与服务器交互的标准。
5. 统一登录
业务切分成一个个子系统后，我们怎么完成统一的登录。
6. 权限控制
用户登录系统后，根据用户角色的不同，我们怎么区分用户具有哪些子模块的权限和子模块内部的权限。
7. UI风格
多个子系统要保证风格的一致性。如果每个子系统都有自己的一套风格，用户视觉体验很差。
仔细设计
一、 模块划分
整个的架构主要分为“登录模块”，“主模块”和”多个子模块“。
l 登录模块：主要负责系统的登录。登录成功后，将登录信息储存在cookie中，便于主模块的使用。
l 主模块：整合子模块的信息。将多个子模块的信息汇聚起来，进行数据分析和展示。
l 子模块：单个独立的应用程序。
每个模块是一个个html站点，是相互独立，互不影响。每个模块可以单独部署和运行。如下图所示：
整体系统的核心是登录模块和主模块。它主要对子系统提供用户信息，收集子系统的共享信息。对于系统本身，它需要设置和控制用户子系统的权限。
二、 模块组合
多个子系统分布部署，统一在一个页面中展示。让系统看起来是一个完整独立的系统。
组合完成后，下面仔细介绍下用户如何从登录入口到跳转到主模块，主模块如何将用户信息传递给子模块的流程
.1 登录流程
.2 将登录信息传递给子模块的流程
三、 系统整体框架
1. 系统纵向结构图
2. 系统涉及的技术介绍
2.1、Cross-documentmessaging 简介
于同源策略的限制，JavaScript 跨域的问题，一直是一个颇为棘手的问题。HTML5 提供了在网页文档之间互相接收与发送信息的功能。使用这个功能，只要获取到网页所在窗口对象的实例，不仅同源（域 + 端口号）的 Web 网页之间可以互相通信，甚至可以实现跨域通信。 要想接收从其他窗口发送来的信息，必须对窗口对象的 onmessage 事件进行监听，其它窗口可以通过 postMessage 方法来传递数据。该方法使用两个参数：第一个参数为所发送的消息文本，但也可以是任何 JavaScript 对象（通过 JSON 转换对象为文本），第二个参数为接收消息的对象窗口的 URL 地址，可以在 URL 地址字符串中使用通配符'*'指定全部地。
postMessage使用非常简单，但是在浏览器支持上对于IE6-7存在不足，如下图：
2.2、postMessage库介绍
PMS 用于frame窗口之间通信，PMS对象暴露三个接口 bind : 用于注册事件，当有窗口发送消息过来并且类匹配时，则会触发注册时相应的回调函数。send : 用于向指定的目标窗口发送信息 unbind : 取消注册的事件。应用demo如下：
父窗口html代码如下图所示：
子窗口的html如下图所示：
具体流程：
1. 打开父窗口html,同时监听子窗口加载完成时的finish事件。
2. 子窗口加载完成，向父窗口发送“finish“事件，同时监听来自父窗口
3. 父窗口接受到来自子窗口的“finsh”事件后，就可以向子窗口发送数据
四、 页面整体布局
五、 UI结构
根据ui设计师设计的风格，统一页面样式
子模块设计标准
1. 子模块的样式要与主模块的样式保持高度统一。具体的规则由UI设计师给出统一标准。
2. 子模块统一引入消息模块，用于接受主模块传递给子模块信息。
3. 子模块必需能自适应屏幕大小。
4. 如果子模块有菜单项，必需将菜单栏置于子模块的左侧。