javascript - Require.js 与 jQueryMobile-Router

Question

我在我的 html 中加载了带有 jQ​​uery 的 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 移动路由器插件实例：

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

这给了我这个错误：

未捕获的类型错误：未定义不是函数

当我输出 $ 和 $.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中）。