Skip to content

Commit 38cd078

Browse files
authored
Merge pull request #34 from Aleluyo/main
Investigacion: Refactorización de código orientado a eventos en JavaScript
2 parents 6c64c41 + 0c0f855 commit 38cd078

File tree

2 files changed

+168
-0
lines changed

2 files changed

+168
-0
lines changed
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# ANEXO
2+
## Asistencia de IA: Consulté a ChatGPT sobre cómo configurar el ropositorio en mi cuenta de GitHub
3+
4+
**Herramienta:** ChatGPT (GPT-5)
5+
6+
**Fecha:** 19-Sep-2025
7+
8+
**Plataforma:** Terminal Mac OS
9+
10+
**Reflexion personal:** Chat GPT me ayudo a entender la forma de como clonar el repositorio a mi cuenta, realizar rutas personalizadas y la creacion de archivos .MD
11+
12+
## Asistencia de IA: Consulte a Chat GPT acerca de ejemplos sencillos de codigo en JavaScript por los métodos de: **Extracción**, **Cambio de nombre de variables**, **Simplificar de condiciones**
13+
14+
**Herramienta:** ChatGPT (GPT-5)
15+
16+
**Fecha:** 19-Sep-2025
17+
18+
**Plataforma:** Visual Code
19+
20+
**Reflexion personal:** Chat GPT me ayudo a generar ejemplos de los metodos de refactorización que investigue con el lenguaje JavaScript de esta manera completar la informacion
21+
22+
23+
Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
# Alumno: Estrada Solano Abraham 22211899
2+
# Refactorización de código orientado a eventos en JavaScript
3+
4+
La refactorización es el proceso de mejorar la estructura y el diseño del código sin cambiar su funcionamiento. El objetivo es hacer que el código sea más limpio, fácil de entender y sencillo de mantener. Esto no significa añadir nuevas funciones o corregir errores, sino organizar mejor el código para que sea más eficiente y escalable.
5+
6+
La refactorización en los sistemas de streaming garantiza que los componentes que gestionan el procesamiento de datos en tiempo real sean eficientes, flexibles y fáciles de mantener a lo largo del tiempo. A medida que los sistemas de streaming se amplían, un código mal estructurado puede convertirse en un obstáculo, lo que provoca una degradación del rendimiento o dificultades para añadir nuevas funciones. Mediante la refactorización, los desarrolladores pueden optimizar los flujos de datos, mejorar la utilización de los recursos y simplificar la depuración y la supervisión, lo que garantiza que los sistemas de streaming sigan siendo fiables incluso cuando aumentan los volúmenes de datos.
7+
8+
En este contexto, la refactorización no solo ayuda a los desarrolladores a mantener un código limpio, sino que también respalda la escalabilidad y la fiabilidad de toda la arquitectura de streaming, lo que la convierte en una práctica crucial en entornos con un uso intensivo de datos.
9+
10+
---
11+
12+
## La importancia de la refactorización
13+
14+
### Mantener un código limpio
15+
En cualquier proyecto de software de gran envergadura, el código limpio se refiere a un código bien estructurado, legible y fácil de mantener que se ajusta a las mejores prácticas, lo que facilita su depuración, ampliación y optimización a lo largo del tiempo.
16+
17+
### Mejora de la depuración y el mantenimiento
18+
Un código bien escrito permite a los ingenieros identificar y solucionar rápidamente los cuellos de botella, lo que ayuda a minimizar el tiempo de inactividad o los retrasos en la transmisión de datos. Cuando se procesan grandes volúmenes de datos, incluso una pequeña ineficiencia en el código puede provocar retrasos o sobrecargar los recursos, por lo que un código limpio ayuda a evitar estos problemas.
19+
20+
### Utilización eficiente de los recursos
21+
In cloud environments, where you are billed based on resource usage, writing clean, efficient code minimizes the overhead and ensures that your system uses resources (e.g., compute and storage) effectively. Efficient pipelines are able to process more data with fewer compute resources, reducing operational costs while maintaining performance.
22+
23+
### Reducir la deuda técnica
24+
En su prisa por ofrecer nuevas funciones, los equipos suelen hacer concesiones que acumulan deuda técnica, es decir, el costo de corregir posteriormente un código que no es óptimo. La refactorización periódica es la forma de saldar esta deuda antes de que se salga de control.
25+
En los sistemas de streaming, la deuda técnica puede manifestarse en forma de partición ineficiente de temas, esquemas mal diseñados o lógica de procesamiento de eventos engorrosa. En el contexto de los sistemas de streaming, la deuda técnica puede manifestarse de varias maneras, como una partición ineficiente de temas, esquemas mal diseñados y una lógica de procesamiento de eventos inadecuada.
26+
27+
---
28+
29+
## Técnicas de Refactorización
30+
31+
### Método de extracción
32+
Cuando un bloque de código realiza demasiadas tareas a la vez, resulta difícil seguirlo y mantenerlo. El **método de extracción** consiste en tomar parte de ese código y moverlo a su propia función o método. Cada nuevo método debe tener un nombre claro y descriptivo basado en lo que hace. Este enfoque hace que el código esté más organizado, sea más fácil de entender y más fácil de probar.
33+
34+
#### Ejemplo
35+
36+
**Antes de la refactorización**
37+
```javascript
38+
function procesarPedido(pedido) {
39+
console.log("Procesando pedido de " + pedido.cliente);
40+
41+
// Calcular total
42+
let total = 0;
43+
for (let i = 0; i < pedido.items.length; i++) {
44+
total += pedido.items[i].precio * pedido.items[i].cantidad;
45+
}
46+
console.log("Total: $" + total);
47+
48+
// Enviar confirmación
49+
console.log("Enviando confirmación a " + pedido.cliente);
50+
}
51+
```
52+
**Problema:**
53+
El cálculo del total está dentro de la función y mezcla responsabilidades.
54+
Esto hace que el código sea menos claro y difícil de reutilizar en otros lados.
55+
56+
**Después de la refactorización (Extracción)**
57+
```javascript
58+
function calcularTotal(items) {
59+
let total = 0;
60+
for (let i = 0; i < items.length; i++) {
61+
total += items[i].precio * items[i].cantidad;
62+
}
63+
return total;
64+
}
65+
66+
function procesarPedido(pedido) {
67+
console.log("Procesando pedido de " + pedido.cliente);
68+
69+
const total = calcularTotal(pedido.items);
70+
console.log("Total: $" + total);
71+
72+
console.log("Enviando confirmación a " + pedido.cliente);
73+
}
74+
```
75+
### Cambiar el nombre de las variables
76+
Los nombres adecuados para las variables son esenciales para que el código sea legible.
77+
Durante la refactorización, es posible que encuentres que algunas variables tienen nombres vagos o confusos.
78+
Por ejemplo, usar un nombre como x o datos no proporciona suficiente información sobre lo que representa la variable.
79+
**Cambiar el nombre de estas variables** por algo más descriptivo, como costoTotal o datosDelCliente, ayudará a cualquiera que lea el código a entenderlo más fácilmente.
80+
#### Ejemplo
81+
82+
**Antes de la refactorización**
83+
```javascript
84+
85+
function calcular(d, t) {
86+
return d / t;
87+
}
88+
89+
let r = calcular(100, 2);
90+
console.log("Resultado: " + r);
91+
```
92+
**Problema:**
93+
**d**, **t** y **r** no dicen mucho sobre su propósito.
94+
Otro programador tendría que leer toda la función para entender que son distancia, tiempo y velocidad.
95+
96+
**Después de la refactorización**
97+
```javascript
98+
function calcularVelocidad(distancia, tiempo) {
99+
return distancia / tiempo;
100+
}
101+
102+
let velocidad = calcularVelocidad(100, 2);
103+
console.log("Velocidad: " + velocidad + " km/h");
104+
```
105+
106+
### Simplificar las condiciones
107+
Las sentencias condicionales complejas (como las sentencias **if** o **switch**) pueden dificultar la lectura y comprensión del código.
108+
La refactorización de estas sentencias condicionales puede implicar varias técnicas.
109+
110+
#### Ejemplo
111+
112+
**Antes de la refactorización**
113+
```javascript
114+
function puedeVotar(edad, esCiudadano) {
115+
if (edad >= 18) {
116+
if (esCiudadano === true) {
117+
return true;
118+
} else {
119+
return false;
120+
}
121+
} else {
122+
return false;
123+
}
124+
}
125+
126+
console.log(puedeVotar(20, true)); // true
127+
console.log(puedeVotar(16, true)); // false
128+
```
129+
130+
**Problema:**
131+
Hay ifs anidados innecesarios.
132+
El código es más largo y menos legible.
133+
134+
**Después de la refactorización**
135+
```javascript
136+
function puedeVotar(edad, esCiudadano) {
137+
return edad >= 18 && esCiudadano;
138+
}
139+
140+
console.log(puedeVotar(20, true)); // true
141+
console.log(puedeVotar(16, true)); // false
142+
```
143+
144+
### Referencia APA
145+
Refactoring (code): Everything you need to know. (s/f). Confluent. Recuperado el 19 de septiembre de 2025, de https://www.confluent.io/learn/refactoring/

0 commit comments

Comments
 (0)