Require.js 与 jQueryMobile-Router

Question

我在我的 html 中加载了包含 jQuery 的 require.js：

<script data-main="requires" src="lib/require-jquery.js"></script>

我的 requires.js 的内容：

require.config( {
      paths: {
            "jquery.mobile": "lib/jquery.mobile",
            "jquery.mobile.router": "lib/jquery.mobile.router"

      },
      shim: {
            "jquery.mobile" : {
                "exports": "$.mobile"
            },
            "jquery.mobile.router": {
                  "deps": [ "jquery.mobile" ],
                  "exports": "$.mobile.Router"
            }

      }

} );

require(["jquery.mobile.router" ], function() {
    require(["router"]);
} );

在我的 router.js 中，我创建了一个 jquery mobile router plugin 的新实例：

router = new $.mobile.Router(...);

这给了我这个错误：

Uncaught TypeError: undefined is not a function

当我输出 $ 和 $.mobile 时，它​​们都是定义的，只是 $.mobile.Router 是未定义的。

我在这里做错了什么？

Answer 1

我的问题是我添加了 jquery.mobile 作为 jquery.mobile.router 的依赖项，因此将首先加载 jQuery mobile，正如路由器文档所述：

jQuery Mobile 路由器 javascript 文件必须在 jQuery Mobile 之前加载。

这就是我更改我的 requires.js 来解决问题的方式：

require.config( {

    paths: {
        "jquery.mobile": "lib/jquery.mobile",
        "jquery.mobile.router": "lib/jquery.mobile.router"
    },

    shim: {
        "router": {
            "deps" : ["jquery.mobile"]
        },
        "jquery.mobile" : {
            "deps" : [ "jquery.mobile.router"],
            "exports": "$.mobile" 
        },

        "jquery.mobile.router": {
          "exports": "$.mobile.Router"
        }
    }
});

require(["router"]);

现在我只需要我的 router.js 并将 jquery.mobile 和 jquery.mobile.router 作为依赖项加载。现在加载顺序是这样的：

1. jquery.mobile.router
2. jquery.mobile
3. 路由器

Answer 2

在你的 router.js 文件中试试这个：-

define(["jquery", "jquery.mobile.router"], function($) {
    // your js code in router.js
} );

通过在您的定义调用中指定jquery 并将$ 作为参数传入，jquery 对象$ 和jquery.mobile.router 中定义的相关函数现在可以在您的代码范围内使用（包含在完整的文件router.js）。