使用另一个JavaScript文件中的javascript文件中声明的全局变量

Question

我正在尝试获取TestService.Server.WWW_SERVER_URL，但是TestService.Server未定义。 当我调用test1（）时，它运行良好。 但是我无法访问对象文字TestServer。 有其他方法吗？

test.html

<script type="text/javascript" language="javascript" src="TestService.js"></script>
<script type="text/javascript" language="javascript">
    function test() {
        alert("TestService.Server.WWW_SERVER_URL[" + TestService.Server.WWW_SERVER_URL + "]");
        //test1();
    }
</script>

TestService.js

document.write("<scr" + "ipt type='text/javascript' src='TestServer.js'><" + "/scr" + "ipt>");

var TestService = {
    Server: TestServer,
    Delimiter: ""
};

function test1() {
    test2();
}

TestServer.js

var TestServer = {
    WWW_SERVER_URL: "http://www.test.com"
};


function test2() {
    alert("test2 has been called!");
}

Answer 1

您在TestService.js中有这个

document.write("<scr" + "ipt type='text/javascript' src='TestServer.js'><" + "/scr" + "ipt>");

var TestService = {
    Server: TestServer,
    Delimiter: ""
};

您正在尝试使用尚未加载的TestServer在TestService设置一个属性，因为您没有为新添加的脚本加载时间

由于TestServer不存在，因此TestService.Server评估结果为undefined

设置一个onload函数，该函数将添加您的脚本，然后在加载时设置TestService.Server变量

var TestService = {
    Server: null,
    Delimiter: ""
};

function test1() {
    test2();
}

window.onload = function() {
    var head = document.querySelector("head");
    var script = document.createElement("script"); 
    script.setAttribute("type", "text/javascript");
    script.setAttribute("src", "TestServer.js");

    head.addEventListener("load", function(event) {
        if (event.target.nodeName === "SCRIPT"){
            TestService.Server = TestServer;
        }
    }, true);

    head.appendChild(script); 
}

Answer 2

如果您动态附加脚本，则IE，Firefox和Chrome都将以异步方式下载脚本。

Firefox和Chrome将等待所有异步请求返回，然后按照脚本在DOM中附加的顺序执行脚本，而IE则按照通过有线返回的顺序执行脚本。

资源

就您而言，您无法保证TestServer.js在TestService.js之前执行。 因此，我建议您更改访问全局变量交叉文件的方式。

您可以添加TestServer.js之前到您的HTML TestService.js ，这样他们就可以执行一个接一个。

无论如何，不​​建议这样做，您可以将它们包装在自己的名称空间中。 另外，您最好在使用前检查要使用交叉文件的变量是否未定义。