Appearance
微内核 mas-engine
前端微应用体系内核,提供上下文,实现动态加载微应用执行包,组合形成各种业务场景前端页面。
上下文
上下文对象为微应用体系提供公共参数和方法,实现MAUI系统的设置和微应用加载安装,全局事件机制等。 具体定义如下:
js
{
// 禁用WebSocket默认连接
disableWebSocket: false,
// 自动安装依赖应用包(开发时有效)
autoInstallDependencies: true,
// 运行模式,默认为app(PC浏览器访问模式)
mode: 'app',
// 获取微应用定义类
get Application() {},
// 获取内核版本
get version() {},
// 获取已安装的应用列表
get apps() {},
// 根据名称获取App
app(name) {},
// 判断应用是否已经加载
hasApp(name) {},
// 加载更多应用(平台内部使用,不建议在业务模块中使用)
// options 应用定义对象或名称列表
_loadApps(...options) {},
// 安装应用(平台内部使用,不建议再业务模块中使用)
// 使用不当会导致APP启动阶段事件不能正常触发,可能引起逻辑错误
// options 应用的定义对象
_installApp(options) {},
// 加载JS文件(js库,支持在window上赋值暴露模式或umd模块)
// name 模块名称,也就是暴露在window上的属性名称,一般为应用或库暴露名称
// url js所在访问地址
loadJs(name, url),
// 加载css文件
// url css文件访问地址
// id 加载dom的id值,可用于删除样式
// reload 是否重新加载(默认启用缓存,根据url缓存,设为true后,重新加载)
loadStyle(url, id, reload),
// 删除样式资源(防止样式污染)
// id 需要删除样式所在dom的id值,与loadStyle时指定的id值相同
removeStyle(id),
// 触发多个事件
// events为事件名数组
fireEvents: function (events) {},
// 触发事件
// event为事件名
// params为参数
fireEvent: function (event, ...params) {}
}
上下文对象可以通过this.$app.ctx
或maui
方式直接调用
微应用
微应用对象定义为Application
,默认提供微应用相关属性、方法和上下文的引用,具体结构如下:
js
{
// 应用定义信息
options,
// 名称
name,
// 资源所在基础路径
base,
// 版本
version,
// 平台上下文对象
ctx,
// 方法
// 根据名称获取微应用对象
app(name) {}
// 根据相对路径,获取资源加载url路径
path(path) {}
// 根据名称,从定义信息中获取相关配置对象,如果是函数的话,将自动执行并返回结果
get(name) {}
}
微应用通过应用配置对象和上下文构建,构建函数如下:
js
new Application(options, ctx)
其中,options
为配置对象,在微内核中,options
对象主要定义名称、公共方法、动态共享库、依赖应用、启动事件五个部分,具体定义如下:
js
{
// 应用名称,避免重名,一般以团队、项目名称连接形成,如"maui" + "demo"形成:"maui-demo"
name: "maui-demo",
// 定义应用方法
actions: {
addUser(user){
//这里this为当前app对象
return new Promise(resolve){
...
resolve(ret)
}
}
}
// 注册动态(异步)共享库
libs: {
"echarts": "https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.js",
"pdfjsLib": {
root: true,
url: "https://cdn.bootcdn.net/ajax/libs/pdf.js/3.5.141/pdf.js"
}
}
// 定义对其他应用的依赖
dependencies: ["mas-explorer"] // 依赖的应用名称列表
}
其中,公共方法actions
、共享库libs
属性,可以采用对象方式或函数方式定义,具体格式如下:
js
// 对象方式定义,如上
{
...
}
// 函数方式定义,ctx为上下文
function(ctx) {
...
return {
...
}
}
说明
随着微应用的扩展,上下文、应用对象的属性和方法都可能被扩展,同样的应用定义对象中,也可以加入相应的配置信息,如:mas-exporer
中定义了routes、navs,分别设置路由和菜单。
应用名称
应用名称以name
定义,为字符串,为避免重名,一般以团队、项目名称连接形成,如maui
+ demo
形成:maui-demo
应用公用方法
公共方法以actions
节点定义,分为简化模式和标准模式两种定义方式
简化模式定义格式如下:
js
{
adduser(user){
//这里this为当前app对象
return new Promise(resolve){
...
resolve(ret)
}
}
}
标准模式定义格式如下:
js
{
adduser:{
// 是否平台级方法
root: true,
// 是否可以被重复定义
overload: false,
// 定义的执行方法
handler(user){
//这里this为当前app对象
return new Promise(resolve){
...
resolve(ret)
}
}
}
}
简化模式只能定义应用级公共方法,标准模式中,root
属性为true
时,声明为平台级方法,为false
时,和简化模式相同,定义为应用级方法。平台级方法默认不允许多个应用定义重复的方法,如果需要重复定义同名方法(应用加载列表中,靠后的应用定义的同名方法有效),可以通过设置overload
属性为true
。
调用方式:
通过应用调用(本应用) | 通过上下文调用(其他应用) | |
---|---|---|
应用级方法 | this.$app.adduser(user) | this.$app.ctx.app(定义方法的app名称).adduser(user) |
平台级方法 | this.$app.$adduser(user) | this.$app.ctx.$adduser(user) |
动态共享库(异步加载的第三方库或代码分割后的模块)
动态共享库以 libs
节点定义,也分为简化模式和标准模式两种定义方式
简化模式定义格式如下:
js
{
"echarts": "https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.js",
"pdfjsLib": "https://cdn.bootcdn.net/ajax/libs/pdf.js/3.5.141/pdf.js"
}
标准模式定义格式如下:
js
{
// 应用中导入的库
"echarts": {
root: true,
from: import(/* webpackChunkName: "echarts" */ "echarts")
},
// cdn发布的umd模块js文件
"pdfjsLib": {
root: true,
url: "https://cdn.bootcdn.net/ajax/libs/pdf.js/3.5.141/pdf.js"
}
}
简化模式只能定义应用级共享库,标准模式中,root
属性为true
时,声明为平台级共享库,为false
时,和简化模式相同,定义为应用级共享库。 标准模式在没有定义url
时,可通过from
属性,通过import()
方式,把导入的库定义为共享库
共享库使用方式:
js
{
this.$app.$lib_echarts().then((echarts) => {
echarts.init(chartDom).setOptions({...})
})
}
通过应用调用(本应用) | 通过上下文调用(其他应用) | |
---|---|---|
应用级方法 | this.$app.$lib_echarts() | this.$app.ctx.app(定义方法的app名称).$lib_echarts() |
平台级方法 | this.$app.$lib_echarts() | this.$app.ctx.$lib_echarts() |
依赖应用
依赖应用以dependencies
定义,为应用名数组
启动事件
平台启动分为平台初始化 maui-init
, 平台配置 maui-config
, 应用配置 config
, 平台渲染 maui-render
, 平台启动完成 ready
五个阶段。
序号 | 阶段名称 | 事件名 | 阶段常见任务 |
---|---|---|---|
1 | 平台初始化阶段 | maui-init | 设置平台级参数,动态加载需要加载的应用列表 |
2 | 平台配置阶段 | maui-config | 平台扩展应用参数初始化,汇总各类应用声明的公共配置数据等 |
3 | 应用配置阶段 | config | 应用可根据上下文配置自身逻辑 |
4 | 平台渲染阶段 | maui-render | 平台框架渲染,启动默认页面加载 |
5 | 平台启动完成 | ready | 平台框架页面渲染完成,可进入业务操作 |
说明
一般业务应用开发时,仅需要使用 config
和 ready
两个事件即可,前者在页面渲染前初始化数据,后者在平台页面渲染之后(业务页面是否渲染无法确定,如需确保业务页面渲染完成,可在页面的 mounted
事件中处理)执行。