如何编码< h1>标签与ghcjs [英] how to code <h1> tags with ghcjs

问题描述

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

  h1 {font-family：Helvetica; } p {font-family：Helvetica;颜色：蓝色; }  

< h1> Hello World< / h1>< ; p>这是我的测试文档。< / p>

$ b

ghcjs只是一个组合器，基本上是将HTML输入为输出字符串？或者Haskell在某处存储DOM模型？我的问题是关于所有html标记和CSS，但其他标记可能具有不同的特征。

$ b $首先 - 正如@Cubic已经说过的 - 我认为你很困惑GHCJS是什么。

GHCJS是一个编译器，它可以让你将Haskell代码编译成Javascript - 渲染一个简单的html / css页面并不是它设计的任务。正如我们用德语所说的那样，它是Mit Kanonen auf Spatzenschießen - 或者更短的矫枉过正。

那么我会用它来写一个给定的haskell的前端后端是非常好的，你可以分享你现有的所有类型，并获得你在haskell生态系统中的所有可维护性和安全性。

但即使你不有一个haskell后端，你争抢新奇和好主意 - GHCJS可能会让你感兴趣，我自己对功能性反应式编程颇为陌生，并且在现在学习反射/反射之前尝试过purescript（使用pux）结束dsl）对我的大脑和喜悦是一个挑战 - 我知道这个段落颇有见地，但反射中呈现的抽象看起来是正确的，似乎表明了其他功能反应框架的一些缺点......

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

  { - ＃LANGUAGE OverloadedStrings＃ - } 
 im port reflex 
 import Reflex.Dom 
 
 main :: IO（）
 main = mainWidgetWithCssh1 {font-family：Helvetica;} p {font-family：Helvetica;颜色：蓝色;}$ do 
 elh1$ textHello World！
 elp$ text这是我的测试文档
  

正如我所说的 - 过度杀伤 - 你会得到一个完整的运行时间，一大堆js，当一些简单的html / css可以满足时。但是为了在可重用组件中生成复杂的用户界面，GHCJS可能是正确的选择。下面是我写过的更复杂的组件之一 - 它建模一个列表当我点击最右边的按钮时，我可以展开的按钮，或缩小到其他按钮之一的大小（我用它来表示评价这个X星，但星星可以是任意多的）。

  listWidget :: MonadWidget tm => Int  - > m（Event t Int）
 listWidget n = leftmost< $ >遍历按钮'[（-1）..（n + 1）] 
 
 listWidget2 :: MonadWidget tm => m（）
 listWidget2 = mdo 
 click< ;  -  switchPromptlyDyn< $> widgetHold（listWidget（-1））
 （listWidget< $>点击）
 return（）
 
 button'::（MonadWidget t m，显示a）=> a  - > m（Event t a）
 button'val =（fmap $ const val）< $>按钮（text。pack $ show val）
  

更新：

如果您有大量Javascript维护和更改代码，由于缺少类型系统和动态特性，会导致错误和繁琐，所以纯Javascript存在的问题是可扩展性。为了弥补这些问题，已经出现了大量的编译成JS语言--Haskell和GHCJS就是其中之一。

I have found the ghcjs documentation very limited. Here is this basic HTML document.

h1 { font-family: Helvetica; }

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

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

Is ghcjs just a combinator, basically typing the HTML as an output string? Or does Haskell store a model of DOM somewhere?

My question is about all html tags and CSS, but maybe other tags have different features.

解决方案

First of all - as @Cubic already said - I think you are confused what GHCJS is.

GHCJS is a Compiler that lets you compile Haskell code to Javascript - rendering a simple page of html/css is not the task it was designed for. It is "Mit Kanonen auf Spatzen schießen" as we say in German - or shorter overkill.

So what would I use it for writing a front-end to a given haskell backend is really nice, you can share all your existing types and get all the maintainability and safety you have in the haskell eco-system.

But even if you don't have a haskell backend and you strife for novelty and good ideas - GHCJS might interest you, I myself am quite new to functional reactive programming, and having tried purescript(with pux) before now learning reflex/reflex-dom (my choice of front-end dsl) is a challenge for my brain and a delight - I know this paragraph is quite opinionated, but the abstractions presented in reflex seem right and seem to make clear some of the shortcomings of other functional reactive frameworks…

So how would one render the above in with the aforementioned libraries:

{-# 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"

This is - as I said - overkill - you get a full run-time, a big chunk of js when some plain html/css would have sufficed. But for generating a complex UI in reusable components GHCJS might be the right choice.

The following is one of the more complex components I have yet written - it models a list of buttons that I can expand when clicking on the rightmost button, or shrink to the size of one of the other buttons (i use this for something like a "rate this X stars" but the stars can be arbitrary many).

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:

The problem that plain Javascript has is scalability if you have a large amount of Javascript maintaining and changing code gets error prone and tedious because of the lacking type system and the dynamic nature. To remedy these problems there have come up a vast number of "compile-to-JS" languages - Haskell with GHCJS being one of them.

这篇关于如何编码< h1>标签与ghcjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！