jquery引用错误和执行顺序？答案

【问题标题】：jquery reference error and execution order?jquery引用错误和执行顺序？
【发布时间】：2015-09-17 17:51:05
【问题描述】：

我在理解一般的 javascript/jquery 执行顺序以及存储 js 的正确位置时遇到了问题。我现在正在尝试重新组织我的代码，并不断遇到同样的问题，这让我对所有的 javascript 越来越感到沮丧。

我正在构建一个带有 Jinja2 模板的 Python+Flask webapp，其中包含各种 jquery 内容。最初我有一些看起来有点像这样的标准 html 代码......

<html>
 <head>
    <script type="text/javascript" src="{{url_for('static',filename='js/jquery/jquery-1.11.2.min.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static',filename='js/bootstrap/bootstrap.min.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static',filename='js/utils.js')}}"></script>

    <script type='text/javascript'>
       # get hash from page
       function getHash() {
          var hash = window.location.hash;
          var newhash = hash.slice(hash.search('_')).replace('_','#');
          return newhash;
       }

      // Load ifu div element if hash present when page loads
      $(function(){
        var ifuhash = getHash();
        var ifu = ifuhash.slice(ifuhash.search('#')+1);
        $(String(ifuhash)).fadeIn();    
        if (hash.search('comment') >= 0) $(String(hash)).fadeIn();
      });           

      ... other js ....

    </script>
 </head>

 <body>
    {% include 'header.html' %}
 </body>
</html>

这运行得很好。但是由于一个好的做法似乎是将所有 JS 放在他们自己的文件中，以免弄乱 html，我正在尝试将我当前的 javascript 代码重新组织为我认为应该工作的内容，但我遇到了问题.

getHash 函数在多个页面中是通用的，所以我把它拉出来并粘贴在一个单独的 js 中，称为 plateinfo.js，这样我的代码就是现在

<html>
 <head>
    <script type="text/javascript" src="{{url_for('static',filename='js/jquery/jquery-1.11.2.min.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static',filename='js/bootstrap/bootstrap.min.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static',filename='js/utils.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static',filename='js/plateinfo.js')}}"></script>

    <script type='text/javascript'>
      // Load ifu div element if hash present when page loads
      $(function(){
        var ifuhash = getHash();
        var ifu = ifuhash.slice(ifuhash.search('#')+1);
        $(String(ifuhash)).fadeIn();    
        if (hash.search('comment') >= 0) $(String(hash)).fadeIn();
      });           

      ... other js ....

    </script>
 </head>

 <body>
   {% include 'header.html' %}
 </body>
</html>

plateinfo.js 看起来像

// Toggle add comment login function
$(function() {
    $('#addcommentbut').click(function() {
        var fxn = 'grabComments';
        $('#fxn').val(fxn);
    });
});

// Get IFU hash from page
function getHash() {
    var hash = window.location.hash;
    var newhash = hash.slice(hash.search('_')).replace('_','#');
    return newhash;
}

// Render Tags in div
function renderTags(hash) {
  ..does stuff
}

但是，当我这样做时，我现在得到了错误

ReferenceError: getHash 未定义

该函数在 DOM 范围之外，应该是可导入的。而我之前已经成功地做到了这一点。 utils.js 文件包含完美运行的独立函数。我已清除缓存，重新启动浏览器以刷新会话，重新启动计算机，但似乎没有任何效果。那么有什么关系呢？我认为 html/js 代码的执行顺序是从上到下的。那么这里的最佳做法是什么？正确的导入/执行顺序是什么？

更新以显示执行顺序：
所以我像这样放了一堆console.logs

<html>
 <head>
    <script type="text/javascript" src="{{url_for('static',filename='js/jquery/jquery-1.11.2.min.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static',filename='js/bootstrap/bootstrap.min.js')}}"></script>

 <script type='text/javascript'>$(function() {console.log('before utils.js');});</script>
    <script type="text/javascript" src="{{url_for('static',filename='js/utils.js')}}"></script>
<script type='text/javascript'>$(function() {console.log('after utils.js');});</script>

<script type='text/javascript'>$(function() {console.log('before plateinfo.js');});</script>
    <script type="text/javascript" src="{{url_for('static',filename='js/plateinfo.js')}}"></script>
<script type='text/javascript'>$(function() {console.log('after plateinfo.js, before last script');});</script>

    <script type='text/javascript'>
      console.log('start of last script');

      // Load ifu div element if hash present when page loads
      $(function(){
        console.log('calling gethash');
        var ifuhash = getHash();
        var ifu = ifuhash.slice(ifuhash.search('#')+1);
        $(String(ifuhash)).fadeIn();    
        if (hash.search('comment') >= 0) $(String(hash)).fadeIn();
      });           

      ... other js ....

    </script>
 </head>

 <body>
   {% include 'header.html' %}
 </body>
</html>

这是日志输出

before utils.js plateInfo.html:40:1
after utils.js plateInfo.html:44:1
start of last script plateInfo.html:204:5
before plateinfo.js plateInfo.html:185:3
after plateinfo.js, before last script plateInfo.html:189:15
calling gethash plateInfo.html:221:3
ReferenceError: getHash is not defined plateInfo.html:222:6

这是为什么？

另外：在 javascript 中引用我的 Jinja2 模板变量时，我也遇到了单独但相关的问题。我包含的这个 header.html 文件正在发生这种情况。如果我将所有 js 代码包含在同一个 html 文件中，它就可以正常工作。但是当我将 js 移动到单独的 header.js 时，模板变量不再被正确引用。也许这值得单独发布。

【问题讨论】：

我认为 {{url_for('static',filename='js/plateinfo.js')}} 是在 DOM 准备好之后被评估的，所以你的内联脚本在你之前触发脚本全部加载。我可能会尝试在代码中的不同位置插入 console.logs，以便您可以跟踪组件的加载时间。
所以，是的，我试过了，但它似乎把所有事情都搞砸了。它跳过了console.logs，然后再回到它们。我不知道是怎么回事。如果它以正确的顺序发生，那么为什么没有定义该方法。我已经编辑了文本以更新日志顺序。
@Neil Jinja 是一种 Python 模板语言；我几乎可以肯定它将在服务器上而不是在浏览器中进行评估。
不要将你的 console.logs 放在 jQuery onload 方法中。它们都被同时执行，一个接一个。更好的方法是将 console.log 调用直接放在文件本身（utils.js、plateinfo.js）中

标签： javascript jquery html execution

【解决方案1】：

getHash() 未定义为全局函数。它是私有的，仅属于您告诉 jQuery 在页面加载时运行的 plateinfo.js 中的函数。您的代码当前设置的方式，您无法在其他任何地方使用它。但是在你的内联 JS 中，这就是你想要做的：

var ifuhash = getHash();

您可以让getHash() 全球可用：

function getHash() {
  // ...
}

window.getHash = getHash;

但这通常被认为是糟糕的编码习惯。构建代码的更好方法是使用 namespaces 将所有自定义函数和对象保存在一个位置并将其附加到 window：

<script type="text/javascript">
  window.myNamespace = window.myNamespace || {};
  window.myNamespace.getHash = function() {
    return 123;
  };
</script>
<script type="text/javascript">
  $(function() {
    var foo = window.myNamespace.getHash(); // foo now equals 123
  });
<script>

【讨论】：

啊，我错误地解析了您的plateinfo.js 文件。但我仍然敢打赌，您的问题与您声明函数的范围以及您尝试运行它的范围有关。
他已经在全局命名空间中声明了 getHash，这不是闭包。仅仅因为函数声明在一个单独的文件中，并不意味着它没有在全局范围内声明。
我认为这就是答案。我最终重写了整个 plateinfo.js，所以它是一个对象，我在我的主代码块中对其进行了实例化。我将 getHash 转换为在初始化时运行的函数，并将结果存储在对象的变量中。这似乎简化并解决了我的问题。