不使用script导入js文件的几种方法

作者:异步漫步时间:2026-10-30 15:51:13浏览:544

本文介绍三种无需在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文件默认共用全局作用域,若不同脚本中定义了相同的变量名或方法名,后加载的脚本可能会覆盖先加载的内容,导致不可预知的错误。

作者最新文章