Question

所以我将以下代码创建为freecodecamp.com当前天气项目的一部分。

<html><head>
<!--Bootstrap CDN - 3.3.7 Complete CSS-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!--jQuery CDN - 3.2.1 Uncompressed-->
<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Weather by Current Location</title>

<style>
  body{
    background-color: #141b28;  //Purple
  }
  #weather-box{
    margin-top: 5%;
    color: #C0C0C0;  //Silver
  }
</style>
<script>
  //var location = [1,2];
  function getLocation(){
  }
</script>

</head>
<body>
<div class="row">
  <div class="col-md-4 col-md-offset-4 container-fluid text-center" 
    id="weather-box">
    <h1>Weather</h1>
  </div> 
</div>
</body></html>

上面的代码运行得很好，但是当我取消注释//var location = [1,2];并重新加载文档时，本地网址从~/weatherApp/index.html更改为~/weatherApp/1,2并且无法加载。 [1,2]只是一个测试占位符。任何人都可以告诉我为什么会发生这种情况，显然它抓住了那个阵列的内容，但是我不确定为什么它会替换这个URL？据我所知，我的所有标签，parens和括号都是正确的。这种情况发生在Chrome和Firefox中，所以它必须是我自己的工作。你们可以提供任何帮助，我们将不胜感激。

Answer 1

location全局为predefined browser variable。

您正在获得为其分配值的预期行为。

问题的快速而肮脏的解决方案是使用不同的变量名称。

更好的解决方案，可以避免以下问题：

您之前没有听说过的全球比赛
未来推出的新浏览器默认全局
加载到页面上的第三方脚本的全局（包括由浏览器扩展加载的脚本）

...是为了避免首先使用全局变量。

将您的代码包装在IIFE中，以便您的变量是本地范围的：

(function () {
    var location = [1,2];
    function getLocation(){
    }
})();

这显然会阻止您以变量形式访问变量，但除了一些不起眼的边缘情况之外，您不需要这样做。您应该使用addEventListener而不是内部事件属性（如onclick）来绑定事件处理函数，这样您就不需要事件处理函数是全局的。

Javascript未正确解析，导致URL在加载时发生更改

1 个答案: