17

我正在使用backbone.js开发一个javascript应用程序，也就是说，为了便于开发，我以这种方式构建我的文件

app
 |
 + views
 |    L movieRow.js
 |    L movieDetail.js
 |
 + models
 |    L movie.js
 |    L tvshow.js
 |
 + collections
 |    L movies.js
 |    L tvshows.js
 |
 + templates
 |    L movieList.tpl
 |    L movieDetail.tpl
 |    L applicationUI.tpl
 |
 L application.js

现在，有很多 javascript 文件要服务器给用户，我看到一些关于 labjs 或 require.js 的嗡嗡声，并决定用它进行测试。但我不知道如何将我所有的主干模型或视图重写为这些 require.js 模块。

在正确方向上的任何帮助都会很好。

4

2 回答 2

20

理解 require 的关键（至少在我的小脑袋里）是记住，你从函数返回的内容将可用于拉入（或 require）这个模块的其他模块。所以在下面的代码中，我需要 jquery 和主干（jquery 是“require-jquery”处理的一种特殊情况）。当这两个可用时，它将调用我的函数，并且该函数将返回我创建的 View 构造函数。

define([    
    'jquery'
    'libraries/backbone'
], function ($) {
        var MovieRow = Backbone.View.extend({
            render: function () {

                return this;
            }
        });

        return MovieRow;
});

然后你可能会在你的页面上写这样的东西。请注意，jquery 是数组中的第一个必需项。这对应于我的函数中的第一个参数。视图排名第二，模型排名第三。然后我可以使用上面的“定义”代码中的返回值，它是构造函数。

require({
    baseUrl: '/'
},[
    'jquery',
    'app/views/movieRow',
    'app/models/movie',
    'libraries/backbone'
], 
function ($, MovieRowView, Movie) {
    var view = new MovieRowView({model : new Movie());
    $('body').append(view.render().el);        
});

希望这会有所帮助......我们一直喜欢 Backbone 和 Require :)

于 2011-09-08T19:32:57.543 回答
4

我的评论空间不足，想包含一些代码，所以我提出了第二个答案：

@timDunham 发布的大部分内容都非常好，尽管我有一些额外的内容可能有人会加入以进一步理解。

在代码中：

define([    
    'jquery'
    'libraries/backbone'
]

我相信下划线不见了。首先，Backbone 需要 Underscore 才能运行，没有它我认为它会崩溃。其次，除非您使用 Underscore 和 Backbone 的 AMDJS 分支，否则它们不支持 AMD。下划线删除了 v1.3.0 对 AMD 的支持。如果我们假设我们使用的是非 AMD 下划线和主干，它们可能不属于define[]并且应该是require[]。

因此，如果您正确使用 AMDJS 版本，则正确的定义看起来像这样：

define([    
    'jquery',
    'underscore',
    'Backbone'
], function($, _, Backbone) { ... });

这假设我在需要配置中创建了路径：

require.config({
    paths : {
        jquery : 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min',
        underscore : '../../libs/js/underscore/underscore.min',
        Backbone : '../../libs/js/backbone/backbone',
    }
});

我见过一些不使用 AMDJS 版本的实现，而这些实现是因为它们不是异步模块，所以你必须确保它们以正确的顺序加载。

我相信这不能保证加载依赖项的正确顺序：

require({
    baseUrl: '/'
},[
    'jquery',
    'app/views/movieRow',
    'app/models/movie',
    'libraries/backbone'
],

因为某些东西被列为依赖项，并不意味着它会在需要时加载。对于异步模块，这不是问题，但在这个例子中我没有看到它被提到，所以我们假设它们不是 AMD。这个模块依赖于 jquery、movieRow、movie 和主干。但是如果主干试图在 jquery 之前加载... (x_x) 为什么世界为什么？

这就是为什么我相信 require.js 有一个名为 order 的插件！救援。有订单！您可以设置您的依赖项，它会以......好吧......顺序加载脚本。像这样的东西：

require({
    baseUrl: '/'
},[
    'order!jquery',
    'app/views/movieRow',
    'app/models/movie',
    'order!libraries/underscore',  // <- Don't forget me!
    'order!libraries/backbone'
]

我相信这样，您的模块将评估并保证首先加载 jquery，然后是下划线，然后是主干。不保证movieRow 或movie，尽管在这种情况下，谁在乎？:-)

我在我的项目中使用 AMDJS-Backbone 和 AMDJS-Underscore 分支，所以我通常将它们放入其中，define[]并且它可以顺利工作。RequireJS 真的很棒，并且显着地清理了我的代码。我所到之处 RequireJS 的作者JRBurke 到处出现，他总是对有关require.js 的所有内容的评论非常乐于助人。我的意思是一切。我的理论是他通过心灵感应连接到 Require 并且任何时候在网络上出现一个新的 requirejs 实例时，他都可以立即访问该知识。我敢打赌，如果这个话题讨论继续下去，他也会弹出来打个招呼。

我的免责声明是我也是 Require 的新手，我可能会误解一些事情。但据我所知，我认为这些额外的指针和信息可能会帮助人们使用 require 组合更好的代码。

参考：

于 2012-03-29T19:21:33.190 回答