Tengo una función createEelement() .
Con ella, crearé elementos HTML.
Código de función:
function createElement(tagName, options, ...children) { const { classNames = [], attributes = {} } = options; const elem = document.createElement(tagName); for (let i = 0; i < classNames.length; i++) { elem.classList.add(classNames[i]); } for (const attributePair of Object.entries(attributes)) { const [attributeKey, attributeValue] = attributePair; elem.setAttribute(attributeKey, attributeValue); } elem.append(...children); return elem; } La función le permite crear elementos, colgar clases y atributos. Y también animar a todos los niños al tema. Te permite hacerlo inmediatamente al crear. Necesito expandir esta función de tal manera que los controladores de eventos también se puedan montar. Planeo implementar esto en el objeto de options .
Mi pregunta es ¿cómo se puede hacer esto? Teniendo en cuenta que los oyentes pueden ser más de uno...
Para resolver su problema, podría tener una matriz de objetos, con los nombres de los eventos, las devoluciones de llamada y las opciones del evento:
const listeners = [{ name: "onclick", callback: (e) => e.preventDefault(), options: {}, }]; (Esto es solo un ejemplo)
Aquí está el resultado:
function createElement(tagName, options, ...children) { const { classNames = [], attributes = {}, listeners = {} } = options; const elem = document.createElement(tagName); for (let i = 0; i < classNames.length; i++) { elem.classList.add(classNames[i]); } for (const listener of listeners) { elem.addEventListener(...listener); } for (const attributePair of Object.entries(attributes)) { const [attributeKey, attributeValue] = attributePair; elem.setAttribute(attributeKey, attributeValue); } elem.append(...children); return elem; } Prima
Aquí hay algunas mejoras de factorización:
function createElement(tagName, options, ...children) { const { classNames = [], attributes = {}, listeners = {} } = options; const elem = document.createElement(tagName); // using a for...of loop for (const className of classNames) { elem.classList.add(className); } for (const listener of listeners) { elem.addEventListener(...listener); } // destructuring instead of recreating two variables for (const attributePair of Object.entries(attributes)) { elem.setAttribute(...attributePair); } elem.append(...children); return elem; }PD: no probé este código, por lo que podría no funcionar, díganme si algo está mal.