Question

我发现ghcjs文档非常有限。这是这个基本的HTML文档。

＆＃13;

h1 { font-family: Helvetica; }

p {font-family: Helvetica; color: blue; }

＆＃13;

<h1>
Hello World
</h1>
<p>
This is my test document.
</p>

＆＃13;

ghcjs只是一个组合器，基本上输入HTML作为输出字符串？或者Haskell是否在某处存储了DOM模型？

我的问题是关于所有html标签和CSS，但也许其他标签有不同的功能。

Answer 1

您可以将ghcjs与库ghcjs-dom一起使用DOM。

从您的问题标题"how to code <h1> tags with ghcjs"以及您的一些评论中，您似乎正在寻找包含一些HTML标记的简单ghcjs / ghcjs-dom示例。该计划将生成您的HTML并回复h1元素的点击：

import GHCJS.DOM (runWebGUI, webViewGetDomDocument)
import GHCJS.DOM.Document (getBody, createElement)
import GHCJS.DOM.Element (click, setInnerHTML)
import GHCJS.DOM.HTMLHeadingElement (castToHTMLHeadingElement)
import GHCJS.DOM.HTMLParagraphElement (castToHTMLParagraphElement)
import GHCJS.DOM.Node (appendChild)
import GHCJS.DOM.EventM (on)

main = runWebGUI $ \win -> do
        Just doc <- webViewGetDomDocument win
        Just body <- getBody doc

        Just h1 <- fmap castToHTMLHeadingElement <$> createElement doc (Just "h1")
        appendChild body $ Just h1
        setInnerHTML h1 (Just "Hello World")
        on h1 click $ setInnerHTML h1 (Just "Clicked")

        Just p <- fmap castToHTMLParagraphElement <$> createElement doc (Just "p")
        appendChild body $ Just p
        setInnerHTML p (Just "This is my test document.")

        return ()

此项目：https://github.com/dc25/stackOverflow__how-to-code-h1-tags-with-ghcjs包含上述代码。以下是基于浏览器的演示的链接：https://dc25.github.io/stackOverflow__how-to-code-h1-tags-with-ghcjs/如果单击“Hello World”标题，页面将更改。

ghcjs编译器输出包含index.html页面。如果Ghcjs已经存在，它将不会覆盖该页面，因此您可以在创建后安全地对其进行编辑。这允许您直接包含css文件。

关于文档，此页面：https://hackage.haskell.org/package/jsaddle-dom-0.4.0.1/docs/包含与ghcjs-dom功能相关的有用链接。

Answer 2

首先 - 正如@Cubic已经说过的那样 - 我觉得你很困惑GHCJS是什么。

GHCJS是一个编译器，它允许您将Haskell代码编译为Javascript - 渲染html / css的简单页面不是它的设计任务。正如我们在德语中所说的那样是“Mit Kanonen aufSpatzenschießen” - 或者更短的矫枉过正。

那么我将它用于将前端编写到给定的haskell后端是非常好的，您可以共享所有现有类型并获得haskell生态系统中的所有可维护性和安全性。

但是，即使你没有haskell后端而且你争论新奇和好主意 - GHCJS可能会对你感兴趣，我自己对功能反应式编程很新，并且在尝试purescript（带pux）之前现在学习反射/ reflex-dom（我选择的前端dsl）对我的大脑来说是一个挑战并且令人高兴 - 我知道这一段很自以为是，但反射中呈现的抽象似乎正确并且似乎弄清楚了其他的一些缺点功能反应框架......

那么如何使用上述库来呈现上述内容：

{-# LANGUAGE OverloadedStrings   #-}
import           Reflex
import           Reflex.Dom

main :: IO ()
main = mainWidgetWithCss "h1 {font-family: Helvetica;} p {font-family: Helvetica; color: blue;}" $ do
  el "h1" $ text "Hello World!"
  el "p" $ text "This is my test document"

这是 - 正如我所说的 - 矫枉过正 - 当一些简单的html / css足够时，你得到一个完整的运行时，一大块js。但是，为了在可重用组件中生成复杂的UI，GHCJS可能是正确的选择。

以下是我编写的一个比较复杂的组件 - 它模拟了一个按钮列表，我可以在单击最右边的按钮时展开，或者缩小到其他按钮之一的大小（我使用它类似于“评价这个X星”，但星星可以是任意多个。）

listWidget :: MonadWidget t m => Int -> m (Event t Int)
listWidget n = leftmost <$> traverse button' [(-1)..(n+1)]

listWidget2 :: MonadWidget t m => m ()
listWidget2 = mdo
  clicked <- switchPromptlyDyn <$> widgetHold (listWidget (-1))
                                              (listWidget <$> clicked)
  return ()

button' :: (MonadWidget t m, Show a) => a -> m (Event t a)
button' val = (fmap $ const val) <$> button (text . pack $ show val)

UPDATE：

普通Javascript所具有的问题是可伸缩性，如果你有大量的Javascript维护和更改代码，由于缺乏类型系统和动态性质，容易出错且繁琐。为了解决这些问题，出现了大量的“编译到JS”语言 - 带有GHCJS的Haskell就是其中之一。

如何用ghcjs编码<h1>标签

2 个答案:

UPDATE：