Scalatags生成HTML还是Javascript

Does Scalatags generate HTML or Javascript?

本文关键字：Javascript 还是 HTML 生成 Scalatags      更新时间：2024-01-05

我看到一些Scala代码似乎可以生成HTML。。。

  def pagePlay: TypedTag[dom.raw.HTMLElement] = div{
    val levels = Array(
      (10, "Easy game; you are allowed 10 misses."),
      (5, "Medium game; you are allowed 5 misses."),
      (3, "Hard game; you are allowed 3 misses.")
    )
    div(
      p("Inspired from ")(a(href:="http://www.yiiframework.com/demos/hangman/", target:="_blank","Yii's demo")),
      p("This is the game of Hangman. You must guess a word, a letter at a time.'n" +
        "If you make too many mistakes, you lose the game!"),
      form(id := "playForm")(
        for((level,text) <- levels) yield {
          val levelId = s"level_${level}"
          div(`class`:="radio")(
            input(id:=levelId, `type`:="radio", name:="level", onclick:={ ()=>
              Model.level() = level
            }, {if(level == Model.level()) checked:="checked"}),
            label(`for`:=levelId, style:="padding-left: 5px")(text)
          )
        }, br,
        input(`type`:="button", value:="Play!", `class`:="btn btn-primary", onclick:={ () =>
          if(Model.level() > 0) {
            Model.start()
            goto(pageGuess)
          }else{
            dom.alert("Please select level!")
          }
        })
      )
    )
  }

^这段ScalaTag代码实际上是在生成HTML，而HTML可以由一个没有javascript支持的简单网络爬虫读取，还是在生成javascript，修改DOM以生成div和段落？

我试着阅读文档，但对于div和p，除了"Pattern:div:Tags.this.ConcreteHtmlTag[html.div]"

它同时使用两者，至少现在它使用了：

来自文档：

Although Scalatags was originally a HTML-String generation library, it now
ships with an additional backend that runs only on ScalaJS.

此外：

DOM后端提供了一个额外的方法.render on all Scalatags片段，它将片段转换为DOM树：

val elem = div.render
assert(elem.children.length == 0)
elem.appendChild(p(1, "wtf", "bbq").render)
assert(elem.children.length == 1)
val pElem = elem.children(0).asInstanceOf[Paragraph]
assert(pElem.childNodes.length == 3)
assert(pElem.textContent == "1wtfbbq")
As you can see, you can manipulate DOM elements directly, calling standard DOM APIs like .children, .appendChild, etc.

正如您所看到的，您可以直接操作DOM元素，调用标准的DOMAPI，如.childs、.appendChild等。正如您所知，这些都是Javascript！

相关文章：