JavaScript可扩展枚举封装

fevin 发布于2019-08-23 13:42 / 2045人阅读

摘要：枚举结构通常我们定义的枚举值使用如果需要包含其他属性，我们可以添加额外的对象使用封装下面我们进行封装枚举类栗子步骤步骤通过获取当前列的值步骤初始化缺少必要的或根据获取对象值状态值获取枚举数组使用方法步骤步骤步骤

枚举结构

通常我们定义的枚举值：

var SizeEnum = {
  SMALL: 1,
  MEDIUM: 2,
  LARGE: 3,
};

使用var mySize = SizeEnum.SMALL;

如果需要包含其他属性，我们可以添加额外的对象

var SizeEnum = {
  SMALL: 1,
  MEDIUM: 2,
  LARGE: 3,
  properties: {
    1: {name: "small", value: 1, code: "S"},
    2: {name: "medium", value: 2, code: "M"},
    3: {name: "large", value: 3, code: "L"}
  }
};

使用：

var mySize = SizeEnum.MEDIUM;
var myCode = SizeEnum.properties[mySize].code; // myCode == "M"

封装

下面我们进行封装：

/**
 * 枚举类
 *
 * @author harris.xc
 * @param props  [{key: number|string, value: number|string, ...other}]
 * 栗子：
 *  const StepEnum = new Enum([
 *    { key: "STEP1", name: "步骤1", value: 1 },
 *    { key: "SETP2", name: "步骤2", value: 2 },
 *  ]);
 *
 * @class Enum
 *
 * @method get(value) 通过value获取当前列的值
 *                    return { key: "SETP2", name: "步骤2", value: 2 }
 *
 * @returns {key1: number|string, key2: number|string}
 * {
 *   CREATE: 1,
 *   APPROVED: 2,
 * }
 */
export default class Enum {
  /**
   * 初始化
   * @param {Array} props []
   */
  constructor(props = []) {
    this.__props = {};
    if (props.length) {
      props.forEach((element) => {
        if (element.key && element.value) {
          this[element.key] = element.value;
          this.__props[element.value] = element;
        } else {
          console.error("Enum缺少必要的key或value");
        }
      });
    }
  }

  /**
   * 根据value获取对象值
   * @param {string|number} value 状态值
   */
  get(value) {
    return this.__props[value];
  }
 
  /**
   * 获取枚举数组
   */
  getArray() {
    const arr = [];
    for (const key in this.__props) {
      if (Object.prototype.hasOwnProperty.call(this.__props, key)) {
        arr.push(this.__props[key]);
      }
    }
    return arr;
  }
}

使用方法：

let SizeEnum = new Enum([
    { key: "STEP1", name: "步骤1", value: 1 },
    { key: "SETP2", name: "步骤2", value: 2 }
]);

SizeEnum.STEP1; // 1
SizeEnum.get(SizeEnum.STEP1); // { key: "STEP1", name: "步骤1", value: 1 }

[https://stijndewitt.com/2014/...](

云服务器 GPU云服务器可扩展云存储可扩展vps 可扩展数据库可扩展服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99417.html

JavaScript-面向对象、Object类型

摘要：面向对象面向对象编程的全称为简称。面向对象编程是用抽象方式创建基于现实世界模型的一种编程方式。面向对象编程可以看做是使用一系列对象相互协作的软件设计。面向对象编程的三个主要特征是封装继承多态。面向对象面向对象编程的全称为Object Oriented Programming,简称OOP。面向对象编程是用抽象方式创建基于现实世界模型的一种编程方式。面向对象编程可以看做是使用一系列对象...

amuqiao 2019-08-26 12:11 评论0 收藏0
JavaScript面向对象...Object类型...

摘要：面向对象面向对象是什么面向对象编程简称相似的对象称为类面向对象编程的三个主要特征是封装继承多态所有的程序是由一定的属性和行为对象组成的不同的对象的访问通过函数调用来完成对象间所有的交流都是通过方法调用通过对封装对象数据提高复用率是一种基于原面向对象面向对象是什么面向对象编程简称OOP 相似的对象称为类面向对象编程的三个主要特征是:1.封装 2.继承 3.多态所有的程序是由一定...

keithyau 2019-08-26 12:11 评论0 收藏0
【JavaScript】面向对象

摘要：一面向对象概述面向对象是什么是使用一系列对象相互协作软件设计，目的是在编程中促进更好灵活性和可维护性，凭借对模块化重视，面向对象代码开发更简单，容易理解面向对象的有主要特征是封装继承多态封装封装主要用于叙述对象中所包含封装的内容，由两部分组 JS(JavaScript)一.面向对象；概述；面向对象是什么；是使用一系列对象相互协作软件设计，目的是在编程中促进更好灵活性和可维护性，凭借...

gself 2019-08-26 12:11 评论0 收藏0
JavaScript学习第七天笔记（面向对象）

摘要：面向对象概述面向对象编程的全称是简称为。面向对象编程是用抽象方式创建给予现实世界模型的一种编程模式。构造函数构造函数又被称为构造器或对象模板，是创建对象的一个方法。面向对象概述面向对象编程的全称是Object Oriented Programming,简称为OOP。面向对象编程是用抽象方式创建给予现实世界模型的一种编程模式。面向对象编程可以面向对象编程的三个主要特征是:1.封装 ...

Tychio 2019-08-26 12:11 评论0 收藏0
JavaScript中的面向对象个人分享

摘要：面向对象面向对象的概念所谓面向对象就用抽象方式创建基于显示世界模型的一种变成模式面向对象编程可以看做是使用一系列对象互相协作的软件设计备注面向对象全称简称面向对象编程的主要三个特征是封装所谓封装就是按要求使用得到对象的结果相关数据用于存储面向对象面向对象的概念所谓面向对象就用抽象方式创建基于显示世界模型的一种变成模式,面向对象编程可以看做是使用一系列对象互相协作的软件设计备注...

DirtyMind 2019-08-26 12:11 评论0 收藏0