江苏龙网

  1. 主页 > 生活百科 > >

微前端架构技术解析( 三 )

微前端架构


 

微前端架构技术解析

文章插图
 
 
可见，子模块的路由完全遵循Vue的路由规范（或遵循自身使用的框架的规范），这样可以让容器应用毫不费力地直接添加引用 。容器应用加载完成js文件后，可以直接调用window.mp.home_routes()获来取已定义好的ROUTES配置 。
【微前端架构技术解析】- 子模块的entry文件（jobs/*.js）
每一个子模块都需要一个单独的entry文件，这类似于主容器的jobs/app.js，能用于初始化子模块代码、绑定全局渲染函数等 。entry文件与正常的初始化Vue方式一样，只是需要将初始化逻辑包裹在一个全局函数中，以便主容器能在加载此模块js完毕后，方便的进行渲染调用 。例如：
 
微前端架构技术解析

文章插图
 
 
根据以上代码，渲染出来的Vue模块会被放到指定的#${containerId}中，这个ID由主容器在渲染时动态传入，以便将模块插入到指定的页面位置 。
- 子模块代码开发
子模块代码开发与正常的Vue开发并无不同，可以轻松迁移老代码，只需要注意一些通用代码的引用并通过上文提到的懒加载模式引入 。
 
后记爱奇艺号技术团队基于Vue定制开发了微前端框架，通过应用上面介绍的基本方法及其他的自定义逻辑，我们搭建了与业务代码开发、代码迭代非常契合的一套微前端框架 。我们认为微前端的主要好处有：
· 更小，更紧密且更易维护的代码库 。
· 组织更具扩展能力，团队可更加独立自治 。
未来，我们会继续完善前端框架，使其性能更加优秀，进一步提升爱奇艺号前端代码的开发效率，实现不同应用之间页面级别的自由组合，从而可生成个性化控制台 。
实现微前端有很多技术方法，不同的企业有不同的对策；从服务端转换到 iframe 和 JAVAScript 元框架和 Web 组件等都是可选的微前端方案 。
感兴趣的朋友可以阅读实现微前端的技术方法：https://medium.com/dazn-tech/adopting-a-micro-frontends-architecture-e283e6a3c4f3




推荐阅读


上一篇：三大红茶,中国三大知名红茶

下一篇：三宝茶禁忌,糯米茶的饮用禁忌