Question

我想使用require.js，backbone.js和underscore.js制作骨架应用。根据www教程我创建了一个骨架，但我在某个地方有一个bug。

这是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

问题是：如果在app中定义init.js，为什么app.js未定义？

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

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

Answer 1

您的app.js需要致电define，而不是require。这将为其他模块提供名为“app”的模块：

<强> app.js

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

    'use strict';

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

Answer 2

我认为你需要在你的路径中添加应用程序，以便需要它。

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: '$'
        }
    }
 });

Answer 3

我认为你可能遇到的是一些语法问题比什么都重要。这是我如何设置我在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都没有被引用。他们已经装好了。

Answer 4

我在你的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（）函数做了以下三件事：

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

Require（）函数仅完成步骤1和2.

您应该在app.js文件中使用define而不是require，因为您在那里定义并在init.js文件中执行app.js

requirejs基础：下划线+主干+ jquery

4 个答案: