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

更新时间：2016年10月27日 22:18:04 投稿：mdxy-dxy

这篇文章主要介绍了不使用script导入js文件的方法,需要的朋友可以参考下

方法一:原生

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

$.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分享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文件共用全局作用域，作用域中变量名方法名可能被覆盖

您可能感兴趣的文章:

script
js

layui弹出框Tab选项卡的示例代码
今天小编就为大家分享一篇layui弹出框Tab选项卡的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
js实现橱窗展示效果
这篇文章主要为大家详细介绍了js实现橱窗展示效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
JavaScript原始值与包装对象的详细介绍
这篇文章主要给大家介绍了关于JavaScript原始值与包装对象的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
javascript中闭包概念与用法深入理解
这篇文章主要介绍了javascript中闭包概念与用法,结合实例形式深入分析了javascript中闭包的概念、使用方法与相关注意事项,需要的朋友可以参考下
2016-12-12
this,this,再次讨论javascript中的this,超全面(经典)
在JavaScript中，this 的概念比较复杂。除了在面向对象编程中，this 还是随处可用的。这篇文章介绍了javascript中的this相关知识，对javascript this相关知识感兴趣的朋友一起学习吧
2016-01-01
JS回调函数的应用简单实例
这篇文章主要分享了JS回调函数应用的简单实例,比较实用，需要的朋友可以参考下
2014-09-09
Openlayers显示地理位置坐标的方法
这篇文章主要为大家详细介绍了Openlayers显示地理位置坐标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
innerHTML innerText textContent使用区别示例详解
这篇文章主要为大家介绍了innerHTML innerText textContent使用区别示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
Js获取单选框radio的几种方式
这篇文章主要介绍了Js获取单选框radio的几种方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
关于对async await效率问题的深入思考
这篇文章主要给大家介绍了关于对async await效率问题的深入思考,async和await要搭配Promise使用,它进一步极大的改进了Promise的写法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-01-01