基于Vue实现微前端的示例代码


Posted in Javascript onApril 24, 2020

   前端微服务化一直是前端社区的一个热门话题,早在2018年就有不少开发者提出过各种解决方案。或许是未得精髓,个人认为基于Web Components的实现脱离整体打包逻辑的,难以工程化。直到遇到了vue-cli 3,子模块打包的问题得以迎刃而解。2019年秋,团队内部初步实现前端分布式开发,解决了集中式开发部署的“老大难”问题。个人认为,随着WebAssembly等技术的兴起,“前端后移”越来越明显,前端微服务会成为大前端的一个趋势。下面简单分享下本人对前端微服务的一些拙见。

前言

   目前的前端技术,大部分是基于JavaScript栈极其衍生的技术栈体系。从当年被人戏称为“玩具语言”发展到今天,JavaScript的经历可谓命途多舛。早期缺少必要的规范,让JavaScript的生态自由的有点泛滥。本就是解析型语言,还多重标准,谁也不能预测下一行代码会产生什么结果。随着Node.js的到来,“前端后移”历史的车轮开始转动了。前端的打包不再是简单地混淆压缩一下,出现了import/export模块的概念,后端工程师嗅到了熟悉的味道。W3C的ES2015标准,前端模块化开始深入人心,Webpack逐渐成了前端开发的事实标准,TpyeScript等强类型衍生语言也开始出现,大前端圈空前繁荣。随着大量了后端语言(特别是Java这类面向对象语言)的标准加入,前端开发终于从Web开发中脱离出来自立门户。前端工程化伴随着“前后端分离”的潮流,席卷了整个互联网。GitHub等开源社区上前端项目如雨后春笋般涌现。

痛点

   前端工程化固然是好事,但前端项目一多就存在难以整合的问题。特别是前端技术栈不一致的情况下,React团队开发的小功能不能被Vue团队复用。前端工程也期待能拥有后端的远程调用RPC接口。通过调用前端RPC接口就能跨平台渲染。这就好比是JVM平台都能解析class字节码一样方便。目前整合不同系统的方案大部分是使用iframe简单嵌套,不优雅但能用。谷歌提出的WebAssembly可能是不错的方案,但离商用太远。

方案

目前如何有效整合前端应用呢?综合考虑了新老系统的特点,大致分了三种情况。

基于Vue实现微前端的示例代码

关键代码如下:

<div class="puzzle-box">
 <div class="puzzle-item" v-for="puzzle in puzzles" :key="puzzle.id" :style="'height:' + puzzle.height + ';width:' + puzzle.width">
  <div v-if="puzzle.type === 'iframe'">
   <iframe :src="puzzle.src" :style="'width:100%;height:' + puzzle.height "></iframe>
  </div>
  <div v-if="puzzle.type === 'module'">
   <puzzle-module v-bind:url="puzzle.url"></puzzle-module>
  </div>
  <div v-if="puzzle.type === 'native'">
   <div v-append="puzzle.content" :style="'width:100%;height:' + puzzle.height"></div>
  </div>
 </div>
</div>
<script>
  const content=`<h1>前端开发迭代计划</h1><table class="table table-bordered table-striped table-hover"><tr><th>序号</th><th>需求</th><th>优先级</th><th>负责人</th><th>计划完成日期</th></tr><tr><td>1</td><td>大数据的自助分析平台</td><td>高</td><td>工程师A</td><td>2020-04-08</td></tr><tr><td>2</td><td>自定义模板、调用时传入XML,引擎生成报表结果</td><td>高</td><td>工程师A</td><td>2020-04-08</td></tr></table>`
  const puzzles = [
    { id: 1, type: 'module', url: 'http://localhost:9081/list.js',width: '100%',height: '400px'},
    { id: 2, type: 'native', content: content, width: '50%', height: '400px'},
    { id: 3, type: 'iframe', src: 'http://cn.bing.com/',width: '50%',height: '400px'},
  ]
</script>

iframe嵌入

iframe嵌入是是目前大多数人使用的方式,基本没有开发量。

原生html嵌入

这种方式外部接口提供html文本,本地系统划一块地方出来给你自己渲染,如划一个600x800的div用来渲染报表。使用vue-append作为渲染组件。这种方式可以摆脱iframe,自由度也比较大。缺点是不容易实现规范化,有点像内嵌的广告页面。

模块化嵌入

使用模块打包的概念,通过webpack将子模块各个分拆独立打包成模块再通过静态文件方式加载到外部系统做展现。这也是目前团队内部使用的方案。通过遍历模块目录(一般就是业务vue页面)批量生成配置文件。

.......

  function readDirectory(directory) {
   fs.readdirSync(directory).forEach((file) => {
    const fullPath = path.resolve(directory, file);
    if (fs.statSync(fullPath).isDirectory()) {
     if (scanSubDirectories) readDirectory(fullPath);
     return;
    }
    if (!regularExpression.test(fullPath)) return;
    //files[directory.substring(directory.lastIndexOf(path.sep))+ path.sep +file] = fullPath
    files[directory.substring(parentPath.length+1)+ path.sep +file] = fullPath
    //console.log(files)
   });
  }

  .......

最终就会按模块输出打包好的js文件,发布是可以实现按需集成。

基于Vue实现微前端的示例代码

到此这篇关于基于Vue实现微前端的文章就介绍到这了,更多相关基于Vue实现微前端内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
关于Vue的路由权限管理的示例代码
Mar 06 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
Jun 08 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 #Javascript
小程序开发之模态框组件封装
Apr 23 #Javascript
详解Vue3中对VDOM的改进
Apr 23 #Javascript
微信小程序实现滑动操作代码
Apr 23 #Javascript
微信小程序图片右边加两行文字的代码
Apr 23 #Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 #Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 #Javascript
You might like
在同一窗体中使用PHP来处理多个提交任务
2006/10/09 PHP
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
php无限遍历目录示例
2014/02/21 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
Python实现发送email的几种常用方法
2014/08/18 Python
python处理csv数据的方法
2015/03/11 Python
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
python中比较两个列表的实例方法
2019/07/04 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
如何使用Pytorch搭建模型
2020/10/26 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
高二英语教学反思
2014/01/19 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
Python基础之常用库常用方法整理
2021/04/30 Python
mysql主从复制的实现步骤
2021/10/24 MySQL
TS 类型兼容教程示例详解
2022/09/23 Javascript