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


Posted in Javascript onOctober 27, 2016

方法一:原生

 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

<!--设置入口文件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();
})

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

Javascript 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
JavaScript Event学习补遗 addEventSimple
Feb 11 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
javascript验证身份证号
Mar 03 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
JavaScript函数基础详解
Feb 03 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
15分钟上手vue3.0(小结)
May 20 Javascript
JSON 必知必会 观后记
Oct 27 #Javascript
使用JSON作为函数的参数的优缺点
Oct 27 #Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 #Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 #Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 #Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 #Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 #Javascript
You might like
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
php adodb分页实现代码
2009/03/19 PHP
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
php生成rss类用法实例
2015/04/14 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
python求pi的方法
2014/10/08 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
解决python运行启动报错问题
2020/06/01 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
优秀广告词大全
2014/03/19 职场文书
婚前协议书范本两则
2014/10/16 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
小石潭记导游词
2015/02/03 职场文书
党员证明模板
2015/06/19 职场文书
python字符串常规操作大全
2021/05/02 Python