异步加载js文件的方法

# 异步加载js文件

- js的加载默认是同步的,因为js是单线程执行,只能完成一件再执行下一件.

- 一些外部引入的js文件可以因为文件太大,在加载资源的过程中会影响dom元素的加载,影响了用户体验,因此会使用异步加载技术加载文件.

- 一般情况下给所有的script标签添加一个async异步属性,在加载script标签的同时加载dom元素.但会出现另外一个问题.加载的js资源,如jQuery,不能使用,因为在执行jQuery程序的时候,jQuery.js还没有加载完成.这时可以用到回到函数

1. 使用回到函数在加载完成资源后调用该资源的方法

```javascript

<script async src="js/jquery-1.12.4.min.js" id="jq"></script>

<script async >

document.querySelector("#jq").onload = function () {

console.log($);

}

</script>

```

2.require.js模块化工具

- 通过该模块化工具异步加载js文件后在执行该js文件的方法

```javascript

// <script src="./jquery.js"></script>

// <script src="./template.js"></script>

<script src="./require.js"></script>

<script>

require(['./jquery','./templatet'],function(template){

console.log($);

        

            console.log(template);

})

</script>

```

- require()

> 参数1 : 是一个数组,里面的值是需要引用的js文件

> 参数2 : 回调函数,在异步加载完成js文件后执行的程序,如果引入的js文件的返回值是对象需要传参数,如果返回的是对象直接使用

转载于:https://www.cnblogs.com/htmlli/p/7912083.html