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

【问题标题】：requirejs fundamentals: underscore + backbone + jqueryrequirejs 基础：下划线 + 主干 + jquery
【发布时间】：2013-05-17 17:45:52
【问题描述】：

我想使用 require.js、backscore.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

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

编辑：目录结构如下：

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

【问题讨论】：

标签： backbone.js requirejs

【解决方案1】：

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

app.js

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

    'use strict';

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

【讨论】：

【解决方案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: '$'
        }
    }
 });

【讨论】：

好吧，不。 baseUrl 指出应该在哪里查找不以“http*”开头的文件。此外，如果没有找到 app.js 文件，则会引发 404 错误（我已经有类似的东西，已修复它，所以我知道不是这样）。

【解决方案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 都没有被引用。它们已经加载完毕。

【讨论】：

【解决方案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 代替，因为你在那里定义它并在你的 init.js 文件中执行 app.js

【讨论】：