如何实现JavaScript动态加载CSS和JS文件

确实，动态加载CSS和JS文件在Web开发中是非常常见的需求。今天，我将为大家详细介绍一种通过JavaScript实现的方法，此方法以创建新的元素并添加到HTML文档的方式实现动态加载。

想象一下，你有一个名为`dynamicLoading`的对象，它拥有两个方法：一个用于加载CSS文件，另一个用于加载JS文件。只需传入文件路径作为参数，这个对象就能为你完成剩下的工作。

```javascript

var dynamicLoading = {

css: function(path) {

if (!path || path.length === 0) {

throw new Error('路径参数不能为空！');

}

var head = document.getElementsByTagName('head')[0];

var link = document.createElement('link');

link.href = path;

link.rel = 'stylesheet';

link.type = 'text/css';

head.appendChild(link);

},

js: function(path) {

if (!path || path.length === 0) {

throw new Error('路径参数不能为空！');

}

var script = document.createElement('script');

script.src = path;

script.type = 'text/javascript';

document.body.appendChild(script); // 注意：添加JS脚本到body底部，以避免阻塞页面渲染。

}

};

```

如何使用这个对象呢？非常简单。例如，如果你想加载一个名为"test.css"的CSS文件和一个名为"test.js"的JavaScript文件，只需像下面这样调用：

```javascript

// 加载CSS文件

dynamicLoading.css("test.css");

// 加载JS文件

dynamicLoading.js("test.js");

```

我还想分享一些其他动态加载JS的方法。一种常见的方法是创建一个新的`