使用 DOM 操作时的纯函数

Question

我正试图围绕纯函数展开思考，但我不确定我是否真的理解它。我知道纯函数不应该改变外部状态，只要输入相同，它每次都应该返回相同的输出。

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

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

纯状态下的同一个函数：

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

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

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

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

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

任何帮助将不胜感激:)

Answer 1

IO 单子

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

如需良好阅读和另一个 IO 实现，请参阅 Brian Lonsdorf 书中的 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>

Answer 2

DOM 操作是不纯的。您无法以“纯粹”的方式清除画布。

任何改变系统状态或与外界交互的东西都被称为side effects，并且在纯函数式编程环境中应避免副作用。

然而，DOM 操作显然做到了这两点；清除画布既是状态的变化（未清除到清除），用户也可以看到这种变化。

---

您可能希望更深入地了解functional programming，这似乎是您试图通过纯/不纯函数方法实现的目标。

函数式编程的目的是避免改变状态，例如，一个程序不会改变一个对象，而另一个程序正在使用它，这可能会产生意想不到的和不想要的结果。

Answer 3

通过函数编程范式来做到这一点

function clearCanvas(canvas) { 
    const imgData = canvas.getContext('2d').getImageData(0,0,canvas.width,canvas.height);
    new Uint32Array(imgData.data.buffer).set(0);
    return data;
} 

canvas.getContext('2d').setImageData(clearCanvas(canvas),0,0);

没有副作用，并且为相同的参数返回相同的数据。

但是函数式编程是一种防御风格，它的工作假设是代码是危险的，并且必须隔离危险。因此，它非常耗资源且速度慢，根本不适合高性能代码。