Как правильно создавать элементы DOM, используя монады ввода-вывода? - PullRequest
Новая
       8

Как правильно создавать элементы DOM, используя монады ввода-вывода?

0 голосов
/ 26 марта 2019

Я пытаюсь написать код JavaScript, который генерирует элементы DOM, но функционально, потому что все функции генерируют побочные эффекты и мутации.Чтобы добиться этого, я использую монаду ввода / вывода, но я все еще не знаю, как их использовать очень хорошо ...

Прежде всего, я использую библиотеку crocks, которая обеспечиваетмного ADT для работы с функциональными JS (я знаю, что есть ramda, но они не предлагают монады).Кроме того, я использую небольшой модуль, который позволяет мне объявлять элементы DOM с использованием композиции.(https://github.com/queckezz/elementx)

import IO from 'crocks/IO';
const { div, a, h1, h2, ul, li, button } = require('elementx');

const createHeader = div(
  h1(
    {class: 'title'},
    'This is a title'
  ),
  h2(
    {class: 'subtitle'}, 
    'This is a subtitle'
  ),
  div(
    {class: 'link'},
    a(
      {href: 'http://github.com'},
      'Github'
    )
  )
);

document.body.appendChild(createHeader);

Приведенный выше код работает, но он явно нечист. Я оставил импортированный IO, но не использую его, потому что не знаю, как реализовать, не нарушая код. IЯ знаю, что IO должен получить функцию в качестве аргумента, а затем он возвращает IO (f (x)), но я совершенно заблудился относительно того, как реализовать его как для переменной createHeader, так и для appendChild. Кроме того, с IO, createHeaderпеременная возвращает функцию, когда я ее запускаю, но appendChild ожидает объект Node.

1 Ответ

1 голос
/ 26 марта 2019

Хорошо, поэтому я решил проблему, основная проблема заключалась в том, что ... я рассматривал функцию, которая не вызывала побочных эффектов (createHeader ничего не делал бы, если бы не добавлялся в DOM), как нечистую. Вздох ... новичок меня.

Единственной нечистой частью было добавление, как сказал Боб в комментариях.

Итак, мое решение было следующим: 

//append might not be a good name for this action but...
const append = nodeObj => IO(() => {
  document.body.appendChild(nodeObj);
})

append(createHeader)
  .run();

, который создает элементы DOM только после того, как IO "активирован", таким образом откладывая побочные эффекты. Надеюсь, это поможет другим начинающим программистам!

...