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

【问题标题】：Use global variables declared in a javascript file in another javascript file在另一个 javascript 文件中使用在 javascript 文件中声明的全局变量
【发布时间】：2013-09-29 02:08:31
【问题描述】：

我正在尝试获取 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!");
}

【问题讨论】：

标签： javascript object include literals

【解决方案1】：

你的 TestService.js 中有这个

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

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

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

TestService.Server 将评估为 undefined，因为 TestServer 尚不存在

设置一个 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); 
}

【讨论】：

【解决方案2】：

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

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

source

在你的情况下，你不能保证TestServer.js 在TestService.js 之前被执行。所以我会建议你改变你访问全局变量跨文件的方式。

您可以在TestService.js 之前将TestServer.js 添加到您的html 中，以便他们可以一一执行。

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

【讨论】：