字典组件封装实践思路浅析

前言

我们在业务开发中，大量字典选择场景，于是产生了个想法 —— 能否封装一个通用型的字典选择组件呢。

期望

• 组件支持select/radio/checkbox，并可扩展不同的UI选择组件；
• 组件字典数据缓存，避免重复接口请求；
• 相同字典组件同时加载，请求并发（n个相同类型的字典同时加载）

实现

这里使用Vue实现，基于ElementUI组件库，但不限于此库。有如下结构：

|-- dict
  |-- config.js // 配置组件映射表
  |-- DictNormal.vue // 组件文件
  |-- mixins.js // 通用逻辑可抽离出来，方便后续独立使用

动态组件

我们期望可以支持select/radio/checkbox等交互组件，使用component实现动态组件。分析选择组件应用时的模板结构，模板结构可约定为：

component is="el-select"
	component is="el-option"

动态组件可以通过is来设定，组件列表配置在config.js中：

// config.js 结构示例
export const tagsMap = {
  'select': {
    tag: 'el-select',
    optionTag: 'el-option',
    optAttrs: {
      label: 'value',
      value: 'key',
    },
  },
  'checkbox': {
    tag: 'el-checkbox-group',
    optionTag: 'el-checkbox',
    optAttrs: {
      label: 'key',
      inner: 'value',
    },
  },
}

组件如下：

<template>
  <component
    :is="tagIns.tag"
    v-on="listeners"
    v-bind="$attrs"
    @change="handleChange"
  >
    <component
      :is="tagIns.optionTag"
      v-for="(opt, idx) in dict"
      :key="opt.key + '-' + idx"
      v-bind="genOptAttrs(opt)"
    >
      <slot
        v-if="genOptAttrs(opt).inner"
        :name="`option_${opt.key}_${idx}}}}`"
        v-bind="genOptAttrs(opt)"
      >
        {{ genOptAttrs(opt).inner }}
      </slot>
    </component>
  </component>
</template>
<script>
import Mixins from './mixins';
import { tagsMap } from './config';
export default {
  name: 'DictNormal',
  mixins: [Mixins],
  props: {
    // 组件类别
    tag: {
      type: String,
      default: 'select',
    },
    // 定制选项标签上挂载的属性
    optAttrs: {
      type: [Function, Object],
    },
  },
  computed: {
    tagIns() {
      let hit = tagsMap[this.tag];
      return hit;
    },
  },
  methods: {
    /**
     * ignore
     */
    genOptAttrs(itm) {
      if (typeof this.optAttrs == 'function') {
        return this.optAttrs.call(this, itm) || {};
      }

      let attrs = {};
      let optAttrs = this.tagIns.optAttrs;

      if (typeof this.optAttrs == 'object') {
        optAttrs = this.optAttrs;
      }

      for (let k in optAttrs) {
        attrs[k] = itm[optAttrs[k]];
      }
      return attrs;
    },
  },
};
</script>

字典数据缓存

缓存位置暂只考虑挂在该组件，也可自定挂载位置。

// mixins.js
const cacheDict = {}; // 缓存

export default {
  props: ['dictType'],
  data() {
    return {
      dict: [], // 字典选项数据
    }
  },
  methods: {
    getDict(type){ return cacheDict[type] },
    fetchDictList(type) { /* 接口请求 */ },
    /** 处理响应数据 */
    responseHandler(res) {
      if (res.error === 0) {
        this.commit(this.dictType, res.data);
      }
    },
    /** 设置数据 */
    commit(key, data = []) {
      this.$emit('on-data', data, key);
      cacheDict[key] = data;
      this.dict = [...data];
    },
  }
}

同字典多个并行加载

现有dict-type="grade"字典组件，在表单有两个地方用到，如下：

el-form
	el-form-item prop="onlineGrade"
		DictNormal dict-type="grade"
	el-form-item prop="offlineGrade"
		DictNormal dict-type="grade"

模拟一下，页面初始加载：

可以看到，请求多次触发。为解决这个问题，第一次请求发出，需要做promise初始设置，第二次请求的时候，如果promise已经存在，则直接发送。这时候的promise需要映射到字典类型上。关键代码如下：

// mixins.js
import axios from 'axios';

const cachePromise = {};
// 接口模拟方法
const fetchDict = ({type}) => axios.get('/dict', params: { type })

export default {
  props: ['dictType'],
  created() {
    this.initPromise(this.dictType);
  },
  async initPromise(dictType) {
    if (!cachePromise[dictType]) {
      this.__promise = null;
      cachePromise[dictType] = this.fetchDictList(dictType);
    }
    this.__promise = this.__promise || cachePromise[dictType];
    this.responseHandler(await this.__promise);
  },
  /** 拉取字典数据 */
  async fetchDictList(dictType) {
    if (this.__promise && this.cache) {
      return await this.__promise;
    }
    return await fetchDict({ type: dictType });
  },
  /** 处理响应数据 */
  responseHandler(res) {
    if (res.error === 0) {
      this.commit(this.dictType, res.data);
    }
  },
}

总结

大致的思路就是上面所述的：

• Promise的使用，解决多个相同的请求触发
• 缓存来减少重复请求
• component动态选用组件

如果拓展其他字典交互选择组件（比如tag，icon等），可以开发好后内层、外层组建后，引用配置到config中以供使用。更甚者复用mixins，来快速实现缓存、同时请求等字典组件的基础能力。

感谢阅读，有问题欢迎讨论~