不使用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 相关文章推荐
文本加密解密
Jun 23 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 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中加session验证)
2012/08/22 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
python查看微信好友是否删除自己
2016/12/19 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
python django生成迁移文件的实例
2019/08/31 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
中专毕业生的自我鉴定
2013/12/01 职场文书
大学学习生活感言
2014/01/18 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
公司档案管理制度
2015/08/05 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
Python中如何处理常见报错
2022/01/18 Python
APP界面设计技巧和注意事项
2022/04/29 杂记