基于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 相关文章推荐
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 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
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
Python中修改字符串的四种方法
2018/11/02 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
Python接收手机短信的代码整理
2020/08/02 Python
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
会计专业自荐信
2013/12/02 职场文书
应急管理培训方案
2014/06/12 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
2015年推普周活动方案
2015/05/06 职场文书
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电
MySQL数据管理操作示例讲解
2022/12/24 MySQL