React App Framework - 8. Others-IconFont

主要框架内容其实已经基本完善了, 也已经上线了几个子应用了, 以后就逐渐记录相关优化和杂项内容了, 今天记录一个基础的IconFont和一个简单的HashColor实现

IconFont

其实这个组件antd官网已经给出标准实现了, 就不赘述了, 唯一有点特殊的是, 我们项目有两套风格的图标, 可以实现在打包时指定使用哪套IconFont, 实际上就是通过webpack.DefinePlugin注入到环境变量中然后打包时读取的

import { createFromIconfontCN } from '@ant-design/icons';
import CONSTANT from '../../config/constant';

const IconFont = createFromIconfontCN({
  scriptUrl: CONSTANT.ICON_FONT_URL,
});

export default IconFont;

HashColor

这是一个比较常见的需求: 需要对不同的Tag标记不同的颜色, 但是相同的Tag的颜色需要一样, 所以不能简单的用index取模或者排序实现, 需要实现一个简单的Hash函数

const DJBHash = (str: string): number => {
  let hash = 5381;
  _.map(str, (char) => {
    hash = (hash << 5) + hash + char.charCodeAt(0);
  });
  return hash;
};

const hash = {
  DJBHash: DJBHash,
};

export default hash;

// 使用
const color = GLOBAL_CONSTANT.ANTD_TAG_COLORS[Math.abs(UTILS.hash.DJBHash(tag) % GLOBAL_CONSTANT.ANTD_TAG_COLORS.length)];