Requirejs2：如何处理自己的文件？答案

【问题标题】：Requirejs2: How to handle own files?Requirejs2：如何处理自己的文件？
【发布时间】：2012-06-29 07:59:36
【问题描述】：

我已经配置 requirejs 来加载核心库（jquery、下划线、主干）。现在我想添加我的主干模型、控制器、视图等以异步加载

我发现了很多关于这个主题的教程和很多“现成的”样板，不幸的是我提到大多数方法已经过时或相当复杂（即使有更好的方法）。

一个例子是我如何为主要库配置 requirejs： https://stackoverflow.com/a/10914666/1309847

那么如何使用简单有效的 Requirejs 配置加载主干视图、模型、集合、路由器、控制器和模板？

我听从了你的建议，但遇到了一些奇怪的错误

main.js

require.config({
    paths: {
        jquery: 'vendors/jquery/jquery',
        underscore: 'vendors/underscore/underscore',
        backbone: 'vendors/backbone/backbone'
    },
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        }
    }
});

require(['app'], function(app){

});

app.js

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone){
    var Message = new Backbone.Model.extend({
        //idAttribute: '_id',
        //defaults: { body: '' }
        //url: function(){ return this.id ? '/messages/' + this.id : '/messages'; }
    });

    var newMessage = new Message({ body: 'hi' });
    newMessage.save();
});

app.js中出现错误：

Uncaught TypeError: Object [object Object] has no method 'apply'

当我评论新的 Backbone.Model.extend 部分时，我不再收到任何错误。

【问题讨论】：

加载下划线或主干似乎有问题。在 app.js 的第二行放置一个断点并检查“_”或“Backbone”是否未定义。在这种情况下，请检查您的路径以及寻找兼容性问题的库版本。如果一切都失败了，请尝试使用 AMD 版本的 Backbone 和 undercore：github.com/amdjs
我做了一个包含所有三个参数的console.log。所有三个看起来都有效，但我已经指定了更多错误。当我想创建一个新的 Message 实例时会发生这种情况。（我也可以取消注释模式，但实例化它会给出错误）
好的，去掉“var Message = new Backbone.Model.extend”这一行中的“new”。它应该是 var Message = Backbone.Model.extend
就是这样 :) 感谢您的帮助，我永远不会独自管理
没问题，很高兴为您提供帮助

标签： backbone.js requirejs

【解决方案1】：

根据我的经验，引导应用程序的最佳方式是创建 Backbone.Router。因此，您可以将 url 与您的应用程序功能相关联。如果您使用的是 RequireJS+Backbone，您可能有一个 main.js，其中配置了 RequireJS（路径、垫片等）。第一次调用“require”用于加载初始脚本以引导整个应用程序。例如：

/**
* main.js - RequireJS bootstrap
*/
require.config({
  paths: {
    //your paths
  },
  shim: {
    //your shims
  }
});

require(
  [
    'app' //app.js is at the same directory as main.js 
  ],
  function(app) {
    app.init();
  }
);

然后在 app.js 中你可以创建一个新的路由器实例，或者你可以开始创建视图和模型。

【讨论】：

谢谢你的榜样！在学习骨干网时，我尝试首先使用带有视图、模型、集合等的 app.js 来遵循您的建议。但这给出了一些奇怪的错误。我已经编辑了开始线程

【解决方案2】：

所以我现在理解正确：你必须在你自己的自定义 js 文件周围包装一个 requirejs 函数。

该函数称为define。第一个参数是您在 main.js 文件中定义的依赖项数组，或者是您的另一个自定义 js 的相对路径。第二个参数是保存原始文件的回调。重要的是您返回要共享的对象、函数、数组或变量。

整个过程是这样的：

define(
    ['underscore', 'backbone'], // the dependencies (either relative paths or shortcuts defined in main.js
    function(_, Backbone){ // the return statement of the deps mapped to a var
        var MessageModel = Backbone.Model.extend({ // the original code, file
            defaults: { body: '' },

            initialize: function(){}
        });

        return MessageModel; // the return statement, sharing the "final result", sometimes you return the initialize parameter
    });

包装模型的集合也是如此：

define(
    ['jquery', 'underscore', 'backbone', 'models/message_model'], // deps and the last one is the relative path
     function($, _, Backbone,MessageModel){ // same as above explained
var MessageCollection = Backbone.Collection.extend({
    model: MessageModel,

    initialize: function(){}
});

return MessageCollection;

});

我现在只需要弄清楚如何引导到整个应用程序。但我认为我需要更多的骨干知识才能做到这一点:)

【讨论】：