如何使用RequireJS / AMD处理循环依赖?

问题描述 投票:77回答:7

在我的系统中,我在浏览器中加载了许多“类”,每个文件在开发过程中都是单独的文件,并连接在一起进行生产。当它们被加载时,它们在全局对象上初始化一个属性,这里是G,如下例所示:

var G = {};

G.Employee = function(name) {
    this.name = name;
    this.company = new G.Company(name + "'s own company");
};

G.Company = function(name) {
    this.name = name;
    this.employees = [];
};
G.Company.prototype.addEmployee = function(name) {
    var employee = new G.Employee(name);
    this.employees.push(employee);
    employee.company = this;
};

var john = new G.Employee("John");
var bigCorp = new G.Company("Big Corp");
bigCorp.addEmployee("Mary");

我没有使用自己的全局对象,而是考虑根据AMD module使每个类成为自己的James Burke's suggestion

define("Employee", ["Company"], function(Company) {
    return function (name) {
        this.name = name;
        this.company = new Company(name + "'s own company");
    };
});
define("Company", ["Employee"], function(Employee) {
    function Company(name) {
        this.name = name;
        this.employees = [];
    };
    Company.prototype.addEmployee = function(name) {
        var employee = new Employee(name);
        this.employees.push(employee);
        employee.company = this;
    };
    return Company;
});
define("main", ["Employee", "Company"], function (Employee, Company) {
    var john = new Employee("John");
    var bigCorp = new Company("Big Corp");
    bigCorp.addEmployee("Mary");
});

问题在于之前,Employee和Company之间没有声明时间依赖关系:你可以按照你想要的顺序放置声明,但现在,使用RequireJS,这引入了一个依赖,这里(故意)是循环的,所以上面的代码失败。当然,在addEmployee()中,添加第一行var Employee = require("Employee");make it work,但我认为这个解决方案不如不使用RequireJS / AMD,因为它要求我(开发人员)了解这个新创建的循环依赖并做一些事情。

有没有更好的方法来解决RequireJS / AMD的这个问题,或者我是否使用RequireJS / AMD来设计它不适用的东西?

javascript commonjs requirejs
7个回答
59
投票

这确实是AMD格式的限制。你可以使用导出,这个问题就消失了。我发现导出很难看,但是常规的CommonJS模块解决了这个问题:

define("Employee", ["exports", "Company"], function(exports, Company) {
    function Employee(name) {
        this.name = name;
        this.company = new Company.Company(name + "'s own company");
    };
    exports.Employee = Employee;
});
define("Company", ["exports", "Employee"], function(exports, Employee) {
    function Company(name) {
        this.name = name;
        this.employees = [];
    };
    Company.prototype.addEmployee = function(name) {
        var employee = new Employee.Employee(name);
        this.employees.push(employee);
        employee.company = this;
    };
    exports.Company = Company;
});

否则,您在邮件中提到的要求(“员工”)也会起作用。

通常,对于模块,您需要更多地了解循环依赖关系,AND与否。即使在纯JavaScript中,您也必须确保在示例中使用类似G对象的对象。


15
投票

我认为这在大型项目中是一个相当大的缺点,其中(多级)循环依赖性未被发现。但是,使用madge,您可以打印循环依赖项列表以接近它们。

madge --circular --format amd /path/src

7
投票

如果您不需要在开始时加载依赖项(例如,当您扩展类时),那么这就是您可以执行的操作:(取自http://requirejs.org/docs/api.html#circular

在文件a.js中:

    define( [ 'B' ], function( B ){

        // Just an example
        return B.extend({
            // ...
        })

    });

在另一个文件b.js

    define( [ ], function( ){ // Note that A is not listed

        var a;
        require(['A'], function( A ){
            a = new A();
        });

        return function(){
            functionThatDependsOnA: function(){
                // Note that 'a' is not used until here
                a.doStuff();
            }
        };

    });

在OP的例子中,它是如何改变的:

    define("Employee", [], function() {

        var Company;
        require(["Company"], function( C ){
            // Delayed loading
            Company = C;
        });

        return function (name) {
            this.name = name;
            this.company = new Company(name + "'s own company");
        };
    });

    define("Company", ["Employee"], function(Employee) {
        function Company(name) {
            this.name = name;
            this.employees = [];
        };
        Company.prototype.addEmployee = function(name) {
            var employee = new Employee(name);
            this.employees.push(employee);
            employee.company = this;
        };
        return Company;
    });

    define("main", ["Employee", "Company"], function (Employee, Company) {
        var john = new Employee("John");
        var bigCorp = new Company("Big Corp");
        bigCorp.addEmployee("Mary");
    });

5
投票

我只是避免循环依赖。也许是这样的:

G.Company.prototype.addEmployee = function(employee) {
    this.employees.push(employee);
    employee.company = this;
};

var mary = new G.Employee("Mary");
var bigCorp = new G.Company("Big Corp");
bigCorp.addEmployee(mary);

我不认为解决这个问题并尝试保持循环依赖是个好主意。只是感觉像一般的坏习惯。在这种情况下,它可以工作,因为在调用导出的函数时,您确实需要这些模块。但想象一下在实际定义函数本身中需要和使用模块的情况。没有解决方法可以使这项工作。这可能就是为什么require.js在定义函数的依赖关系中对循环依赖检测快速失败的原因。

如果你真的需要添加一个解决方法,那么更干净的一个IMO就是要及时要求依赖(在这种情况下在导出的函数中),那么定义函数将运行良好。但即使是更清洁的IMO也只是为了完全避免循环依赖,这在你的情况下感觉很容易。


5
投票

所有发布的答案(https://stackoverflow.com/a/25170248/14731除外)都是错误的。即使是官方文件(截至2014年11月)也是错误的。

对我有用的唯一解决方案是声明一个“关守”文件,并让它定义任何依赖于循环依赖关系的方法。有关具体示例,请参阅https://stackoverflow.com/a/26809254/14731


这就是上述解决方案不起作用的原因。

  1. 你不能:
var a;
require(['A'], function( A ){
     a = new A();
});

然后使用a,因为无法保证在使用a的代码块之前执行此代码块。 (这种解决方案具有误导性,因为它可以在90%的时间内工作)

  1. 我认为没有理由相信exports不会受到同样的竞争条件的影响。

解决方法是:

//module A

    define(['B'], function(b){

       function A(b){ console.log(b)}

       return new A(b); //OK as is

    });


//module B

    define(['A'], function(a){

         function B(a){}

         return new B(a);  //wait...we can't do this! RequireJS will throw an error if we do this.

    });


//module B, new and improved
    define(function(){

         function B(a){}

       return function(a){   //return a function which won't immediately execute
              return new B(a);
        }

    });

现在我们可以在模块C中使用这些模块A和B.

//module C
    define(['A','B'], function(a,b){

        var c = b(a);  //executes synchronously (no race conditions) in other words, a is definitely defined before being passed to b

    });

5
投票

我查看了关于循环依赖的文档:http://requirejs.org/docs/api.html#circular

如果a和b存在循环依赖关系,它会在模块中将require作为依赖项添加到模块中,如下所示:

define(["require", "a"],function(require, a) { ....

然后,当你需要“a”时,只需调用“a”,如下所示:

return function(title) {
        return require("a").doSomething();
    }

这对我有用


0
投票

在我的例子中,我通过将“更简单”对象的代码移动到更复杂的对象中来解决循环依赖。对我来说,这是一个集合和一个模型类。我想在你的情况下,我会将Employee特定的公司部分添加到Employee类中。

define("Employee", ["Company"], function(Company) {
    function Employee (name) {
        this.name = name;
        this.company = new Company(name + "'s own company");
    };
    Company.prototype.addEmployee = function(name) {
        var employee = new Employee(name);
        this.employees.push(employee);
        employee.company = this;
    };

    return Employee;
});
define("Company", [], function() {
    function Company(name) {
        this.name = name;
        this.employees = [];
    };
    return Company;
});
define("main", ["Employee", "Company"], function (Employee, Company) {
    var john = new Employee("John");
    var bigCorp = new Company("Big Corp");
    bigCorp.addEmployee("Mary");
});

有点hacky,但它应该适用于简单的情况。如果你重构addEmployee以将Employee作为参数,对外人来说依赖性应该更加明显。

© www.soinside.com 2019 - 2024. All rights reserved.