1

我想使用 require.js、backbone.js 和 underscore.js 制作一个骨架应用程序。根据 www 教程，我创建了一个骨架，但我在某处有一个错误。

这是 init.js 代码：

requirejs.config({
    baseUrl: 'js',
    paths: {
        jquery: 'http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery',
        underscore: 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore',
        backbone: 'http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone'
    },
    shim: {
        backbone: {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },
        underscore: {
            exports: '_'
        },
        jquery: {
            exports: '$'
        }
    }
});

require(['underscore', 'backbone', 'app'],
function(_, Backbone, app) {
    console.log(app);
    app.start();
});

这是 app.js：

require(['underscore', 'backbone'],
function(_, Backbone) {

    'use strict';

    return {
        start: function() {
            console.log('APP', 'start');
        }
    };
});

这是 index.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Wealthy Laughing Duck</title>
        <script data-main="js/init" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.5/require.min.js"></script>
    </head>
    <body>
    </body>
</html>

我面临的问题是 app.js 文件return不起作用（可能 require.js 有问题）。控制台输出为：

undefined ----- init.js:24
Uncaught TypeError: Cannot call method 'start' of undefined ----- init.js:25

问题是：为什么appundefined inside init.js，如果它被定义在app.js？

编辑：目录结构如下所示：

/ index.html
/ js / init.js
/ js / app.js
4

4 回答 4

3

您的 app.js 需要调用define，而不是require. 这将为其他模块提供一个名为“app”的模块：

应用程序.js

define(['underscore', 'backbone'],
function(_, Backbone) {

    'use strict';

    return {
        start: function() {
            console.log('APP', 'start');
        }
    };
});
于 2013-05-17T18:02:36.017 回答
0

我认为您需要将应用程序添加到您的路径中，以便要求它。

requirejs.config({
    baseUrl: 'js',
    paths: {
        jquery: 'http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery',
        underscore: 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4   /underscore',
        backbone: 'http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone'
        app:  '../../App' // your relative pathwhere you have your app.js file
    },
    shim: {
        backbone: {
             deps: ['jquery', 'underscore'],
             exports: 'Backbone'
        },
        underscore: {
            exports: '_'
        },
        jquery: {
            exports: '$'
        }
    }
 });
于 2013-05-17T17:51:44.347 回答
0

我认为您可能遇到的更多的是语法问题。以下是我在 require.js 上方调用的 require_config.js 的设置方式：

require.config({
    baseUrl: '/ui/js',
    paths : {
        'incl' : '/ui/incl'
    },
    shim: {
        'backbone': {
            //These script dependencies should be loaded before loading
            //backbone.js
            deps: ['underscore', 'jquery'],
            //Once loaded, use the global 'Backbone' as the
            //module value.
            exports: 'Backbone'
        }
    }
});

这设置了所有依赖项（我没有路径成员，因为我只是在脚本标签中声明主干、下划线和 jquery）。但是没关系，一旦它们都被定义了，我就不需要再引用它们了。这是一个演示这一点的简单控制器示例：

require([
    'models/myModel',
    'views/myView
], function(MyModel, MyView) {
    var MyController = function() {
        var my_model = new MyModel();
        var view = new MyView({
            model : my_model
        });
    }

    $(function() {
        new MyController();
    });
});

如您所见，没有引用 jQuery、Backbone 和 Underscore。它们已经被加载了。

于 2013-05-17T18:02:32.870 回答
0

我在您的 init.js 中观察到，您在 require 调用中没有必要加载 _ 和主干。您在 init.js 中的 require 调用应该很简单，如下所示：

require(['app'],
function(app) {
    console.log(app);
    app.start();
});

这不是您问题的解决方案，而只是不加载不需要的脚本的好习惯。

基本上我认为这里的问题是关于require和define的使用。

require is always execution and define is definition

Define() 函数做了以下三件事：

  1. 加载指定的依赖项
  2. 调用回调函数
  3. 将回调函数的返回值注册为模块

Require() 函数只完成第 1 步和第 2 步。

您应该在 app.js 文件中使用 define 代替，因为您在那里定义它并在 init.js 文件中执行 app.js

于 2013-07-29T18:02:53.593 回答