jquery引用错误和执行顺序？

Question

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

我正在使用 Jinja2 模板构建一个 Python+Flask 网络应用程序，其中包含各种 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 代码的执行顺序是直接从上到下。那么这里的最佳做法是什么？正确的 import/execution 顺序是什么？

更新以显示执行顺序：
所以我放了一堆 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 时，模板变量不再被正确引用。也许这值得单独 post.

Answer 1

getHash() 未定义为全局函数。它是私有的，仅属于 plateinfo.js 中的函数，您在页面加载时告诉 jQuery 到运行。您的代码当前设置的方式，您无法在其他任何地方访问它。但是在你的内联 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>

jquery引用错误和执行顺序？

jquery reference error and execution order?

html

javascript

jquery

execution