Browserify需要返回一个空对象 [英] Browserify require returns an empty object

问题描述

我有这样的code其中的原因，我无法理解，使用时会产生一个空对象要求（）。我的文件结构是这样的：

I have this code which, for reasons I can't understand, produces an empty object when using require(). My file structure is like this:

src
|__ public
    |__ javascript
        |__ collections
            |   categories.js
            |   listings.js <-- Always an empty object
        |__ models
            |   category.js
            |   employer.js
            |   listing.js
            |   location.js
        |   routing
        |   templates
        |   tests
        |   ui-components
        |   views

问题的文件是收藏/ listings.js ，简单地需要像这样，当一个空的对象输出，这似乎：

The problem file is collections/listings.js, which seems to simply output as an empty object when required like so:

VAR ListingsCollection =要求（'../集合/目录'）

的src /公/ JavaScript的/收藏/ listings.js 是这样的：

var $        = require('jquery'),
    _        = require('underscore'),
    Backbone = require('backbone'),
    Listing  = require('../models/listing');

Backbone.$ = $;

module.exports = Backbone.Collection.extend({
    url: '/listings',

    model: Listing,

    parse: function (response) {
        return response.listings;
    }
});

下面是哪里出了问题的例子：

Here is an example of where things go wrong:

var $                  = require('jquery'),
    _                  = require('underscore'),
    Backbone           = require('backbone'),
    LocationModel      = require('../models/location'),
    ListingsCollection = require('../collections/listings');

Backbone.$ = $;

console.log(ListingsCollection); // > Object {}

module.exports = Backbone.Model.extend({

    urlRoot: '/employers',

    model: {
        location: LocationModel,
        listings: ListingsCollection
    },

    parse: function (response) {
        var employer = response.employer;

        // Create the child listings
        employer.listings = new ListingsCollection;

        return employer;
    },

    toJSON : function () {
        var json = _.clone(this.attributes);

        _.each(_.keys(this.model), function (child) {
            if (this.get(child)) {
                json[child] = this.get(child).toJSON();
            }
        }.bind(this));

        return json;
    }
});

所以它是 - 该集合从未需要进雇主模型，使得它可以用来创建一个子集的父模型。我看着源和研究这个问题，但我来了没有至今......这是令人费解的。

So there it is - That collection never requires into the employer model such that it can be used to create a child collection for the parent model. I've looked at the source and researched this issue but I'm coming up with nothing so far... It's perplexing.

推荐答案

由于我的评论似乎已经回答了这个问题，我想我把它写了正式。

Since my comment seems to have answered this issue, I thought I'd write it up formally.

在使用Require.js你要想想模块之间的依赖关系。从某种意义上说，这是因为如果你没有使用要求同样的问题。让我们pretend你有两个文件，​​A.js和B.js，分别定义了一个A功能和B的功能：

When using Require.js you have to think about dependencies between modules. In some sense, this is the same issue as if you weren't using require. Let's pretend you have two files, A.js and B.js, which define an "A" function and a "B" function respectively:

// A.js
window.A = function() {
    // ...
};

// B.js
window.B = function() {
    // ...
};

您可以按任意顺序添加这些文件到您的网页，和你的code会工作。但是，如果你的B的定义取决于A的定义是：

You can add those files in any order to your page, and your code will work. But what if your definition of "B" depends on the definition of "A":

// B.js
window.B = window.A || function() {
    // ...
};

现在，突然下令事项：你必须包括你的A.js文件或者B的code将无法正常工作后，您的B.js文件。如果你的A.js也取决于你的B.js ...

Now, suddenly order matters: you have to include your B.js file after your A.js file or else B's code won't work. And if your A.js also depends on your B.js ...

// A.js
window.A = window.B || function() {
    // ...
};

那么你的code是致命的缺陷，因为B依赖于A和A依赖于B，一个必须首先界定。这就是被称为循环依赖。

Then your code is fatally flawed, because B depends on A and A depends on B, and one has to be defined first. This is what is known as a "circular dependency".

需要有同样的问题，只是它更容易错过，因为从你需要摘要很多东西。在一天结束的时候，虽然要求（即JavaScript的code）的按顺序运行，这意味着它有一些为了定义的模块。如果你的模块A依赖模块B和B依赖于A，你就会有同样的循环依赖的问题。

Require has the same problem, only it's easier to miss because Require abstracts a lot of things from you. At the end of the day though Require (being JavaScript code) has to run sequentially, which means it has to define your modules in some order. If your module A depends on module B, and B depends on A, you'll have the same circular dependency issue.

同样的，如果您有一个依赖于B，而B依赖于C和C取决于A，你也有一个循环依赖。或者，如果你有依赖D上取决于一个C ...好你的想法。归根结底依赖任何其他模块的模块，以确保无论是相关模块或其任何依赖的依赖原有的模块。

Similarly if you have A that depends on B, and B that depends on C, and C that depends on A, you'll also have a circular dependency. Or if you have a C that depends on D that depends ... well you get the idea. Ultimately any module that depends on any other module has to ensure that neither the dependent module or any of its dependencies depend on the original module.

那么，你如何解决您的code？最显而易见的方法是去除循环依赖，这肯定会的工作，但也有另一种选择。比方说，你的A依赖于B，但只能在运行时的，不是的加载时间的。换句话说，而不是：

So how do you fix your code? The obvious way would be to remove the circular dependencies, which will certainly work, but there's also another option. Let's say your A depends on B, but only at run-time, not at load time. In other words instead of:

// A.js
define(['B'], function(B) {
    return B || function() {
        // ...
    };
});

您有：

// A.js
define(['B'], function(B) {
    return function() {
        B();
    };
});

在这种情况下，你可以使用单个参数同步的形式都需要以避免需要B在你的文件的顶部：

In this case you can use the single argument "synchronous" form of require to avoid having to require "B" at the top of your file:

// A.js
define([], function() {
    return function() {
        var B = require('B');
        B();
    };
});

由于我们只用B钮的之后的我们定义了我们所有的模块都需要不担心后B一来;每当就是了，因为你的时候居然想的使用的B，因为它已经被定义它可以定义它。当然，这是假设你有部分的模块实际上确实包括B的顶部（如果你没有要求，甚至不知道b存在）。

Because we only use B after we've defined all our modules Require doesn't have to worry about A coming after B; it can define it whenever it wants because, by the time you actually want to use B, it will already be defined. Of course, this assumes that you have some module which actually does include "B" at the top (if you didn't require wouldn't even know that B exists).

希望有所帮助。

这篇关于Browserify需要返回一个空对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！