不使用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 相关文章推荐
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
Jun 14 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
vue-router源码之history类的浅析
May 21 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
vue 组件内获取actions的response方式
Nov 08 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快速统计某个数据库中每张表的数据量
2012/09/04 PHP
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
python实现识别相似图片小结
2016/02/22 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
魅力教师事迹材料
2014/01/10 职场文书
大学毕业感言100字
2014/02/03 职场文书
委托证明书
2014/09/17 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
内勤岗位职责
2015/02/10 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书