4

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

假设我有一个main.js文件，我在其中定义了一个类，该类使用在另一个命名空间中定义的一些实例变量，比如说 in 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();

...并且在*.htmljavascript 文件中的顺序是：

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

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

4

1 回答 1

2

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

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

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

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

这是我的两个建议：

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

// 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();
于 2012-07-09T11:38:25.347 回答