如何使用 Scala.js 实现 jQuery 插件

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]
}

然而据我所知，这个例子假设 greenify 插件已经在 Javascript 中实现。例如。喜欢

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

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

Answer 1

有两种方法可以在Scala.js中定义"jQuery plugin"。第一个是安全且符合 Scala 风格的惯用方式，但仅供其他 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 （另请参见）：

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

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

如何使用 Scala.js 实现 jQuery 插件

How to implement a jQuery Plugin using Scala.js

scala.js

对于Scala.js

对于JavaScript