Backbonejs 应用程序的 Requirejs

Question

我想使用 Requirejs 来运行 Backbonejs 应用程序。这是我的基本设置。

根/
根目录/index.htm
根目录/脚本/
根/脚本/require-jquery.js
根/脚本/order.js
根/脚本/main.js
根目录/scripts/app.js
根/脚本/app.build.js
root/scripts/backbone.js

index.htm

<script data-main="scripts/main" src="scripts/require-jquery.js"></script>
<div id="home"></div>

ma​​in.js

require([
    "order!http://documentcloud.github.com/underscore/underscore.js",
    "order!backbone",
    "order!app"
    ],function(_,Backbone,app){
    app.init();
});

app.js

define(["jquery","underscore"],function($,_){
    var init = function(){
        var arr = ['orange','apple','bannana'];
        _.each(arr,function(fruit){
            console.log(fruit);
        });
    };

    return { init: init };
});

backbone.js

define(["order!http://documentcloud.github.com/backbone/backbone.js"], 
    function(){
        return Backbone;
}); 

我没有还没有进入 Backbone 的内容，因为我在当前设置中遇到了错误...

第 150 行：_ 在 _.extend(Backbone.Model.prototype, Backbone.Events, {) 处未定义

我我试图让这个东西尽可能简单，并能够最终添加我的路由器、模型等......并在路上构建这个东西......

来让这个东西摇摆？

我在我的设置中缺少什么 ，使用本地 js 文件而不是尝试从 CDN 加载内容会更好吗？

Answer 1

以下内容可能会有所帮助：

Requirejs 的顺序确实不适用于优先级配置和 CDN 依赖项

简而言之，require 不能与 CDN 资产和 order.js 完美配合——您必须嵌套您的 require 调用（这有点糟糕）。

通常我使用主干和下划线的本地副本，它们与 order! 插件配合得很好

Answer 2

在这种情况下，如果您有已知的依赖层次结构，您可能需要尝试使用 requirejs 的 shim 功能。由于您知道主干具有 jQuery 和 Underscore 的依赖关系，因此您可以相应地对主干进行填充。

过去，这是我处理这种情况的方法（我还提供了一些示例代码，说明如何通过 CDN 加载依赖项并使用本地回退，如果您选择，也可以使用 Bower 目录）。我建议确保您使用 requirejs 来捆绑您的资源（节省时间并提高性能）：

main.js

requirejs.config({
    baseUrl: 'vendor',
    paths: {
        data:       '../data',
        tmpl:       './tmpl',
        views:      '../views',
        router:     '../router',
        jquery:     ['//yourCDNhere.tld/jquery/jquery.min', './jquery/jquery-2.0.0.min'],
        backbone:   ['//yourCDNhere.tld/backbone/backbone.min', './backbone/backbone.min'],
        etc...
    },
    deps: ['router'],
    shim: {
        'backbone': {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },
        'jquery': {
            exports: '
 router.js
define( function( require ) {
    var Backbone = require( 'backbone' );
    var DashboardView = require( 'views/dashboard' );

    return Backbone.Router.extend({
        // Define some basic routes
        routes: {
            '': 'renderDashboard'
        },

        // Initialize the router
        initialize: function() {
            _.bindAll( this );
            
            return this;
        },

        renderDashboard: function(){
            var dashboardView = new DashboardView();
        }
    });
});


        },
        'underscore': {
            exports: '_'
        }
    }
});

require(['jquery', 'underscore', 'backbone', 'router'], function( $, _, Backbone, Router ) {
    var router = new Router();
    Backbone.history.start();
});

router.js