JS - Recursive vol. 5

Tym razem poznajemy coś, co osobiście uważam za antywzorzec. Recursive func params antipattern, tak to nazywam. Zobaczmy w czym rzecz.

Oto nasza funkcja:

const elFactory = (type, attributes, ...children) => {
    const el = document.createElement(type)
  
    for (key in attributes) {
      el.setAttribute(key, attributes[key])
    }
  
    children.forEach(child => {
      if (typeof child === 'string') {
        el.appendChild(document.createTextNode(child))
      } else {
        el.appendChild(child);
      }
    })
  
    return el
  }

Rozumiemy, o co w niej chodzi? Okej, podpowiedź, oto jej użycie:

 const markup = elFactory(
    'div',
    { class: 'my-component' },
    elFactory('span', {}, 'Hello World!'),
    ' Thanks for reading my blog!',
  )
  
  document.body.appendChild(markup);

Rozumiemy o co w niej chodzi? Okej, podpowiedź, oto wynik:

<div class="my-component">
  <span>Hello World!</span> Thanks for reading my blog!
</div>

Zakładam, że nasze odpowiedzi wyglądały tak:

Wszystko wiem, działa jak React.createElements!
Czy argumenty funkcji mają związek z rekurencją?
Eee… jak niby do tego doszło?

Krótko mówiąc, mamy tutaj kompletnie nieintuicyjny sposób przekazywania opcjonalnych argumentów, którymi są rekurencyjne wywołania tej funkcji (albo i nie). Logika w jakiej to jest poukładane sprawia, że rozumieć tę funkcję będzie autor i to przez 20 minut po jej napisaniu, nie dłużej.

Da się tego uniknąć przez coś, co nazywam recursive schema parameter. Jeszcze sobie o tym napiszemy.

JS – Recursive vol. 5