不使用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实现多域名不同文件的调用方法
Jan 12 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
jquery实现弹出层效果实例
May 19 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
ES6中的Javascript解构的实现
Oct 30 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
也谈截取首页新闻 - 范例
2006/10/09 PHP
php中的一个中文字符串截取函数
2007/02/14 PHP
php文件上传表单摘自drupal的代码
2011/02/15 PHP
php中使用sftp教程
2015/03/30 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
python连接sql server乱码的解决方法
2013/01/28 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
在python中实现对list求和及求积
2018/11/14 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
Python class的继承方法代码实例
2020/02/14 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
管理专员自荐信
2014/01/26 职场文书
白酒市场营销方案
2014/02/25 职场文书
降消项目实施方案
2014/03/30 职场文书
中介业务员岗位职责
2014/04/09 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
个人德育工作总结
2015/03/05 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
Django Paginator分页器的使用示例
2021/06/23 Python