Question

以下是我网站的设置：

的index.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>

你好-有线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"}
---------------------------------------------------

所以看起来我错过了什么，但我不知道该怎么做。有人可以帮忙吗？

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

Scripts folder in my website

EDIT 好的我稍微改变了项目结构和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>

enter image description here

现在我没有获得任何404，但我没有“Packages”配置部分。我在更改HTML后确实获得了404，但我已经通过将/js文件放在预期的位置来修复它们。毕竟，我仍然得到同样的错误：

enter image description here

Answer 1

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

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

此外，Brian说的是真的。您应该在模块中使用本地jquery实例，如下所示：

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

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

Answer 2

乍一看，看起来它可能是AMD加载程序配置问题。我通常会尝试将每个库中的cujojs（wire，when等）保存在自己的文件夹中，例如，将wire保留在wire /目录中。然后，我为每个设置AMD包配置。 See here for an example如何做到这一点 - 看起来你的一些代码基于我的hello-wire.js example，所以你可以尝试在那里模拟包配置并为你的目录布局调整它。

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

可能不相关，只是一个建议：看起来你正在使用jQuery作为全局而不是严格地作为AMD模块 - 例如。它列在您的AMD dep列表中，但不是您的AMD工厂功能的参数。这可能是最初的，但你可能想在某个时候走完整条AMD路线。

无法理解为什么wire.js无法创建对象

2 个答案: