1

这是我的网站的设置：

索引.html

<!DOCTYPE html>
<html>
    <head>
        <script>
            var require = {
                paths : {
                    jQuery : "jquery-1.7.2.min"
                },
                baseUrl: "/scripts"
            };
        </script>
        <title>Javascript RequireJS Example</title>
    </head>
    <body>
        <div id="test"></div>
        <script src="scripts/require.js" type="text/javascript" data-main="main.js"></script>
    </body>
</html>

hello-wired-spec.js

define({
    message: "I haz been wired",
    node : "#test",

    helloWired: {
        create: {
            module: 'hello-wired'
        },
        ready: {
            sayHello: [{ $ref : 'node' }, { $ref : "message" }]
        }
    },

    plugins: [
        { module: 'debug', trace: true }
    ]
});

你好-wired.js

define(["jQuery"], function() {
    function HelloWired() {}

    HelloWired.prototype = {
        sayHello: function(node, message) {
            $(node).html("Hello! " + message);
        }
    };

    return HelloWired;
});

main.js

require(["wire!hello-wired-spec", "jQuery"], function (spec) {
    console.log(spec);
});

所以我正在使用Require.js并wire.js编写一个简单的 IoC 原型网站。我的问题是，当我加载 index.html 页面时，我在浏览器的控制台中看到以下内容：

DEBUG (total: 1ms, context: 0ms / 0ms): Context init
---------------------------------------------------

WIRING: No progress in 5000ms, status:
     checkPaths()

logger.error(tag + ': No progress in ' + timeout + 'ms, status:');

---------------------------------------------------

Components that DID NOT finish wiring

plugins[]: created
   Object { module= "debug" , trace= true , id= "plugins[]" }

helloWired: created
   Object { create={...}, ready={...}, id="helloWired"}
---------------------------------------------------

所以看起来我错过了一些东西，但我不知道在这里做什么。有人可以帮忙吗？

编辑这是Scripts我网站中的文件夹：

我网站中的脚本文件夹

编辑好的我稍微改变了项目结构和HTML页面：

<!DOCTYPE html>
<html>
    <head>
        <script>
            var require = {
                paths : {
                    jquery : "jquery-1.7.2.min",
                    wire : "wire/wire"
                },
                baseUrl: "/scripts",
                packages: [
                    { name: 'wire', location: 'wire', main: 'wire' },
                    { name: 'when', location: 'when', main: 'when' },
                    { name: 'aop', location: 'aop', main: 'aop' }
                ]
            };
        </script>
        <title>Javascript RequireJS Example</title>
    </head>
    <body>
        <div id="test"></div>
        <script src="scripts/require.js" type="text/javascript" data-main="main.js"></script>
    </body>
</html>

在此处输入图像描述

现在我之前没有得到任何 404，但我也没有“包”配置部分。在更改 HTML 后，我确实得到了一些 404，但我已经通过将/js文件放置在预期的位置来修复这些问题。毕竟这一切，我仍然得到同样的错误：

在此处输入图像描述

4

2 回答 2

1

问题是 jQuery 的大小写。当使用定义了自己名称的模块（例如 jQuery）时，您必须在路径配置和其他地方使用完全相同的名称。jQuery 将自己命名为“jquery”，而不是“jQuery”。

在代码中的任何地方将“jQuery”更改为“jquery”。

另外，布赖恩说的是真的。您应该像这样在模块中使用本地 jquery 实例：

define(["jquery"], function ($) { /* use $ here */ });

这减少了您对全局变量的依赖，还允许您同时使用多个版本的 jquery。

于 2012-07-19T20:09:51.517 回答
0

乍一看，这可能是 AMD 加载程序配置问题。我通常会尝试将每个库的 cujojs 片段（wire、when 等）保存在自己的文件夹中，例如，将 wire 保存在 wire/ 目录中。然后，我为每个设置 AMD 软件包配置。 有关如何执行此操作的示例，请参见此处- 看起来您的某些代码基于我的hello-wire.js 示例，因此您可以尝试在那里模拟包配置并为您的目录布局调整它。

您可以检查的一件事是 Firebug 或 WebKit 中的网络面板，以查看文件是否正在加载，或者是否有 404。

可能不相关，只是一个建议：看起来您将 jQuery 用作全局而不是严格地用作 AMD 模块——例如，它列在您的 AMD dep 列表中，但不是您的 AMD 工厂函数的参数。最初可能没问题，但您可能想在某个时候走完整的 AMD 路线。

于 2012-07-19T16:34:47.620 回答