尝试使用 requirejs 实例化 Marionette 应用程序时出现“对象不是函数”错误答案

【问题标题】：'Object is not a function' error when trying to instantiate Marionette Application with requirejs尝试使用 requirejs 实例化 Marionette 应用程序时出现“对象不是函数”错误
【发布时间】：2013-04-11 11:31:45
【问题描述】：

这是我第一次尝试使用 Marionette。我正在尝试将 Marionette 应用程序实例化为 requirejs 模块。我一直在关注 Marionette.js wiki 上的 Using Marionette with Require js 文章：-

https://github.com/marionettejs/backbone.marionette/wiki/Using-marionette-with-requirejs

我认为我有所有的垫片、依赖项和文件，因为我能够在同一个地方实例化视图、模型等而不会出错，但我无法弄清楚我的应用程序的问题。任何帮助或指导将不胜感激！

这是我的 index.html:-

<!DOCTYPE html>
<html>
<head>
    <title>Marionette Structure and Require AMD Proto</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div id="nav">

</div>
<div id="mainContent">

</div>
<script language="javascript">
    // convenience function, because console.log throws errors and crashes IE
    // this way you don't need to all logs to test in IE
    function trace(msg){
        try{
            console.log(msg);
        }catch(e){
            // suppressed error
        }
    }
</script>
<script src="js/lib/require.js" data-main="app.js"></script>
</body>
</html>

这是我的 app.js：-

require.config({
    paths : {
        backbone : 'js/lib/backbone',
        underscore : 'js/lib/underscore',
        jquery : 'js/lib/jquery',
        marionette : 'js/lib/backbone.marionette'
    },
    shim : {
        jquery : {
            exports : 'jQuery'
        },
        underscore : {
            exports : '_'
        },
        backbone : {
            deps : ['jquery', 'underscore'],
            exports : 'Backbone'
        },
        marionette : {
            deps : ['jquery', 'underscore', 'backbone'],
            exports : 'Marionette'
        }
    }
})

require(
    ["jquery",
        "underscore",
        "backbone",
        "marionette",
        "js/shell/shellapp"
    ],
    function($, _, Backbone, Marionette, ShellApp) {
        $(function() {
           new ShellApp();
            trace("ShellApp: "+ShellApp);
        });
    }
);

最后是我的 shellapp.js:-

define( ["marionette"], function (Marionette) {

    // set up the app instance
    var ShellApp = new Marionette.Application();

    // configuration, setting up regions, etc ...
    ShellApp.addRegions({
        nav: '#nav',
        main: '#mainContent'
    });
    ShellApp.on('initialize:after', function(){
        trace("initialize:after");
    });
    // export the app from this module
    return ShellApp;
});

把它们放在一起，我在 app.js 第 42 行得到“Uncaught TypeError: object is not a function”

非常感谢所有能走到这一步的人！

山姆

【问题讨论】：

我不认识 Marionette，但看起来你正在导出一个对象 (return ShellApp;)，然后在导入它时尝试像构造函数一样新建它 (new ShellApp(); )。
感谢 c24w，这就是我想要做的（虽然也许我不需要……）。我正在按照教程进行操作，这就是我认为可以或必须在导入新的 ShellApp() 后对其进行实例化的地方。好像没必要……但是教程里怎么会这样呢？

标签： javascript backbone.js requirejs marionette

【解决方案1】：

我的回答太长，无法发表评论！

您正在导出构造的对象，而不是构造函数本身：

var ShellApp = new Marionette.Application()
...
return ShellApp;

这正是导入的内容，因此您无需创建另一个new。

首先，我将ShellApp 重命名为shellApp 以表示一个实例，而不是一个构造函数（这是一种常见的命名约定）。我认为在教程中他们打破了这个约定是非常误导的：

MyApp = new Backbone.Marionette.Application();

（假设我在这里是正确的）。

我现在假设您在应用的整个生命周期内只传递Marionette.Application 的单个实例。

在教程中，它shows 导出了一个newed-up Marionette.Application（与您所做的相同），但在导入时并未显示它实际上正在使用。导入对象后，您可以访问它的属性，例如：

shellApp.addInitializer(function(options){
    // stuff
});

更多here.

【讨论】：