Soy nuevo en JavaScript, actualmente estoy aprendiendo clases.
Hice una clase simple que crea un cuadrado con un tamaño y color aleatorio:
class Square { constructor(maxSize = 150, minSize = 50) { this.maxSize = maxSize; this.minSize = minSize; this.size = this.setRandomSize(); this.color = this.randomColor(); } createShape() { const square = document.createElement('div'); square.classList.add('square'); document.body.appendChild(square); square.style.cssText = ` width: ${this.size}px; height: ${this.size}px; background-color: ${this.color}; `; } randomNumber(max, min = 0) { return Math.floor(Math.random() * (max - min) + min); } setRandomSize() { return this.randomNumber(this.maxSize, this.minSize); } randomColor() { return `hsla(${this.randomNumber(360)}, 50%, 40%, .7)`; } } new Square().createShape(); Como puede ver en el código anterior, tengo 2 métodos randomNumber y setRandomColor que no usan ninguna instancia o propiedad de método.
Me pregunto cuál es el enfoque o los beneficios recomendados (aparte de la portabilidad) entre tener estas funciones dentro o fuera de la clase (como se muestra a continuación). En otras palabras, ¿se recomienda mantener dentro de la clase los métodos que están intrínsecamente relacionados solo con el objeto (bloque de código 2) o los métodos que permiten que la clase funcione como "independiente" (bloque de código 1)?
class Square { constructor(maxSize = 150, minSize = 50) { this.maxSize = maxSize; this.minSize = minSize; this.size = this.setRandomSize(); this.color = randomColor(); } createShape() { const square = document.createElement('div'); square.classList.add('square'); document.body.appendChild(square); square.style.cssText = ` width: ${this.size}px; height: ${this.size}px; background-color: ${this.color}; `; } setRandomSize() { return randomNumber(this.maxSize, this.minSize); } } function randomNumber(max, min = 0) { return Math.floor(Math.random() * (max - min) + min); } function randomColor() { return `hsla(${randomNumber(360)}, 50%, 40%, .7)`; } new Square().createShape();Tuve una confusión similar cuando comencé a aprender a programar. Dado que es de clase, me gustaría resaltar SÓLIDO aquí.
Responsable único: una clase debe hacer una cosa. ¿El trabajo de tu clase es crear un número aleatorio? Creaste la clase porque querías un cuadrado, no un generador de tamaño aleatorio.
Además, si coloca las funciones fuera de la clase y las usa allí, su clase se acoplará con esas funciones. ¿Qué hará si necesita usar color rgb en lugar de hsla? ¿Otra clase? Entonces, menos acoplamiento aumentará la calidad de su clase.
Entonces, ¿cómo escribiría la clase?
class Square { constructor(size, color){ this.size = size; this.color = color; this.square = document.createElement('div'); this.square.classList.add('square'); document.body.appendChild(this.square); this.square.style.cssText = ` width: ${this.size}px; height: ${this.size}px; background-color: ${this.color}; `; } } function randomNumber(max, min = 0) { return Math.floor(Math.random() * (max - min) + min); } function randomColor() { return `hsla(${randomNumber(360)}, 50%, 40%, .7)`; } const size = randomNumber(100, 50) const color = randomColor() const mySquare = new Square(size, color)