# 开发概述
#### 微前端简介
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化web应用的技术手段及方法策略。子应用按照指南做微前端改造后，可以在硬件开发工具链平台云服务（CraftArts IPDCenter）中独立运行。
#### 工作原理
微前端采用的无界方案，利用"iframe"来实现js沙箱能力，下面详细介绍：
1. **应用加载机制和js沙箱机制**
将子应用的js注入主应用同域的"iframe"中运行，"iframe"是一个原生的window沙箱，内部有完整的history和location接口，子应用实例instance运行在"iframe"中，路由也彻底和主应用解耦，可以直接在业务组件里面启动应用。
2. **路由同步机制**
在"iframe"内部进行*history.pushState* ，浏览器会自动的在*joint session history* 中添加"iframe"的*session-history* ，浏览器的前进、后退在不做任何处理的情况就可以直接作用于子应用劫持"iframe"的*history.pushState* 和*history.replaceState* ，就可以将子应用的url同步到主应用的"query"参数上，当刷新浏览器初始化"iframe"时，读回子应用的url并使用"iframe"的*history.replaceState*进行同步。
3. **iframe连接机制和css沙箱机制**
采用webcomponent来实现页面的样式隔离，会创建一个自定义元素，然后将子应用的完整结构渲染在内部子应用的实例instance在"iframe"内运行，dom在主应用容器下的webcomponent内，可以实现两者的互联。通过代理"iframe"的document到webcomponent，可以实现两者的互联。将document的查询类接口："getElementsByTagName"、"getElementsByClassName"、"getElementsByName"、"getElementById"、"querySelector"、"querySelectorAll"、"head"、"body"全部代理到webcomponent，这样instance和webcomponent就精准的链接起来。
当子应用发生切换，"iframe"保留下来，子应用的容器可能销毁，但webcomponent依然可以选择保留，这样等应用切换回来将webcomponent再挂载回容器上，子应用可以获得类似vue的"keep-alive"的能力。
4. **通信机制**
承载子应用的"iframe"和主应用是同域的，所以主、子应用天然就可以很好的进行通信，我们提供三种通信方式：
- props注入机制 子应用通过$wujie.props可以轻松拿到主应用注入的数据。
  
- window.parent通信机制 子应用"iframe"沙箱和主应用同源，子应用可以直接通过window.parent和主应用通信。
  
- 去中心化的通信机制 提供了EventBus实例，注入到主应用和子应用，所有的应用可以去中心化的进行通信。