不使用script导入js文件的几种方法
本文介绍三种无需在HTML中直接写入script标签即可加载JavaScript文件的方法。包括原生JavaScript通过createElement动态插入并监听load事件,利用jQuery的getScript方法异步加载,以及使用Require.js进行模块化依赖管理。重点解析了动态加载时的异步处理、回调机制及全局变量冲突问题的解决方案。
原生JavaScript动态加载方案
方法一:原生JavaScript实现
adc.js文件内容如下:
var hello = "H9";
html.html文件结构
<script>
var s = document.createElement("script");
s.src = "abc.js";
document.head.appendChild(s);
s.addEventListener("load",function(){
// 等待s的load事件加载完响应,防止未加载完就调用出错
console.log(hello);
})
setTimeout(function(){//或者使用定时器保证其载入完后调用(不安全,不如监听事件好)
console.log(hello);
},1000);
// $.getScript("abc.js");
</script>
jQuery异步加载脚本方法
方法二:基于jQuery的实现
$.getScript("abc.js",function(){ alert("heheheh"); console.log(hello); });
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function()
{
$('#loadButton').click(function(){
$.getScript('new.js',function(){
newFun('"Checking new script"');//这个函数是在new.js里面的,当点击click后运行这个函数
});
});
});
</script>
</head>
<body>
<button type="button" id="loadButton">Load</button>
Require.js模块化加载与冲突处理
方法三:使用Require.js模块加载器
本文示例使用require.js的2.1.1版本。该方法主要面向大型项目架构,在一般常规开发场景中,使用jQuery即可满足需求。
index.html入口文件配置
<!--设置入口文件main,此时可以省略具体的js引入--> <script data-main="main" src="require.js"></script>
main.js主模块定义
console.log("你好世界");
require(["js1","js2","js3"],function () {
// 是异步加载导入。js后缀可以省略
console.log("你们加载完了么?");
var total = num1+num2+num3;
console.log(total);
hello1();
hello2();
hello3();
})
使用Require.js能够便捷地导入JS文件,但需特别注意JS文件中变量名与方法名可能产生的冲突问题。其产生原因在于:浏览器环境下JS文件默认共用全局作用域,若不同脚本中定义了相同的变量名或方法名,后加载的脚本可能会覆盖先加载的内容,导致不可预知的错误。
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法:concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19
JS对象数组转字符串为什么推荐用JSON.stringify()
2026-11-05 09:40:31
