前端单页应用微服务化解决方案7 - 静态数据共享

时间 2019-11-21

标签前端单页应用微服解决方案静态数据共享栏目网站开发繁體版

原文原文链接

文章转发自 alili.tech前端

在前面的一些介绍,相信你对微前端已经有了一个相对完整的认知. 下面介绍一下,再开发过程当中个人一些小技巧与处理方法.git

动态入口

当有新的子模块会挂载到项目中的时候,在UI中确定须要一个新的入口进入子模块的UI. 而这样一个入口,是须要动态生成的.github

例如:图中左边的菜单,不该该是代码写死的.而是根据每一个模块提供的数据自动生成的.redux

否则每次发布新的模块,咱们都须要在最外面的这个框架修改代码.这样就谈不上什么独立部署了.框架

静态数据共享

想要达到上面所的效果,咱们能够这样作.frontend

// ~/common/menu.js

import { isUrl } from '../utils/utils'
let menuData = [
  {
    name: '模块1',
    icon: 'table',
    path: 'module1',
    rank: 1,
    children: [
      {
        name: 'Page1',
        path: 'page1',
      },
      {
        name: 'Page2',
        path: 'page2',
      },
      {
        name: 'Page3',
        path: 'page3',
      },
    ],
  }
]
let originParentPath = '/'
function formatter(data, parentPath = originParentPath, parentAuthority) {
    ...
}

// 在这里,咱们对外导出 这个模块的菜单数据
export default menuData

复制代码

// Store.js
import { createStore, combineReducers } from 'redux'
import menuDate from './common/menu'
import createHistory from 'history/createBrowserHistory'
const history = createHistory()
...

// 咱们拿到数据以后,用一个reducer函数返回咱们的菜单数据.
function menu() {
  return menuDate
}

...


// 最终以Store.js对外导出咱们的菜单数据,在注册的时候,每一个应用均可以拿到这个数据了
export const storeInstance = createStore(combineReducers({ namespace: () => 'list', menu, render, to }))
复制代码