Skip to content
本页目录

微内核 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.ctxmaui方式直接调用

微应用

微应用对象定义为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平台框架页面渲染完成,可进入业务操作

说明

一般业务应用开发时,仅需要使用 configready 两个事件即可,前者在页面渲染前初始化数据,后者在平台页面渲染之后(业务页面是否渲染无法确定,如需确保业务页面渲染完成,可在页面的 mounted 事件中处理)执行。

内部资料,请勿外传