javascript - 使用 DOM 操作时的纯函数

Question

我试图将我的头脑围绕纯函数，但我不确定我是否真的理解它。我知道纯函数不应该改变外部状态，只要它具有相同的输入，它就应该每次返回相同的输出。

我知道例如这个函数是不纯的，因为它改变了程序其他部分可能使用的 cart 变量:

const addToCart = (cart, item) => { 
  cart.push(item); 
  return cart; 
};

纯状态下的相同功能:

const addToCart = (cart, item) => { 
  const newCart = lodash.cloneDeep(cart); 
  newCart.push(item); 
  return newCart; 
};

这对我来说很有意义。我了解到纯函数应该总是返回一些东西。

但是，我正在处理一些需要我使用 HTML5 Canvas 元素的东西，并且我有这个清除 Canvas 的功能:

function clearCanvas(canvas) { 
  canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height); 
}

我怎样才能使上述功能纯？我意识到它是不纯的，因为它不返回任何东西，而且它也会改变 canvas 变量的状态。 DOM 操作本质上是不纯的吗？

任何帮助，将不胜感激 :)

Answer 1

IO monad

你可能对 IO monad 感兴趣——本质上 IO 包含一个 thunk 或惰性函数，它只在我们调用 runIO 时运行。 .更重要的是，我们可以将内容限制在 IO 和 map 中。一个允许我们对包含的值进行操作的普通函数。

要获得良好的阅读和另一个 IO 实现，请参阅 Chapter 9: Monadic Onions来自布赖恩·隆斯多夫的书

小演示

// IO :: (void -> a) -> IO a
const IO = f => ({
  // runIO :: void -> a
  runIO: f,
  // map :: IO a => (a -> b) -> IO b
  map: g =>
    IO(() => g(f())),
  // chain :: IO a => (a -> IO b) -> IO b
  chain: g =>
    IO(g(f()).runIO)
})

// IO.of :: a -> IO a
IO.of = x => IO(() => x)

// log :: String -> a -> IO a
const log = label => x =>
  IO(() => (console.log(label, x), x))

// $ :: String -> IO HTMLElement
const $ = x =>
  IO(() => document.querySelector(x))

// getText :: HTMLElement -> String
const getText = e =>
  e.textContent

// main :: String -> IO String
const main = selector =>
  $(selector)
    .map(getText)
    .chain(log('A'))
    .map(s => s.toUpperCase())
    .chain(log('B'))
    .runIO()

main('title')
// A hello world
// B HELLO WORLD

<title>hello world</title>