如何在 Javascript 中交叉引用类

Question

考虑到主 html 应用程序中定义的脚本文件的顺序很重要，是否有一种方法可以交叉引用来自不同命名空间的类的实例或实例变量。实际上我想知道是否有可能交叉引用两个不同的类实例，一个指向在不同命名空间中定义的引用，另一个在第二个类中定义的变量指向第一个。

假设我有一个 main.js 文件，我在其中定义了一个使用在另一个命名空间中定义的一些实例变量的类，比如说在 particle.js 中，其中在同时我定义了一个指向Main类公共变量的变量。

var Main = (function() {
    var p = new Particle();

    this.draw = true;
    this.width = 800;
    this.height = 600;

    function print() {
        console.log(p.width, ':', p.height);
    }

    return {
        draw : this.draw,
        width : this.width,
        height : this.height,
        print : print
    }
})();

function Particle() {

    this.width = Main.width;
    this.height = Main.height;
    this.print = function() {
        console.log(this.width, ':', this.height);
    }    
}


var p = new Particle();
p.print();
Main.print();

...在*.html 中，javascript 文件的顺序为：

<script src = 'main.js'></script>
<script src = 'particle.js'></script>

实际上，如果您在 firebug 上尝试此代码，它会按预期工作，但在我的实际应用程序中使用相同的逻辑，这非常复杂，我在控制台中收到 Main is undefined 错误。我知道可以使用 AMD 和 Require.js 来模拟真实的类模块，但我现在不想继续使用 AMD。

Answer 1

我没有设法让您的代码在 Chrome 或 Firefox 上运行，我总是在 Main.width 上收到错误。

问题是当你的Main尚未完全构建时，你在粒子内部引用了Main。

没有直接的解决方案，我认为最好的方法是在定义 Particle 类之后延迟 Main 单例的部分初始化。 或者，您也可以重新排序代码以尊重依赖关系。

您必须记住，在 javascript 中，您的代码会在您调用它时进行评估。

这是我的两个建议：

解决方案 1：部分延迟 Main 初始化

// Main.js --> loaded first
var Main = new (function () {
    this.draw = true;
    this.width = 800;
    this.height = 600;

    // delayed initialization method
    this.init = function ()
    {
        var p = new Particle();
        this.print = function () {
            console.log(p.width, ':', p.height);
        }
    }
})();

//Particle.js --> loaded second
function Particle() {
    this.width = Main.width;
    this.height = Main.height;
    this.print = function() {
        console.log(this.width, ':', this.height);
    }    
}

// call the delayed init method
Main.init()

var p = new Particle();
p.print();
Main.print();

解决方案 2：拆分为 3 个文件以尊重依赖关系

//Particle.js --> loaded first
function Particle() {
    this.width = Main.width;
    this.height = Main.height;
    this.print = function() {
        console.log(this.width, ':', this.height);
    }    
}

// Main.js --> loaded in second position
var Main = (function() {
    var p = new Particle();
    this.draw = true;
    this.width = 800;
    this.height = 600;
    function print() {
        console.log(p.width, ':', p.height);
    }
    return {
        draw : this.draw,
        width : this.width,
        height : this.height,
        print : print
    }
})();

// Init.js --> loaded third
var p = new Particle();
p.print();
Main.print();