不使用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中的call实现继承
Jan 22 Javascript
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
SVG描边动画
Feb 23 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 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加密解密函数详解
2015/10/28 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
详解python3百度指数抓取实例
2016/12/12 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
python3的输入方式及多组输入方法
2018/10/17 Python
Python检测数据类型的方法总结
2019/05/20 Python
Python绘制热力图示例
2019/09/27 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
开办加工厂创业计划书
2014/01/03 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
建筑设计学生的自我评价
2014/01/16 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
大学生就业自荐书
2014/06/16 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
大学生见习报告总结
2014/11/04 职场文书
数学教师个人工作总结
2015/02/06 职场文书
农业项目投资意向书
2015/05/09 职场文书
如何写新闻稿
2015/07/18 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers
Java完整实现记事本代码
2022/06/16 Java/Android