Question

请帮助我回答一下它背后的简短理论，因为我想理解逻辑而不仅仅是得到答案。如果您知道有任何材料可以为初学者解释，那么请参考它。我花了很多时间研究，并且发现空白并找到解释这种行为的名称或任何内容。

我的问题是并且想要理解，我认为浏览器解析html的方式是逐行的。当它遇到一个标签时，其他一切都停止了（这个基本的例子），同时它将它传递给js解释器，也逐行完成。一旦完成它，然后将其传递回html解析器以继续页面的其余部分

所以我的问题来自下面的简短例子，为什么＆＃34;发现＆＃34;在backup.js完成之前加载，当我删除backup.js并使用jquery代替＆＃34; console.log（find）;＆＃34;按预期工作，但是当从html中删除jquery并要求通过backup.js添加时，这仍然是＆＃34; console.log（find）之前遇到的第一个标记;＆＃34;在底部，它不起作用？我收到以下错误消息

ReferenceError: $ is not defined
var find = $('.link');

让我相信在backup.js和jquery完成加载之前，正在尝试访问var find = $('.link');，但为什么会在＆＃34;找到＆＃34;在backup.js之后来了很久？或者我在backup.js中的javascript代码做错了什么，而不是在之前添加它？

我有这个简短的html

<html>
    <head>

        <!--<script src="https://code.jquery.com/jquery-1.11.1.js"></script>-->
        <script type="text/javascript" src="backup.js"></script>        

        <meta charset="UTF-8">
        <title>My Web Page</title>
    </head>
    <body>
        <p>hello</p>    
        <div class="link">test</div>

    <script>
        var find = $('.link');
        console.log(find);
    </script>


    </body>
</html>

在backup.js中我有这个

if(typeof jQuery=='undefined') {
   var head= document.getElementsByTagName('head')[0];
   var script= document.createElement('script');
   script.type= 'text/javascript';
   script.src= 'https://code.jquery.com/jquery-1.11.1.js';
   head.appendChild(script);
   console.log('jquery not found');
}
else{
    console.log('jquery found');
}

Answer 1

在backup.js文件中，如果jquery尚不存在，则从服务器加载jquery。通过异步调用从服务器加载一些东西意味着它不会停止页面渲染，所以会发生什么：

页面开始呈现，它来到backup.js，开始从服务器加载jquery，在加载jquery时继续呈现页面，一直到底部，然后找到$(".link");。在这行代码中，符号“$”表示jQuery（我想在这部分代码中使用jquery），但可能会发生jquery尚未完全加载，因此程序会中断并告诉您ReferenceError: $ is not defined （或在人类中：你试图使用$但它不存在）。

要解决此问题，您可以创建一个在加载jquery时调用的函数：

if(typeof jQuery=='undefined') {
    var head= document.getElementsByTagName('head')[0];
    var script= document.createElement('script');
    script.type= 'text/javascript';
    script.src= 'https://code.jquery.com/jquery-1.11.1.js';
    script.onload = function() {
         runAfterjQueryLoad();
    }
    head.appendChild(script);
    console.log('jquery not found');
} else {
    console.log('jquery found');
}

function runAfterjQueryLoad() {
    var find = $('.link');
    console.log(find);
}

工作小提琴：http://jsfiddle.net/aj803z7u/

你自上而下的页面渲染是正确的，但是对于异步调用总是要小心（也称为ajax，以防你想在网上搜索更多信息）。最好的学习方式是做。想想你想要创建的页面并尝试这样做，为每一个小步骤搜索教程（你总是可以来到这里并提出问题）。

苦苦挣扎的javascript和jquery逻辑

1 个答案: