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

【问题标题】：Cannot understand why wire.js is failing to create object无法理解为什么wire.js 无法创建对象
【发布时间】：2012-07-19 14:34:00
【问题描述】：

这是我网站的设置：

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>

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 }
    ]
});

hello-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 文件放在预期的位置来修复这些问题。毕竟这一切，我仍然得到同样的错误：

【问题讨论】：

标签： jquery requirejs js-amd wirejs

【解决方案1】：

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

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

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

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

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

【讨论】：

+1 将大小写更改为“jquery”似乎有所帮助，因为我现在没有收到“$ 未定义”类型的错误。

【解决方案2】：

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

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

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

【讨论】：

我尝试重新构建项目。我将发布脚本文件夹的更新图像。但是，这并没有阻止错误。我还将发布错误的图片。现在，我需要睡一会儿:)