Completando las funciones para generar etiquetas HTML

Clase 14 de 23 • Curso de Programación Funcional en JavaScript por Bedu

Juan Castro

teacher•

Este es un micro-framework que nos ayuda a construir aplicaciones web utilizando Componentes, muy parecido a React y Vue:

Hyperapp is a JavaScript micro-framework for building web applications - Github

Carlos Gómez Mont

student•

Super aporte, gracias!!

Mauricio Hernan Cabrera

student•

Esta genial eso!

Waldo Araque

student•

¿seguros que este código es más fácil de mantener?

GABRIELA VALLENILLA

student•

probablemente no.

Carlos Rafael Córdova Flores

student•

pensé que era el único que pensaba eso :( está bien confuso.

Zedovius .

student•

Muy interesante la solución y todo pero, afortunadamente ya tomé el Curso de Manejo de Ansiedad como para permitirme usar jQuery por voluntad propia, más aún teniendo React JS y demás. 😅 Quiéranse mucho!😂

Jorge Méndez Ortega

student•

Siguiendo el taller y con un poco de curiosidad las funciones que estamos utilizando pueden quedar de la manera siguiente.

// consiguiendo los atributes para las etiquetas HTML
const attributesToString = (obj = {}) => {
    const ENTRIES = Object.entries(obj);
    const ATTRS = [];
    for (let i = 0; i < ENTRIES.length; i += 1) {
        const AUX = ENTRIES[i];
        const ATTR = AUX[0];
        const VALUE = AUX[1];
        ATTRS.push(`${ATTR}="${VALUE}"`);
    }
    return ATTRS.join("");
};

// Creando etiquetas html con atributos
const createTagAttr = obj => (content = "") => {
    const { tag, attr } = obj;
    return `
      <${tag}${attr ? ` ${attributesToString(attr)}` : ""}>
        ${content}
      </${tag}>`;
};

// Generando tag de maner dinamica
const createTag = (tag) => {
    const TAG = (typeof tag === "string")
        ? createTagAttr({ tag })
        : createTagAttr(tag);
    return TAG;
};```

para poder invocar todo de la siguiente manera.

createTag({tag:"h1", attr:{"class": "Success"}})("Galletas mmmm");


espero pueda ser de utilidad par alguien.

GABRIELA VALLENILLA

student•

Es un error de principiantes verificar si un objeto tiene propiedades con un simple obj.attr ? '' : '' porque un objecto vacio es truthy

Carlos Enrique Ramírez Flores

student•

si hay mucho que mejorar, comparte tu código con tu solucion!

Manuel Rivera

student•

Bastante, ademas que no se esta llevando un orden.

Alex hernandez mitre

student•

cada vez más confuso ...

Ludwing Rivera Amador

student•

Tengo entendido que en la programación funcional no se hace uso de if. Soy nuevo en este paradigma

Roberto Cortés Monroy

student•

¿No sería más fácil solo mapear la lista? pregunta seria jajjaja.

Luis González

student•

Les comparto una ligera optimización al código del profe.

// Construccion del html tag con clase
const tagAttr = obj => (content = '') =>
  `<${obj.tag} ${obj.attrs && attrToString(obj.attrs)}> ${content} </${obj.tag}>`

// Metodo que ejecuta la construccion del tag
const tag = t =>
  (typeof t === 'string') ? tagAttr({tag: t}) : tagAttr(t)

David Leonardo Garzón piña

student•

La verdad me parece un codigo complejo, dificil de mantener, hay formas mas simples de hacer el mismo procedimiento ...

alberto ayala rodriguez

student•

Que fumada de clase again zD

Alejandro Sebastian Dubon Estrada

student•

Un clousure recuerda el contexto en el que fue creado

const generateHTMLTag = tag => content => `<${tag}>${content}</${tag}>`
const h1 = generateHTMLTag('h1');
h1('bla bla bla'); //<h2>bla bla bla</h2>

Alan Cabrera

student•

¿Qué manera creen más conveniente de usar, usando funciones como en la clase o haciendo manipulación del DOM? ¿En qué contextos usaríamos cada una?

David Colin

teacher•

Lo mejor es crear nodos y manipular el DOM, así lo hacen librerías como React 😉

Carlos Eduardo Gomez García

teacher•

Hmmm, comprendo el punto, esto me recuerda mucho al concepto de High Order Functions, pero pues prácticamente hacer esto es muy similar a lo que vimos en el Curso de buenas prácticas de escritura de código, dividir en funciones

Bryan Estiven Silva Mercado

student•

Comprender el uso de las tres funciones me costo ver los vídeos un par de veces mas pero ahora quedo perfectamente entendido

Francisco Garcia [C6]

student•

Muy chevere

Manuel Rivera

student•

Creo que la validación quedaría mejor de la siguiente manera

    `<${obj.tag}${Object.keys(obj.attrs).length > 0 && ' '}${attrsToString(obj.attrs)}>${content}</${obj.tag}>`

funciones en esta clase.

// tagAttrs
function tagAttrs (obj, content) {
  return (
    `<${obj.tag}${Object.keys(obj.attrs).length > 0 && ' '}${attrsToString(obj.attrs)}>${content}</${obj.tag}>`
  )
}

// create tag html

function tag (t) {
  if (typeof t === 'string') return tagAttrs({tag: t})
  
  return tagAttrs(t);
}

Byron Mesias Cueva Cabrera

student•

Yo le hice así:

const tagAttrs = obj => (content = '') => `
  <${obj.tag}
    ${obj.attrs? attrsToString(obj.attrs) : ''}
  >
    ${content}
  </${obj.tag}>
`

const tag = t => {
  if(typeof t === 'string') return tagAttrs({tag: t})
  return tagAttrs(t)
}

// consiguiendo los atributes para las etiquetas HTML
const attributesToString = (obj = {}) => {
    const ENTRIES = Object.entries(obj);
    const ATTRS = [];
    for (let i = 0; i < ENTRIES.length; i += 1) {
        const AUX = ENTRIES[i];
        const ATTR = AUX[0];
        const VALUE = AUX[1];
        ATTRS.push(`${ATTR}="${VALUE}"`);
    }
    return ATTRS.join("");
};

// Creando etiquetas html con atributos
const createTagAttr = obj => (content = "") => {
    const { tag, attr } = obj;
    return `
      <${tag}${attr ? ` ${attributesToString(attr)}` : ""}>
        ${content}
      </${tag}>`;
};

// Generando tag de maner dinamica
const createTag = (tag) => {
    const TAG = (typeof tag === "string")
        ? createTagAttr({ tag })
        : createTagAttr(tag);
    return TAG;
};```

para poder invocar todo de la siguiente manera. 

// Construccion del html tag con clase
const tagAttr = obj => (content = '') =>
  `<${obj.tag} ${obj.attrs && attrToString(obj.attrs)}> ${content} </${obj.tag}>`

// Metodo que ejecuta la construccion del tag
const tag = t =>
  (typeof t === 'string') ? tagAttr({tag: t}) : tagAttr(t)

// tagAttrs
function tagAttrs (obj, content) {
  return (
    `<${obj.tag}${Object.keys(obj.attrs).length > 0 && ' '}${attrsToString(obj.attrs)}>${content}</${obj.tag}>`
  )
}

// create tag html

function tag (t) {
  if (typeof t === 'string') return tagAttrs({tag: t})
  
  return tagAttrs(t);
}

const tagAttrs = obj => (content = '') => `
  <${obj.tag}
    ${obj.attrs? attrsToString(obj.attrs) : ''}
  >
    ${content}
  </${obj.tag}>
`

const tag = t => {
  if(typeof t === 'string') return tagAttrs({tag: t})
  return tagAttrs(t)
}

Completando las funciones para generar etiquetas HTML

Introducción al curso y conceptos base

Qué aprenderás sobre la programación funcional

Programación funcional: qué es

Boilerplate: Base para el proyecto del curso

Funciones

Funciones Algebraicas y Funciones de JavaScript

Qué son funciones puras

Proyecto: Obtener el valor de los inputs

Objetos y Tipos de Memoria en JavaScript

Copiar y modificar objetos en JavaScript

Utilizando inmutabilidad en nuestras funciones

Proyecto: Validar inputs

Estado compartido en funciones

Estado compartido o shared state

Proyecto: Agregar elementos a la lista

Composición de funciones, Closures y Currying

Funciones compuestas o Function Composition

Completando las funciones para generar etiquetas HTML

Closures en programación funcional

Currying

Proyecto: Construyendo filas y celdas

Higher Order Functions

Introducción a las Higher Order Functions

Proyecto: Actualizando el total de calorías

Proyecto: Mostrar elementos

Proyecto: Eliminar elementos

Bonus: Declarative Programming

Programación Declarativa

Conclusiones

Conclusiones