Patrones Flashcards
(24 cards)
Q: ¿Cómo Vue usa el Observer Pattern para actualizar automáticamente la UI cuando los datos cambian?
A:
- Observer Pattern: Un patrón de diseño en el que un objeto (sujeto) mantiene una lista de dependientes (observadores) que se actualizan cuando el objeto cambia.
-
En Vue:
- Vue crea un sistema reactivo donde los datos son observados.
- Cuando los datos cambian, Vue notifica automáticamente a todos los componentes que dependen de esos datos, actualizando la UI.
-
Flujo:
- Los datos son observados por un “Watcher” (observador).
- Cuando los datos cambian, el “Watcher” detecta el cambio.
- Los componentes dependientes se vuelven a renderizar.
🧠 Ejemplo:
```js
// En Vue, los datos son observados
data: {
count: 0
}
// Si count cambia, la UI se actualiza automáticamente
this.count = 1; // UI se actualiza sin necesidad de intervención manua
Q: ¿Cómo usar el Factory Pattern para crear múltiples componentes con lógica común en JavaScript?
A:
- Factory Pattern: Un patrón de diseño que permite crear objetos de manera flexible sin especificar la clase exacta del objeto a crear. Ideal cuando necesitamos crear múltiples instancias con lógica común.
- Ejemplo: Crear configuraciones de gráficas con D3.js usando el Factory Pattern.
🧠 Ejemplo:
```js
function createChart(type, width, height) {
return {
type: type,
width: width,
height: height,
render: function() {
console.log(Rendering a ${this.type} chart of size ${this.width}x${this.height});
// Aquí iría la lógica de D3.js para crear la gráfica
}
};
}
// Crear diferentes tipos de gráficas
const barChart = createChart(‘bar’, 500, 300);
const lineChart = createChart(‘line’, 600, 400);
// Renderizar las gráficas
barChart.render(); // “Rendering a bar chart of size 500x300”
lineChart.render(); // “Rendering a line chart of size 600x400”
Q: ¿Es Pinia un Singleton en JavaScript?
A:
Sí, Pinia puede considerarse un Singleton en cierto sentido, ya que garantiza que solo haya una única instancia del store global en toda la aplicación.
- Pinia crea una única instancia del store, que se comparte entre todos los componentes de la aplicación.
- Esta instancia es accesible globalmente, garantizando que los datos del store sean consistentes y siempre los mismos.
🧠 Ejemplo básico:
```js
// store.js
import { defineStore } from ‘pinia’;
export const useCounterStore = defineStore(‘counter’, {
state: () => ({ count: 0 }),
actions: {
increment() {
this.count++;
}
}
});
// Accediendo al store
const counterStore = useCounterStore();
counterStore.increment();
console.log(counterStore.count); // 1
Q: ¿Cuáles son los principios clave de Clean Code según Robert C. Martin (“Uncle Bob”)?
A:
✅ Principios de Clean Code:
-
Nombres claros y descriptivos
- Funciones, variables y componentes deben tener nombres que expliquen su propósito.
-
Funciones pequeñas
- Una función debe hacer solo una cosa. Si hace más, divídela.
-
Evitar comentarios innecesarios
- El código debe ser autoexplicativo. Los comentarios se usan para explicar porqués, no qués.
-
Evitar duplicación
- DRY (Don’t Repeat Yourself): Extraer la lógica común en funciones o clases reutilizables.
-
Organización lógica del código
- Separar responsabilidades (vista, lógica, estilos, etc.).
-
Principios SOLID
- S: Single Responsibility (un componente = una responsabilidad).
- D: Dependency Inversion (usar inyección de dependencias, interfaces, servicios).
Q: ¿Cuáles son los principios SOLID en el diseño de software?
A:
SOLID es un conjunto de principios para diseñar software más limpio y mantenible:
-
S: Single Responsibility Principle (SRP)
- Un componente (clase, función, módulo) debe tener una sola responsabilidad. No debe haber razones para modificarlo por más de una causa.
-
O: Open/Closed Principle (OCP)
- Las clases deben estar abiertas para su extensión, pero cerradas para su modificación. Se pueden añadir nuevas funcionalidades sin alterar el código existente.
-
L: Liskov Substitution Principle (LSP)
- Las instancias de una clase derivada deben poder ser sustituidas por instancias de la clase base sin alterar el comportamiento del programa.
-
I: Interface Segregation Principle (ISP)
- Los clientes no deben depender de interfaces que no usan. Es mejor tener interfaces pequeñas y específicas que interfaces grandes y generales.
-
D: Dependency Inversion Principle (DIP)
- Las clases de alto nivel no deben depender de clases de bajo nivel. Ambas deben depender de abstracciones (interfaces). Las abstracciones no deben depender de detalles, los detalles deben depender de abstracciones.
Q: ¿Qué es el Observer Pattern y cómo se utiliza en Vue?
A:
- Observer Pattern: Un patrón de diseño donde un objeto (sujeto) mantiene una lista de dependientes (observadores) que se actualizan cuando el objeto cambia.
-
En Vue:
- Vue utiliza un sistema reactivo que observa los datos. Cuando un dato cambia, Vue actualiza automáticamente los componentes que dependen de ese dato.
🧠 Ejemplo en Vue:
```js
data() {
return {
count: 0
}
}
Q: ¿Cómo se utiliza el Singleton Pattern en Vue (ej. con Pinia o Vuex)?
A:
A:
- Singleton Pattern: Garantiza que una clase tenga solo una instancia y proporciona un acceso global a ella.
-
En Vue:
- Pinia o Vuex siguen el patrón Singleton para mantener un solo store global en la aplicación.
- Todos los componentes comparten la misma instancia del store.
Q: ¿Cómo se utiliza el Factory Pattern en Vue para crear componentes?
A:
- Factory Pattern: Un patrón que permite crear objetos sin especificar la clase exacta del objeto a crear.
-
En Vue:
- Podemos usar el Factory Pattern para crear componentes con lógica común, como formularios o configuraciones de gráficos.
Q: ¿Qué es el Container/Presentational Pattern en Vue y para qué se usa?
A:
El patrón Container/Presentational separa la lógica de negocio de la presentación visual en componentes distintos:
🔹 Container Component (Contenedor):
- Maneja la lógica, llamadas a APIs, estado y datos.
- Pasa los datos como props al componente presentacional.
- No tiene diseño visual.
🔹 Presentational Component (Presentacional):
- Solo se enfoca en el UI.
- Recibe datos y callbacks como props.
- No tiene lógica de negocio.
🧠 Ejemplo en Vue:
```js
// Container.vue
<template>
<UserList :users="users" />
</template>
<script>
import UserList from './UserList.vue';
import { ref, onMounted } from 'vue';
const users = ref([]);
onMounted(async () => {
const res = await fetch('/api/users');
users.value = await res.json();
});
</script>
Q: ¿Qué es el Data Provider Pattern en Vue?
A:
Patrón que separa la lógica de obtención de datos de la UI.
🔹 Se implementa con composables (useXyz).
🔹 El componente solo se encarga de mostrar los datos.
🧠 Ejemplo:
```js
// useUsers.js
export function useUsers() {
const users = ref([]);
onMounted(async () => {
users.value = await fetch(‘/api/users’).then(res => res.json());
});
return { users };
}
Q: ¿Qué son los componentes dinámicos con :is y keep-alive en Vue?
A:
Permiten cambiar dinámicamente el componente que se renderiza:
🔹 :is="componente" → Muestra el componente indicado.
🔹 <keep-alive> → Preserva el estado del componente cuando se desmonta.
🧠 Ejemplo:
```vue
<component :is=”currentView” />
<keep-alive>
<component :is="currentView" />
</keep-alive>
Q: ¿Qué hacen provide e inject en Vue?
A:
Permiten pasar datos entre componentes ancestro-descendiente sin usar props.
🔹 provide: define valores en un componente ancestro.
🔹 inject: los recibe en un componente hijo (aunque esté muy profundo).
🧠 Ejemplo:
```js
// Ancestro
provide(‘theme’, ‘dark’);
// Hijo
const theme = inject(‘theme’);
Q: ¿Qué ventajas ofrece <script setup> en Vue 3?
A:
✅ Menos boilerplate (sin setup() ni return).
✅ Mejor rendimiento en tiempo de ejecución.
✅ Mejor autocompletado y tipado en el IDE.
✅ Soporte directo para props y emits con TypeScript.
🧠 Ejemplo:
```vue
defineProps(['msg']);
Q: ¿Para qué se usa ref en Vue?
A:
ref crea una referencia reactiva a un valor primitivo o a un objeto.
🔹 Se usa para que Vue reactivamente observe cambios.
🧠 Ejemplo:
```js
import { ref } from ‘vue’;
const count = ref(0);
count.value++; // ¡Reactividad!
Q: ¿Qué hace reactive en Vue y en qué se diferencia de ref?
A:
reactive convierte un objeto completo en reactivo (deep reactivity).
🧠 Ejemplo:
```js
import { reactive } from ‘vue’;
const state = reactive({ count: 0 });
state.count++; // reactivo
🔹 Diferencia:
ref: para primitivos (y accedés con .value).
reactive: para objetos completos (sin .value).
✅ Útil para estados con múltiples propiedades.
Q: ¿Qué es Pinia y por qué usarlo en Vue?
A:
Pinia es el store oficial de Vue para manejo de estado global.
✅ Más simple que Vuex.
✅ Integración total con Composition API.
✅ Soporte para TypeScript.
✅ Reactivo, modular y ligero.
🧠 Ejemplo básico:
```js
// stores/counter.js
export const useCounter = defineStore(‘counter’, {
state: () => ({ count: 0 }),
actions: {
increment() { this.count++ }
}
});
// En un componente
const counter = useCounter();
counter.increment();
Q: ¿Cómo definir y usar getters en Pinia?
A:
Los getters son como propiedades computadas del store.
🧠 Ejemplo:
```js
export const useCounter = defineStore(‘counter’, {
state: () => ({ count: 0 }),
getters: {
double: (state) => state.count * 2
}
});
Q: ¿Cómo usar setters en Pinia?
A:
Los setters en Pinia son acciones que modifican el estado del store de manera reactiva.
🧠 Ejemplo:
```js
// store/counter.js
export const useCounter = defineStore(‘counter’, {
state: () => ({ count: 0 }),
actions: {
increment() { this.count++ },
setCount(value) { this.count = value }
}
});
Q: ¿Cuáles son las diferencias entre Vuex y Pinia?
A:
-
Simplicidad:
- Pinia es más simple y tiene una API más moderna.
- Vuex tiene una estructura más compleja y verbosa.
-
Compatibilidad:
- Pinia está diseñado para Vue 3 y la Composition API.
- Vuex es más usado con Vue 2 y no tiene la integración nativa con Composition API.
-
Tipado:
- Pinia tiene soporte completo para TypeScript de forma nativa.
- Vuex requiere configuración adicional para TypeScript.
-
Modularidad:
- Pinia permite stores modulares con menos configuración.
- Vuex requiere más esfuerzo para configurar módulos.
🧠 Ejemplo en Pinia:
```js
export const useCounter = defineStore(‘counter’, {
state: () => ({ count: 0 }),
actions: { increment() { this.count++ } }
});
Q: ¿Qué es Vuex y cómo funciona en Vue 3?
A:
Vuex es la biblioteca oficial de gestión de estado global para Vue 2 y Vue 3.
🔹 Conceptos principales:
- State: El estado global de la aplicación.
- Getters: Propiedades computadas basadas en el estado.
- Mutations: Métodos síncronos que modifican el estado.
- Actions: Métodos asíncronos que pueden llamar a mutaciones.
🧠 Ejemplo de Vuex en Vue 3:
```js
// store.js
import { createStore } from ‘vuex’;
export default createStore({
state: { count: 0 },
mutations: { increment(state) { state.count++ } },
actions: { incrementAsync({ commit }) { setTimeout(() => commit(‘increment’), 1000); } }
});
Q: ¿Qué es D3.js y para qué se usa?
A:
D3.js es una biblioteca JavaScript para crear visualizaciones de datos interactivas y dinámicas en la web usando HTML, SVG y CSS.
🔹 Permite manipular el DOM basado en datos.
🔹 Ayuda a crear gráficos, mapas, diagramas y mucho más.
🧠 Ejemplo:
```js
d3.select(‘body’).append(‘svg’).attr(‘width’, 200).attr(‘height’, 200)
.append(‘circle’).attr(‘cx’, 100).attr(‘cy’, 100).attr(‘r’, 50).style(‘fill’, ‘blue’);
Q: ¿Cómo seleccionar elementos en D3.js?
A:
En D3.js, la selección de elementos del DOM se hace con d3.select (para un solo elemento) o d3.selectAll (para varios elementos).
🔹 d3.select('selector') selecciona el primer elemento que coincide.
🔹 d3.selectAll('selector') selecciona todos los elementos que coinciden.
🧠 Ejemplo:
```js
// Selecciona el primer <p> y cambia su color
d3.select(‘p’).style(‘color’, ‘red’);
// Selecciona todos los <div> y agrega un fondo
d3.selectAll(‘div’).style(‘background-color’, ‘lightgray’);
Q: ¿Cómo vincular datos a elementos en D3.js?
A:
D3.js permite vincular datos a elementos DOM usando .data().
🔹 Data Binding: Asocia un array de datos a elementos DOM para representar datos visualmente.
🧠 Ejemplo:
```js
const data = [10, 20, 30, 40, 50];
d3.select(‘body’).selectAll(‘div’).data(data)
.enter().append(‘div’).style(‘height’, d => ${d}px).style(‘width’, ‘50px’).style(‘background’, ‘blue’);
Q: ¿Cuáles son los métodos básicos de D3.js?
A:
D3.js tiene varios métodos para manipular el DOM y trabajar con datos. Algunos de los más comunes:
🔹 d3.select(): Selecciona un solo elemento del DOM.
```js
d3.select(‘div’).style(‘color’, ‘red’);
~~~
`
🔹 d3.selectAll(): Selecciona todos los elementos que coinciden con el selector.
```js
d3.selectAll(‘p’).style(‘font-size’, ‘16px’);
~~~
🔹 append(): Añade un nuevo elemento al DOM.
```js
d3.select(‘body’).append(‘svg’).attr(‘width’, 100).attr(‘height’, 100);
~~~
🔹 style(): Modifica los estilos de los elementos seleccionados.
```js
d3.select(‘circle’).style(‘fill’, ‘blue’);
~~~
🔹 attr(): Establece o obtiene atributos de los elementos seleccionados.
```js
d3.select(‘circle’).attr(‘cx’, 50).attr(‘cy’, 50).attr(‘r’, 20);
~~~
🔹 data(): Vincula datos a los elementos DOM.
```js
d3.selectAll(‘div’).data([10, 20, 30]).enter().append(‘div’).text(d => d);
~~~
🔹 enter(): Crea elementos para los datos que no están representados en el DOM.
```js
d3.selectAll(‘div’).data([10, 20, 30]).enter().append(‘div’).style(‘height’, d => ${d}px);
~~~
🔹 text(): Establece el texto de los elementos seleccionados.
```js
d3.select(‘p’).text(‘Hello, D3!’);
~~~
🔹 remove(): Elimina los elementos seleccionados.
```js
d3.selectAll(‘circle’).remove();
~~~
✅ Estos métodos son esenciales para manipular y visualizar datos en D3.js.
