2021-09-01 模块菜单的加载、缓存和各种展现形式

直接从json加载

最简单的方法就是用 import 的方式从json文件加载，很方便。

import { menu } from '/jsonPlat/menu.json'

只是这样的方式不容易实现动态修改的功能，比如热更新。
因为 vite2 会把 json格式变成 js 的形式，然后再加载进来。

如果想要动态，或者热更新，那么就需要用 axios 加载 json文件。
这样项目发布之后，才可以通过直接修改json文件的方法来实现热更新的效果。

从webSQL加载

在开发阶段，菜单并不是固定不变的，需要维护修改，如果直接改json文件的话，要么手撸，要么用代码实现。

手撸的话太麻烦，用代码维护的话，需要读写权限，也有点麻烦。

所以开发阶段，我们可以把菜单放入webSQL（当然也可以存入MySQL），这样就可以很方便的动态维护。

webSQL里的菜单

从indexedDB加载

为啥还弄了个indexedDB呢？有两个目的：

• 实现客户端的缓存。
• 统一开发模式和生产模式里，组件的使用接口。

从后端加载json文件，有两个问题，一个是会受到网速的影响，另一个是浏览器的缓存问题。
浏览器会对下载的json文件进行缓存，这个本来是好事，可以避免每次都从服务器加载。

但是按F12看看“网络”情况，从缓存加载json文件，还是需要时间，虽然很短，但是还是要进行判断检查是否过期，是否需要重新加载，然后从缓存加载，缓存又分为内存和硬盘，内存很快几乎不用时间，硬盘就相对慢了。

然后就是更新缓存的问题，如果实现热更新，服务器上面的json文件更新了，但是浏览器还是顽固的用本地缓存文件，这个怎么办？

不可控因素太多，所以还是干脆在第一次打开的时候，从服务器下载json文件，然后存入indexedDB。可以避免很多麻烦，还完全可控，虽然可以写不少代码，但是能用代码解决的都不是问题。

indexedDB的菜单

存入状态

不是有缓存了吗？为啥又来个状态？
这个说起来真的是一言难尽！

• indexedDB是异步操作，比较麻烦。
• indexedDB的读取速度实在太感人了，等着读取出来再渲染，页面有明显的延迟感，这个不能忍。

所以只好干脆存入状态里面，是需要慢一次，以后就省心了 。

状态可以直接读取，省事，全局可用，这样就简单了很多。

变成下拉列表

菜单除了左侧的形式之外，还需要做成各种形式，比如下拉列表框的形式。

如果菜单项比较少的话，我们可以用一个下拉列表框来实现，我们使用 el-select-v2 的自定义模板功能做一个缩进的效果，这样就很好分辨菜单的等级和归属关系了，如下图。

效果

一个选择框的多级菜单

实现方式

• 一个循环即可
  因为数据源就是一个数组，单层的，所以一次遍历即可，不用递归，不用子组件。

• 缩进
  那么二级菜单的缩进效果是如何实现的呢？
  我们可以使用 css 的 padding-left 进行缩进处理，缩进多少由 level 决定。

处理数据源

// 设置上级模块
const parentModule = moduleMeta.itemMeta[100020]
parentModule.controlType = 163
parentModule.optionList.length = 0

state.menus.forEach(menu => {
  if (menu.moduleLevel === 1) {
    // 一级
    parentModule.optionList.push(
      {
        value: menu.id,
        label: menu.title,
        level: menu.moduleLevel
      }
    )
  } else {
    // 二级，找到父级，插入
    const index = parentModule.optionList.findIndex((a) => a.id === menu.parentId)
    parentModule.optionList.splice(index, 0, {
      value: menu.id,
      label: menu.title,
      level: menu.moduleLevel
    })
  }
})

因为是固定二级数的菜单，所以处理代码比较简单。

这里并不是变成嵌套的模式，而是先push第一级的菜单，然后第二级的菜单，先找到父级菜单的数组下标，然后用 splice 在下标后面插入二级菜单。
这样数组的顺序就是：一级菜单，一级菜单的下属二级菜单。

变成联动的下拉列表框

菜单项少的话一个下拉列表框就可以了，但是如果多的话，选起来会比较麻烦，所以我们可以做成两个联动的下拉列表框。

我们可以使用 el-cascader 来实现。

效果

多级联动

处理数据源

parentModule.controlType = 162
parentModule.optionList.length = 0

state.menus.forEach(menu => {
  if (menu.moduleLevel === 1) {
    // 一级
    parentModule.optionList.push(
      {
        value: menu.id,
        label: menu.title,
        children: []
      }
    )
  } else {
    // 二级，找到父级的 children ，push
    const index = parentModule.optionList.findIndex((a) => a.value === menu.parentId)
    parentModule.optionList[index].children.push({
      value: menu.id,
      label: menu.title
    })
  }
})

按照 el-cascader 的要求做成嵌套的数组即可。

这样的话，菜单项多了也不怕。