前端單頁應用微服務化解決方案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 }))
複製代碼