不使用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隐藏参数post传值实例
Apr 18 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
JavaScript组件开发完整示例
Dec 15 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 Javascript
vue 限制input只能输入正数的操作
Aug 05 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实现登陆验证码(类似条行码状)
2006/10/09 PHP
php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
PHP中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
2017/07/18 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
python实现矩阵乘法的方法
2015/06/28 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
师范生自荐信范文
2013/10/06 职场文书
零件设计自荐信范文
2013/11/27 职场文书
银行内勤岗位职责
2014/04/09 职场文书
音乐节策划方案
2014/06/09 职场文书
简单租房协议书范本
2014/08/20 职场文书
教育见习报告范文
2014/11/03 职场文书
银行竞聘报告范文
2014/11/06 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP
如何使用SQL Server语句创建表
2022/04/12 SQL Server