Una de les optimitzacions més satisfactòries en programació és passar d’una llista interminable de codi repetit a una elegant estructura basada en dades.
El Codi “Olorós” (Smell Code)
Imagina que has de reemplaçar diverses paraules en un text i després mostrar icones per a cadascuna d’elles. L’aproximació ingènua sol veure’s així:
javascript
// Reemplaçaments manuals infinits...
const text = originalText
.replace('React', '<span id="hl-react">React</span>')
.replace('Astro', '<span id="hl-astro">Astro</span>')
.replace('Vue', '<span id="hl-vue">Vue</span>');
// Renderitzat manual infinit...
<Icon icon={ReactIcon} target="hl-react" />
<Icon icon={AstroIcon} target="hl-astro" />
<Icon icon={VueIcon} target="hl-vue" />// Reemplaçaments manuals infinits...
const text = originalText
.replace('React', '<span id="hl-react">React</span>')
.replace('Astro', '<span id="hl-astro">Astro</span>')
.replace('Vue', '<span id="hl-vue">Vue</span>');
// Renderitzat manual infinit...
<Icon icon={ReactIcon} target="hl-react" />
<Icon icon={AstroIcon} target="hl-astro" />
<Icon icon={VueIcon} target="hl-vue" />Això és difícil de mantenir. Si vols afegir una tecnologia, has de tocar el codi en dos o més llocs.
La Solució Data-Driven
En lloc d’escriure la lògica diverses vegades, defineix les teves dades en una sola “font de la veritat” (un array d’objectes) i deixa que el codi faci la feina bruta.
javascript
// 1. Configuració centralitzada
const technologies = [
{ name: 'React', id: 'hl-react', icon: ReactIcon },
{ name: 'Astro', id: 'hl-astro', icon: AstroIcon },
{ name: 'Vue', id: 'hl-vue', icon: VueIcon }
];
// 2. Lògica de reemplaçament dinàmica
let processedText = originalText;
technologies.forEach(tech => {
// Per què forEach aquí? (Veure nota al final)
// Utilitzem RegExp per reemplaçar totes les ocurrències dinàmicament
processedText = processedText.replace(
new RegExp(tech.name, 'g'),
`<span id="${tech.id}">${tech.name}</span>`
);
});
// 3. Renderitzat dinàmic
// En el teu template (React/Astro/etc):
{technologies.map(tech => (
<Icon icon={tech.icon} target={tech.id} />
))}// 1. Configuració centralitzada
const technologies = [
{ name: 'React', id: 'hl-react', icon: ReactIcon },
{ name: 'Astro', id: 'hl-astro', icon: AstroIcon },
{ name: 'Vue', id: 'hl-vue', icon: VueIcon }
];
// 2. Lògica de reemplaçament dinàmica
let processedText = originalText;
technologies.forEach(tech => {
// Per què forEach aquí? (Veure nota al final)
// Utilitzem RegExp per reemplaçar totes les ocurrències dinàmicament
processedText = processedText.replace(
new RegExp(tech.name, 'g'),
`<span id="${tech.id}">${tech.name}</span>`
);
});
// 3. Renderitzat dinàmic
// En el teu template (React/Astro/etc):
{technologies.map(tech => (
<Icon icon={tech.icon} target={tech.id} />
))}Avantatges
- Mantenibilitat: Per afegir alguna cosa nova, només afegeixes una línia a l’array
technologies. - Llegibilitat: La lògica de “què fer” està separada de les “dades”.
- Escalabilitat: Pots tenir 3 o 300 tecnologies, el codi lògic no canvia.