JS动态加载|极客笔记

JS动态加载

在前端开发中，动态加载JS文件是一种常见的技术手段。通过动态加载JS文件，我们可以根据需要动态地加载某些功能或者模块，提高页面加载速度和用户体验。在本文中，我们将详细介绍JS动态加载的原理、方法和实现步骤。

原理

在传统的前端开发中，JS文件通常是在页面加载时一次性加载的。这种方式虽然简单，但是也存在一些问题。比如，如果页面中需要加载的JS文件过多或者过大，会导致页面加载速度变慢，影响用户体验。此外，有些功能或者模块可能并不是每次都需要加载的，如果一次性加载所有JS文件，会增加不必要的网络请求和服务器负担。

动态加载JS文件的原理是利用JS的异步加载特性，当需要加载某个JS文件时，再通过JS代码动态地创建一个script标签，并设置其src属性为需要加载的JS文件路径，然后将这个script标签插入到页面中，从而实现动态加载JS文件的目的。

方法

使用document.createElement()方法动态加载JS文件

function loadScript(url, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    script.onload = function() {
        if (callback) {
            callback();
        }
    };
    document.body.appendChild(script);
}

// 示例
loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js', function() {
    console.log('jQuery has been loaded!');
});

上面的代码中，我们定义了一个loadScript()函数，用于动态加载JS文件。该函数接收两个参数，第一个参数是需要加载的JS文件的URL，第二个参数是加载完成后的回调函数。在函数内部，首先创建一个script标签，然后设置其src属性为传入的URL，再监听script的onload事件，确保JS文件加载完成后执行回调函数。最后将这个script标签插入到页面中。

使用动态创建script标签实现异步加载

function loadScriptAsync(url, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    script.async = true;

    script.onload = function () {
        if (callback) {
            callback();
        }
    };

    document.body.appendChild(script);
}

// 示例
loadScriptAsync('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js', function() {
    console.log('jQuery has been loaded!');
});

在上面的代码中，我们定义了一个loadScriptAsync()函数，实现了异步加载JS文件的功能。和loadScript()函数相比，唯一的区别是设置了script的async属性为true，表示异步加载JS文件。