纯脚本中的getElementById

Question

我对Purescript非常陌生，所以这可能是一个幼稚的问题。

我想写一个Purescript函数，从浏览器的HTML输入元素中读取输入，并将一些输出写入另一个HTML输入元素。

用普通的Javascript，它就像这样简单 document.getElementById('output').value = myFun(document.getElementById('input'));. 我如何只用Purescript来做这件事？

Answer 1

EDIT.我注意到我的答案并不是这样的，我想写一个Purescript函数，从浏览器上的HTML输入元素中读取输入，然后将一些输出写到另一个HTML ..:

我注意到我的答案不符合要求--我只是设置了一个元素值。如果我有更多的时间，我可能会添加从元素值读取的内容，但你应该能够从已经提供的提示中猜到如何做到这一点:-)

一般来说，当使用PureScript时，你希望使用一些高级框架来操作DOM，比如：卤素、react-basic、concur、spork、flare、hedwig、flame（我肯定我还漏掉了一些其他的框架--抱歉）。

但如果你真的想用手来突变DOM，请不要惊讶，这并不像在imperative JavaScript中那样愉快的体验。这是有目的的--PureScript有能力将效果和纯函数分开，而我们必须要用 Effect 在这里的每一步。另一方面，这给我们提供了一种独特的能力，可以对代码进行推理，并确定哪里会发生副作用，我们的程序哪些部分是纯粹的。

因此，让我们使用低级的 纯脚本-web-html. 这个库是低级的，但是围绕DOM API提供了严格的类型，所以就像我说的，它需要相当多的手动传值。

module Main where

import Prelude

import Data.Maybe (Maybe(..))
import Effect (Effect)
import Web.DOM.Document (toNonElementParentNode)
import Web.DOM.Element (setAttribute)
import Web.DOM.NonElementParentNode (getElementById)
import Web.HTML (window)
import Web.HTML.HTMLDocument (toDocument)
import Web.HTML.Window (document)

main :: Effect Unit
main = do
  w ← window
  d ← document w
  maybeElement ← getElementById "test-input" $ toNonElementParentNode $ toDocument  d
  case maybeElement of
    Nothing → pure unit
    Just elem → do
      setAttribute "value" "new-value" elem

这可以使用点自由风格写得更短一些，所以避免中间变量。

main :: Effect Unit
main = window >>= document >>= toDocument >>> toNonElementParentNode >>> getElementById "test-input" >>= case _ of
  Nothing → pure unit
  Just elem → setAttribute "value" "new-value" elem

直接的DOM操作可能不是开始构建一个大型项目或开始使用这种非常美妙的语言进行冒险的最佳方式。另一方面，它可以不时地有用;-)

Answer 2

我使用Purescript的外函数接口（FFI）功能如下。

定义你的Purescript模块，导入你想使用的外来函数。这里我们导入了两个函数。

-- Main.purs
foreign import getElementById :: String -> String
foreign import setElementById :: String -> String -> Effect Unit 

现在，创建一个Javascript文件，名称相同，但内容是 .js 扩展。我们将从这里导出JS函数，以便在Purescript中使用。

// Main.js
"use strict";

exports.getElementById = function(id) {
    return document.getElementById(id).value;
};

exports.setElementById = function(id) {
    return function(value) {
    document.getElementById(id).value = value;
    };
};

现在我们可以调用 getElementById 和 setElementById 我们的Purescript文件中的功能。