0

1.加载JQuery

我定义了以下与 JQuery 接口：

  @js.native
  sealed trait JQuery extends js.Any {
    def hide(): js.Any
  }

  @js.native
  @JSImport("jquery/dist/jquery.slim.min.js", "jQuery")
  object JQuery extends js.Object {
    def apply(x: String): JQuery = js.native
  }

我确认这@JSimport似乎有效，因为捆绑器 js 文件增加了大约等于jquery/dist/jquery.slim.min.js我使用@JSimport而不是JSGlobal.

但是，一旦我运行我的应用程序，当我JQuery("p").hide()得到一个错误的代码时：

Codebook.scala:42 Uncaught TypeError: (0 , $i_jquery$002fdist$002fjquery$002emin$002ejs.jQuery) is not a function
    at Codebook.scala:42
    at $c_sjsr_AnonFunction1.apply__O__O (AnonFunctions.scala:15)
    at HTMLAnchorElement.<anonymous> (mount.scala:106)
(anonymous) @ Codebook.scala:42
$c_sjsr_AnonFunction1.apply__O__O @ AnonFunctions.scala:15
(anonymous) @ mount.scala:106

2.在Bootstrap.js之前加载JQuery

在上述定义之后，如果我添加以下代码与 Bootstrap 接口（并在某处实际使用它，因此它不会“优化掉”），我将在页面加载时立即收到运行时错误：

  @js.native
  sealed trait JQueryBootstrap extends JQuery {
    def collapse(arg: String): js.Any
  }

  @js.native
  @JSImport("bootstrap/dist/js/bootstrap.min.js", "jQuery")
  object JQueryBootstrap extends js.Object {
    def apply(x: String): JQueryBootstrap = js.native

    //TODO not the complete API yet, should be string || "Options":
    //TODO https://bootstrapdocs.com/v3.3.6/docs/javascript/#collapse-methods
    def collapse(arg: String): js.Any = js.native

  }

  implicit class JQueryBootstrapExtra(val jq: JQueryBootstrap) extends AnyVal {

    def collapseToggle = jq.collapse("toggle")

  }

页面加载的错误是：

bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery
    at Object.<anonymous> (bootstrap.min.js:6)
    at __webpack_require__ (bootstrap abeaa4cf57d5fe91d588:19)
    at Object.<anonymous> (Utils.scala:35)
    at Object.<anonymous> (ced2ar3-view-fastopt-bundle.js:102442)
    at __webpack_require__ (bootstrap abeaa4cf57d5fe91d588:19)
    at Object.$env (bootstrap abeaa4cf57d5fe91d588:62)
    at __webpack_require__ (bootstrap abeaa4cf57d5fe91d588:19)
    at bootstrap abeaa4cf57d5fe91d588:62
    at bootstrap abeaa4cf57d5fe91d588:62
(anonymous) @ bootstrap.min.js:6
__webpack_require__ @ bootstrap abeaa4cf57d5fe91d588:19
(anonymous) @ Utils.scala:35
(anonymous) @ ced2ar3-view-fastopt-bundle.js:102442
__webpack_require__ @ bootstrap abeaa4cf57d5fe91d588:19
$env @ bootstrap abeaa4cf57d5fe91d588:62
__webpack_require__ @ bootstrap abeaa4cf57d5fe91d588:19
(anonymous) @ bootstrap abeaa4cf57d5fe91d588:62
(anonymous) @ bootstrap abeaa4cf57d5fe91d588:62

如果我通过动态插入的标签手动加载 js 文件，我已经确认我的代码可以工作<script>，但是其中一个问题（除了混乱和代码大小优化）是我无法轻松控制加载顺序，但我离题了...

4

0 回答 0