当前位置：首页 > 资讯 > 技术文档

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

时间：2022-03-16 14:37 编辑：来源：阅读：
扫一扫，手机访问

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

[b]方法一:原生[/b] 　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>

[b]方法二：jquery.js[/b]

$.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>

[b]方法三：require.js [/b] require.js分享2.1.1版本，注意是针对大项目使用，一边情况下使用jquery即可。 index.html  <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();
})

使用requireJs可以很方便的导入js文件，但是要注意js文件中变量名方法名冲突的问题。产生原因：浏览器js文件共用全局作用域，作用域中变量名方法名可能被覆盖

全部评论(0)

上一篇：Textarea与懒惰渲染实现代码
下一篇：百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系之间的转换

资讯排行榜
更多>>