Erstellen Sie mit JavaScript eine leistungsstarke Aufzählung mit Feldern und Methoden wie Java

Java-Aufzählung

Java Enum ist sehr komplex und Sie können Enum mit mehreren Feldern und Methoden wie folgt erstellen.

Java.Color.java

enum Color {
	RED("rot", 255, 0, 0),
	YELLOW("Gelb", 255, 255, 0),
	GRAY("grau", 155, 155, 155);
	Color(String name, int r, int g, int b) {
		this.name = name;
		this.r = r;
		this.g = g;
		this.b = b;
	}
	public String name;
	public int r, g, b;
	public String toHexCode() {
		return String.format("#%02x%02x%02x", r, g, b);
	}
}

System.out.println(Color.YELLOW.toHexCode()); // => "#ffff00"
System.out.println(Color.GRAY.name); // => "grau"

In JavaScript implementiert

Wenn Sie dies gehorsam mit JavaScript implementieren, wird es sicherlich so aussehen.

JavaScript.color.js

var Color = (function() {
  var InnerType = function(name, r, g, b) {
    this.name = name;
    this.r = r;
    this.g = g;
    this.b = b;
  };
  InnerType.prototype.toHexCode = function() {
    return '#' + ('00' + this.r.toString(16)).slice(-2) + ('00' + this.g.toString(16)).slice(-2) + ('00' + this.b.toString(16)).slice(-2);
  };
  return {
    RED : new InnerType('rot', 255, 0, 0),
    YELLOW : new InnerType('Gelb', 255, 255, 0),
    GRAY : new InnerType('grau', 155, 155, 155)
  };
})();

console.log(Color.YELLOW.toHexCode()); // => "#ffff00"
console.log(Color.GRAY.name); // => "grau"

Es sieht auf den ersten Blick gut aus, aber ... In Java ist es natürlich, diese Aufzählung als Schlüssel für Map zu verwenden.

Map<Color, Integer> colorNums = new HashMap<>();
colorNums.put(Color.RED, 10);
colorNums.put(Color.YELLOW, 20);
colorNums.put(Color.GRAY, 30);
System.out.println(colorNums.get(Color.RED)); // => "10"
System.out.println(colorNums.get(Color.YELLOW)); // => "20"

In der JavaScript-Version

var colorNum = {};
colorNum[Color.RED] = 10;
colorNum[Color.YELLOW] = 20;
colorNum[Color.GRAY] = 30;
console.log(colorNum[Color.RED]); // => "30" !!?
console.log(colorNum[Color.YELLOW]); // => "30" !!?

Und es verhält sich nicht wie beabsichtigt. Da Color.RED, Color.YELLOW und Color.GRAY Objekte sind, wird die Standardeinstellung toString des Objekts aufgerufen, wenn es zum Schlüssel des assoziativen Arrays wird und alle drei zu "[Objektobjekt]" werden. Ursache.

Implementiert in JavaScript (modifizierte Version)

Wenn Sie also versuchen, für jede mit toString eine eindeutige Zeichenfolge wie folgt zurückzugeben, funktioniert dies wie beabsichtigt.

JavaScript.color_fix.js

var Color = (function() {
  const InnerType = function(name, r, g, b, toStringValue) {
    this.name = name;
    this.r = r;
    this.g = g;
    this.b = b;
    this.toString = function() {
      return toStringValue;
    };
  };
  InnerType.prototype.toHexCode = function() {
    return '#' + ('00' + this.r.toString(16)).slice(-2) + ('00' + this.g.toString(16)).slice(-2) + ('00' + this.b.toString(16)).slice(-2);
  };
  return {
    RED : new InnerType('rot', 255, 0, 0, 'RED'),
    YELLOW : new InnerType('', 255, 255, 0, 'YELLOW'),
    GRAY : new InnerType('', 155, 155, 155, 'GRAY')
  };
})();

var colorNum = {};
colorNum[Color.RED] = 10;
colorNum[Color.YELLOW] = 20;
colorNum[Color.GRAY] = 30;
console.log(colorNum[Color.RED]); // => "10"
console.log(colorNum[Color.YELLOW]); // => "20"

JavaScript.color_fix_es6.js

const Color = (() => {
  const InnerType = function(name, r, g, b) {
    this.name = name;
    this.r = r;
    this.g = g;
    this.b = b;
    const sym = Symbol();
    this.toString = () => sym;
  };
  InnerType.prototype.toHexCode = function() {
    return '#' + ('00' + this.r.toString(16)).slice(-2) + ('00' + this.g.toString(16)).slice(-2) + ('00' + this.b.toString(16)).slice(-2);
  };
  return {
    RED : new InnerType('', 255, 0, 0),
    YELLOW : new InnerType('Es war gräulich. Implementiert in JavaScript (ES6-Version) Es ist jedoch etwas enttäuschend, die Zeichenfolge für toString selbst anzugeben. Wenn Sie also ES6 verwenden können, ist es besser, sie mit Symbol () zu automatisieren. rot', 255, 255, 0),
    GRAY : new InnerType('grau', 155, 155, 155)
  };
})();

Javas Aufzählung ist die stärkste, aber die Flexibilität von JavaScript, mit der fast dasselbe erreicht werden kann, ist gut.