不使用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 相关文章推荐
Javascript 不能释放内存.
Sep 07 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
element tree树形组件回显数据问题解决
Aug 14 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
如何在PHP中使用Oracle数据库(4)
2006/10/09 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
php rsa加密解密使用详解
2015/01/14 PHP
PHP代码优化技巧小结
2015/09/29 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
laravel model 两表联查示例
2019/10/24 PHP
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
wxPython窗口的继承机制实例分析
2014/09/28 Python
python中二维阵列的变换实例
2014/10/09 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
python实现桌面托盘气泡提示
2019/07/29 Python
python定位xpath 节点位置的方法
2019/08/27 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
一道Delphi面试题
2016/10/28 面试题
数学教学随笔感言
2014/02/17 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
GO中sync包自由控制并发示例详解
2022/08/05 Golang
Vue router配置与使用分析讲解
2022/12/24 Vue.js