我正在构建一个提供旅行路线的动态网站，但我对 JavaScript 很陌生，并且不确定编写它的最佳方法。
目前，我通过为每个元素设置单独的 HTML 页面来加载网站的不同部分(页眉、主页面、页脚)，然后将这些页面加载到主页中。例如，在主页上我有:
<body onload="initialize()">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</body>
在导入的 JavaScript 脚本中我有:
function initialize()
{
$('#header').load('header.html');
$('#main').load('main.html');
$('#footer').load('footer.html');
}
问题是我希望所有这三个导入的页面都能够访问单个 JavaScript 文件中的全局变量和函数，我将在其中存储路线信息、坐标等。具体来说，我遇到了无法解决的问题从已加载到父页面的 header.html 页面调用主 JS 脚本中的函数。
执行此操作的最佳方法是什么？非常感谢任何帮助!
最佳答案
您应该有一个 js包含所有客户端代码的文件，并将其包含在带有 <script> 的页面上标签。然后雇用 $( document ).ready() 运行您的初始化。您还可以在此处定义全局变量并分配它们，以便以后可以访问它们。
在你的 JavaScript 中包含类似这样的内容；
var $header, $main, $footer
function initialize()
{
$header.load('header.html');
$main.load('main.html');
$footer.load('footer.html');
}
$(document).ready(function() {
$header = $('#header');
$main = $('#main');
$footer = $('#footer');
initialize();
});
请注意您创建的全局变量的数量； 11 JavaScript mistakes you're making .
关于javascript - 如何为全局变量构建 JavaScript/HTML 网站？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15330049/