Question

Scala.js documentation有一个很好的例子，说明如何实现一个也支持链接的jQuery外观：

@js.native
trait JQueryGreenify extends JQuery {
  def greenify(): this.type = ???
}

object JQueryGreenify {
  implicit def jq2greenify(jq: JQuery): JQueryGreenify =
   jq.asInstanceOf[JQueryGreenify]
}

但据我所知，此示例假定已在Javascript中实现了greenify插件。例如。像

$.fn.greenify = function() {
  this.css( "color", "green" );
  return this;
}

如何在Scala.js中实现此插件？

Answer 1

有两种方法可以在Scala.js中定义“jQuery插件”。第一种方法是一种安全且惯用的Scala-esque方式，但仅供其他Scala.js代码使用。第二个有点难看，但它可以被JavaScript代码使用。

对于Scala.js

在Scala和Scala.js中，不鼓励使用实际jQuery插件所做的补丁原型。相反，我们使用隐式类：

implicit class JQueryGreenify(val self: JQuery) extends AnyVal {
  def greenify(): self.type = {
    self.css("color", "green")
    self
  }
}

然后你可以简单地做

jQuery("#some-element").greenify()

当您在范围内JQueryGreenify时（通常是导入）。

此方法不会污染jQuery对象的实际原型。它是纯Scala抽象。它干净且安全，但这意味着JavaScript代码无法使用它。

对于JavaScript

如果您需要从JavaScript调用greenify，实际上需要在jQuery.fn对象上添加一个函数属性。由于该函数需要使用this参数，因此我们必须明确将其归于js.ThisFunction（另请参阅Access the JS this from scala.js）：

js.Dynamic.global.jQuery.fn.greenify = { (self: JQuery) =>
  self.css("color", "green")
  self
}: js.ThisFunction

这基本上是问题中原始JavaScript代码的音译。

如何使用Scala.js

1 个答案:

对于Scala.js

对于JavaScript