使用 Jquery 追加所有 Js 文件的正确方法是什么
what is the right way to append all Js files using Jquery append
我正在尝试使用此视频@3:30 中解释的方法加载所有 js 文件Optimize your code: load code at the right time
我已经在 index.js 中实现了这种方法,因为
<script>
var scripts = '<script src="./js/jquery-3.5.1.min.js"/>'+
'<script src="./js/jquery-ui.min.js"/>'+
'<script src="./js/bootstrap.min.js"/>'+
'<script src="./js/index.js"/>';
$(window).on("load",function(){
$("body").append(scripts)
});
</script>
也试过 html head 标签
<script>
var scripts = '<script src="./js/jquery-3.5.1.min.js"/>'+
'<script src="./js/jquery-ui.min.js"/>'+
'<script src="./js/bootstrap.min.js"/>'+
'<script src="./js/index.js"/>';
$(window).on("load",function(){
$("body").append(scripts)
});
</script>
它仍然不会加载我在脚本标签中传递的所有 js 文件,也不会在网络选项卡中加载。
我的问题是
- 像这样加载所有脚本真的是更好的方法并且必须始终遵循吗?
- 如果是 我需要优化上面的代码,以便它加载整个脚本并附加到 html?
jQuery 尚未加载,因此您无法使用它。所以我建议你使用普通的 javascript 解决方案。 (在结束正文标记之前添加为内联脚本标记 </body>
)
const scripts = [
"./js/jquery-3.5.1.min.js",
"./js/jquery-ui.min.js",
"./js/bootstrap.min.js",
"./js/index.js",
];
window.addEventListener("DOMContentLoaded", () => {
for(const script of scripts) {
const scriptTag = document.createElement("script");
scriptTag.src = script;
document.body.appendChild(scriptTag);
}
});
编辑:如果您需要按特定顺序加载脚本。您可以使用“加载”事件来启动下一个。请参阅下面的代码段
const scripts = [
"./js/jquery-3.5.1.min.js",
"./js/jquery-ui.min.js",
"./js/bootstrap.min.js",
"./js/index.js",
];
window.addEventListener("DOMContentLoaded", () => loadScript(scripts, 0));
function loadScript(scripts, index) {
if (!scripts[index]) return;
const scriptTag = document.createElement("script");
scriptTag.src = scripts[index];
scriptTag.addEventListener("load", () => loadScript(scripts, index + 1));
document.body.appendChild(scriptTag);
}
我正在尝试使用此视频@3:30 中解释的方法加载所有 js 文件Optimize your code: load code at the right time
我已经在 index.js 中实现了这种方法,因为
<script>
var scripts = '<script src="./js/jquery-3.5.1.min.js"/>'+
'<script src="./js/jquery-ui.min.js"/>'+
'<script src="./js/bootstrap.min.js"/>'+
'<script src="./js/index.js"/>';
$(window).on("load",function(){
$("body").append(scripts)
});
</script>
也试过 html head 标签
<script>
var scripts = '<script src="./js/jquery-3.5.1.min.js"/>'+
'<script src="./js/jquery-ui.min.js"/>'+
'<script src="./js/bootstrap.min.js"/>'+
'<script src="./js/index.js"/>';
$(window).on("load",function(){
$("body").append(scripts)
});
</script>
它仍然不会加载我在脚本标签中传递的所有 js 文件,也不会在网络选项卡中加载。
我的问题是
- 像这样加载所有脚本真的是更好的方法并且必须始终遵循吗?
- 如果是 我需要优化上面的代码,以便它加载整个脚本并附加到 html?
jQuery 尚未加载,因此您无法使用它。所以我建议你使用普通的 javascript 解决方案。 (在结束正文标记之前添加为内联脚本标记 </body>
)
const scripts = [
"./js/jquery-3.5.1.min.js",
"./js/jquery-ui.min.js",
"./js/bootstrap.min.js",
"./js/index.js",
];
window.addEventListener("DOMContentLoaded", () => {
for(const script of scripts) {
const scriptTag = document.createElement("script");
scriptTag.src = script;
document.body.appendChild(scriptTag);
}
});
编辑:如果您需要按特定顺序加载脚本。您可以使用“加载”事件来启动下一个。请参阅下面的代码段
const scripts = [
"./js/jquery-3.5.1.min.js",
"./js/jquery-ui.min.js",
"./js/bootstrap.min.js",
"./js/index.js",
];
window.addEventListener("DOMContentLoaded", () => loadScript(scripts, 0));
function loadScript(scripts, index) {
if (!scripts[index]) return;
const scriptTag = document.createElement("script");
scriptTag.src = scripts[index];
scriptTag.addEventListener("load", () => loadScript(scripts, index + 1));
document.body.appendChild(scriptTag);
}