前端微服务框架single-spa

javascript（前端）微服务

single-spa是一个可以让使用多个使用javascript语言框架的构建的应用集成在一起的框架, 使用signle-spa架构可以带来一下好处：

架构概况

single-spa的灵感来源于现代前端框架的组件生命周期以及使用全部应用的生命周期。它诞生于Canopy每次被卡在希望使用React + react-router来替换我们Angluar + ui-router应用的时候，现在single-spa支持
几乎支持所有前端框架。由于许多前端框架短命而使javascript(或者说前端)臭名昭著（ps.三天出一新框架，宝宝心里苦），我们决定让使用任何前端框架这件事变得更简单：

single-spa apps 考虑基于以下：

  • 应用集, 每个应用应该是独立的单体应用（SPA）。每个应用应该能相应url路由时间并且知道如何从dom中初始化启动，mount，unmount。复杂的单体（页）应用SPA与single-spa应用集主要区别在于single-spa应用集必须要让多个应用共存在同一html页面，而不是让每个应用拥有自己的html页面下。

例如，两个分别基于react和angluar的应用。当他们处于激活状态的时候，监听路由事件，并将对应的内容放置dom中。当非激活状态的时候，不再监听路由变化，并且将内容从dom中移除。

  • 一个single-spa-config, 一个html应用以及多个注册应用构成一个single-spa应用。每个应用注册需要以下三方面：
    1. 名字
    2. 加载应用的方法
    3. 判断应用何时处于激活/非激活状态的方法

使用sing-spa会有多困难？

single-spa 支持ES5, ES6+, TypeScript, Webpack, SystemJS, Gulp, Grunt, Bower, ember-cli, 甚至任何可能构建的系统。你可以使用npm, jsnpm来安装使用，或者直接使用"<script>"标签。

我们的目标是希望（使用single-spa）越简单越好。但是我们需要指出的是single-spa的是一个增强架构，它完成的事情跟前端框架完成的业务是有区别的。（备注single-spa不是为了实现业务逻辑）

如果你的项目不是从头开始，你必须合并SPA(migrate your SPA) 来变成single-spa应用

（译）

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue