如何优雅的使用枚举功能——Constants

背景

在项目中，或多或少的会遇到使用枚举/快码/映射/字典，它们一般长这个样子。（PS：我不知道怎么称呼这个玩意）

在一些需要展示的地方，会使用下面的代码来展示定义。

<div>{{ statusList[status] }}</div>

而在代码中，又会使用下面的形式进行判断。这样写会让代码里充斥着许多的 'draft' 字符串，非常不利于管理。

if (status === 'draft') {

    // do sth...

}

基于这种情况，在使用时会先声明一个变量。

const DRAFT = 'draft'


if (status === DRAFT) {

    // do sth...

}

为了应对整个项目都会使用到的情况，会这样处理。

export const statusList = {

  draft: '草稿',

  pending: '待处理',

}


export const statusKeys = {

  draft: 'draft',

  pending: 'pending',

}

看了隔壁后端同事的代码，在 Java 里，枚举的定义及使用一般是如下形式。于是我就有了写这个工具类的想法。

public enum Status {

	DRAFT('draft', '草稿');


    Status(String code, String name) {

    	this.code = code;

        this.name = name;

    }


    public String getCode() {

        return code;

    }


    public String getName() {

        return name;

    }

}


public void aFunction() {

    const draftCode = Status.DRAFT.getCode();

}

Constants

直接上代码

const noop = () => {}


class Constants {

  constructor(obj) {

    Object.keys(obj).forEach((key) => {

      const initValue = obj[key];

      if (initValue instanceof Object) {

        console.error(`Warnning: this util only support primitive values, current value is ${JSON.stringify(initValue)}`)

        // throw new Error(`Warnning: this util only support primitive values, current value is ${JSON.stringify(initValue)}`)

      }

      const newKey = `_${key}`;

      this[newKey] = initValue;

      Object.defineProperty(this, key, {

        configurable : true,

        enumerable : true,

        get: function() {

          const value = this[newKey];

          const constructorOfValue = value.constructor;

          const entry = [key, value];

          ['getKey', 'getValue'].forEach((item, index) => {

            constructorOfValue.prototype[item] = () => {

              constructorOfValue.prototype.getKey = noop;

              constructorOfValue.prototype.getValue = noop;

              return entry[index];

            }

          })

          return value;

        },

        set: function(newValue) {

          this[newKey] = newValue;

        }

      })

    });

  }

}

测试

const testValues = {

  draft: '草稿',

  id: 1,

  money: 1.2,

  isTest: true,

  testObj: {},

  testArray: [],

}

const constants = new Constants(testValues)


const test = (result, expect) => {

  const isExpected = result === expect

  if (isExpected) {

    console.log(`PASS: The result is ${result}`)

  } else {

    console.error(`FAIL: the result is ${result}, should be ${expect}`)

  }

}


test(constants.draft, '草稿')

test(constants.draft.getKey(), 'draft')

test(constants.draft.getValue(), '草稿')


test(constants.id, 1)

test(constants.id.getKey(), 'id')

test(constants.id.getValue(), 1)


test(constants.money, 1.2)

test(constants.money.getKey(), 'money')

test(constants.money.getValue(), 1.2)


test(constants.isTest, true)

test(constants.isTest.getKey(), 'isTest')

test(constants.isTest.getValue(), true)

a = 'test'

test(a.getKey(), undefined)

test(a.getValue(), undefined)