浅谈js在html中的加载执行顺序,多个jquery ready执行顺序

浅谈js在html中的加载执行顺序，以及多个jQuery ready执行顺序需要注意以下几点：

HTML文档解析的过程中遇到JavaScript代码会立即加载执行，可以通过在JavaScript代码块中添加console.log语句来确认执行顺序。
多个JavaScript文件的加载顺序应该按照依赖关系来决定。即如果一个JavaScript文件依赖于另一个JavaScript文件，应当先加载依赖文件，再加载被依赖文件。
jQuery中的ready方法，通常用来在文档加载完成后执行一些初始化操作。当文档中包含多个ready方法时，它们会按照添加的顺序依次执行。

示例说明1：
在HTML文件中引入2个JavaScript文件，分别是jQuery和自定义脚本文件。

<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="custom.js"></script>
</head>

custom.js中的代码如下：

$(document).ready(function() {
  console.log("custom.js ready 1");
});

$(document).ready(function() {
  console.log("custom.js ready 2");
});

上述代码中，首先加载了jQuery，然后加载了自定义脚本文件custom.js。
在custom.js中，添加了2个ready方法。这两个ready方法会按照添加的顺序依次执行。

当HTML页面加载完成时，会依次执行如下代码：
1. 加载jQuery，完成jQuery的初始化。
2. 加载custom.js，执行其中的ready方法。

因为ready方法的执行顺序是依次执行添加的顺序，所以console输出的结果是：

custom.js ready 1
custom.js ready 2

示例说明2：
在HTML文件中引入3个JavaScript文件，分别是jQuery、依赖文件和自定义脚本文件。

<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="dependency.js"></script>
  <script src="custom.js"></script>
</head>

dependency.js中的代码如下：

$(document).ready(function() {
  console.log("dependency.js ready");
});

custom.js中的代码如下:

$(document).ready(function() {
  console.log("custom.js ready");
});

上述代码中，首先加载了jQuery，然后加载了依赖文件dependency.js和自定义脚本文件custom.js。
在custom.js中，添加了一个ready方法；在dependency.js中，也添加了一个ready方法，并且依赖于jQuery。

当HTML页面加载完成时，会依次执行如下代码：
1. 加载jQuery，完成jQuery的初始化。
2. 加载dependency.js，先执行其中的ready方法。
3. 加载custom.js，执行其中的ready方法。

因为dependency.js的ready方法依赖于jQuery，所以必须先保证jQuery的初始化。因此dependency.js的ready方法会先于custom.js的ready方法执行。console输出的结果是：

dependency.js ready
custom.js ready

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：浅谈js在html中的加载执行顺序,多个jquery ready执行顺序 - Python技术站

浅谈js在html中的加载执行顺序,多个jquery ready执行顺序

相关文章