GwtQuery - 从外部 js 文件调用函数答案

【问题标题】：GwtQuery - Call a function from external js fileGwtQuery - 从外部 js 文件调用函数
【发布时间】：2013-07-14 20:48:15
【问题描述】：

我们将 GWT 2.3.0 用于我们的 Web 应用程序。我们已经开始将 gwtquery 用于我们的一些功能。

我想知道是否可以从 gwtquery 调用 js 文件中的 jquery 函数。

【问题讨论】：

标签： gwtquery

【解决方案1】：

gwtquery aka gQuery 是一个完全重写的 jquery for java 实现。

gQuery 的目标之一是拥有 jquery 的大部分功能（css 选择器、dom 操作、效果、promise、ajax 等），但不必导入外部 jquery.js 库，受益于gwt（优化、性能、死代码删除等）。

因此，gQuery 和 jQuery 不能共享插件，因此如果您在应用中使用 jquery.js，因为您使用的是 jquery-plugin，您仍然需要在项目中导入 jquery。

综上所述，如果你想使用jquery的语法但在gwt中，你不需要导入jquery而不是从java调用外部js方法。

import static com.google.gwt.query.client.GQuery.*;

public void onModuleLoad() {
    //add a click handler on the button
    $("button").click(new Function(){
      public void f() {
        //display the text with effects and animate its background color
        $("#text").as(Effects)
          .clipDown()
          .animate("backgroundColor: 'yellow'", 500)
          .delay(1000)
          .animate("backgroundColor: '#fff'", 1500);
      }
    });
}

否则，如果你不使用gqueyr，并且想在你的页面中导入jquery，为了从gwt调用一些方法，你必须编写jsni方法：

native void enhanceMyButton() /*-{
    $("button").click(function() {
        //display the text with effects and animate its background color
        $("#text").as(Effects)
          .clipDown()
          .animate("backgroundColor: 'yellow'", 500)
          .delay(1000)
          .animate("backgroundColor: '#fff'", 1500);
    });
}-*/;

最后，在 gwtquery 中，我们正在努力公开 gquery 方法以集成纯 jquery 代码。这项工作是在我们称为 jsQuery 的模块上完成的，主要目标是：设计人员可以在 html 或 ui.xml 中添加 jquery 代码，而无需导入外部 jquery.js，并且它可以是一种快速的移植方式gquery 的 jquery 插件。

仅供参考：我在这里发布了一些 benefits of using gquery 作为 gwt 的补充

【讨论】：