Así que hay esa configuración de objetos de colores, que es algo como esto
color: { main: "red", light: "lightcoral" dark: "darkred" Creo que es un poco engorroso que el patrón color.main aparezca en todas partes, en lugar de simplemente color . Sin embargo, la parte color.variant tiene mucho sentido.
Así que me pregunto cómo puedo crear fácilmente (¡¿y si debería?!) crear un objeto (o cualquier objeto como entidad) en Javascript/Typescript, que los mezcle. Devolver un valor por sí mismo, como una simple variable/captador, y aún tener sus variantes en las propiedades anidadas.
Sin embargo, no estoy preparado para tocar prototipos y cosas demasiado sofisticadas para hacerlo de verdad. Pero sé que todas las posibilidades estarían bien.
Entonces, para ilustrar, el objeto final debería actuar así:
console.log(color) // red console.log(color.light) // lightcoral console.log(color.dark) // darkredEn términos generales: no, porque JavaScript no tiene un tipo fuerte. Considera lo siguiente:
var a = redObject; var b = a;Ahora, ¿por qué b debería ser la cadena "roja" en lugar de una referencia al objeto rojo?
Esto no es cierto para los lenguajes OO fuertemente tipados (no todos de todos modos). Por ejemplo, en C++ puede definir una función de conversión personalizada para cualquier tipo. entonces si tienes
class Color { operator int() const { return 255; } operator char*() const { return "red"; } } Color a(); int b = a; char* c = a;entonces b sería 255 y c sería "rojo", porque el compilador sabe qué función de conversión debe usar según el tipo de variable asignada.
Sin embargo, muchos lenguajes OO tienen una función de conversión implícita para el tipo de cadena, que en la mayoría de los casos se puede anular. Por lo tanto, podría crear una clase Color personalizada con un método toString personalizado para obtener lo que desea, pero tenga en cuenta que esto solo funcionará al convertir el objeto en una cadena, no para cada asignación de variable:
<span id="xx"></span> <script> function Color(main, light, dark) { this.main = main; this.light = light; this.dark = dark; } Color.prototype.toString = function() { return this.main; }; var redObject = new Color("red", "lightcoral", "darkred"); console.log(redObject); // console displays: Color {main: "red", light: "lightcoral", dark: "darkred"} console.log(''+redObject); // console displays: red console.log(redObject.light); // console displays: lightcoral console.log(redObject.dark); // console displays: darkred $('#xx').text(redObject); // the span displays: red </script>Otra opción es usar una función, que da mucho más control, pero no la recomiendo de todos modos:
function Color(main, light, dark) { var result = function() { return main; }; result.light = light; result.dark = dark; return result; } var redObject = Color("red", "lightcoral", "darkred"); console.log(redObject()); // console displays: red console.log(redObject.light); // console displays: lightcoral console.log(redObject.dark); // console displays: darkredUna mejor manera es tener un mapa de colores y usar una función solo para consultar variantes claras y oscuras:
var colors = {}; function defineColor(main, light, dark) { colors[main] = {main: main, light: light, dark: dark}; } function light(color) { return colors[color].light; } function dark(color) { return colors[color].dark; } defineColor("red", "lightcoral", "darkred"); var color = "red"; console.log(color); // console displays: red console.log(light(color)); // console displays: lightcoral console.log(dark(color)); // console displays: darkred